用◆制作小箭头，最近发现在ie下调皮的小箭头会自个儿玩跷跷板，常出现左右不一的情况。
用position属性定位一个类似遮罩的层将◆遮罩成小箭头。在不同浏览器中会出现如下情况（为了方便观察加给元素加上了背景颜色）：
Chrome(正常)
Firefox（正常）
IE7（箭头显示正常，白色容器右边被撑开1像素）
IE8（白色容器正常，◆右边多出1像素，箭头显示不正常）
IE9（白色容器正常，◆右边多出1像素，箭头显示不正常）
经反复测试和分析是iebug导致。当字体设置11px或者12px时，在浏览器下都显示11px;，由于每个浏览器渲染的不同右边会多出1像素。
后来经某位童鞋提醒，用text-indent来定位◆小箭头既简单又实用。
将两个箭头容器定义相同的宽度，再将右边的text-indent负值就行了别忘了overflow:hidden哦~
示例：
http://www.sannielu.com/demo/arrow.html
一个组件化的抽奖转盘的雏形,打破了了圆形转盘的概念
可以自定义循环个数
可以更改循环速度
可以动态显示提示语言
写在前面的话：
话说这是我第一次用javascript做组件。从开会讨论开始我就有点小激动。很感谢另外两位同事sunny kevin的帮助。之前活动抽奖转盘都是以背景图+flash的形式圆形呈现。考虑到flash的兼容性和调用相对js而言较复杂，也为了未来组件库的组建考虑我们采用了js来写。
组件介绍：
代码简介：
HTML 部分
算法
Javascript部分
//旋转格子
var a = document.getElementById('focus');
function grid(k, m, n, w, h){ //k=格子个数；m=抽奖转盘一边横轴的格子个数；n=抽奖转盘一边竖轴的格子个数；w=单个格子宽度；h=单个格子的高度
if(k>=1&&k<=m-1){
for(var i=1; i<=k; i++){
a.style.left = (i-1)*w + "px";
a.style.top = 0;
}
}
else if(k>=m&&k<=m+n-2){
for(var i=m; i<=k; i++){
a.style.left = (m-1)*w + "px";
a.style.top = (k-m)*h + "px";
}
}
else if(k>=m+n-1 && k<=2*m+n-3){
for(var i=m+n-1; i<=2*m+n-3; i++){
a.style.left = (2*m-k+n-2)*w + "px";
a.style.top = (n-1)*h + "px";
}
}
else if(k>=2*m+n-2 && k<=2*m+2*n-4){
for(var i=2*m+n-2; i<=2*m+2*n-4; i++){
a.style.left = 0;
a.style.top = (2*m+2*n-4-k+1)*h + "px";
}
}
}
//循环滚动
var k=1;
var interval =self.setInterval(function(){
if(k>16){
k=1;
}
grid(k,5,5,102,102);
k++;
},500)
为了未来更方便的应用到实际项目中，我们做了代码优化将其封装。
封装后（部分）代码：
//获取方块位置
grid : function(){
if(this.sqNum>=1&&this.sqNum<=this.cols-1){
for(var i=1; i<=this.sqNum; i++){
this.square.style.left = (i-1)*this.sqWidth + "px";
this.square.style.top = 0;
}
}
else if(this.sqNum>=this.cols&&this.sqNum<=this.cols+this.rows-2){
for(var i=this.cols; i<=this.sqNum; i++){
this.square.style.left = (this.cols-1)*this.sqWidth + "px";
this.square.style.top = (this.sqNum-this.cols)*this.sqHeight + "px";
}
}
else if(this.sqNum>=this.cols+this.rows-1 && this.sqNum<=2*this.cols+this.rows-3){
for(var i=this.cols+this.rows-1; i<=2*this.cols+this.rows-3; i++){
this.square.style.left = (2*this.cols-this.sqNum+this.rows-2)*this.sqWidth + "px";
this.square.style.top = (this.rows-1)*this.sqHeight + "px";
}
}
else if(this.sqNum>=2*this.cols+this.rows-2 && this.sqNum<=2*this.cols+2*this.rows-4){
for(var i=2*this.cols+this.rows-2; i<=2*this.cols+2*this.rows-4; i++){
this.square.style.left = 0;
this.square.style.top = (2*this.cols+2*this.rows-4-this.sqNum+1)*this.sqHeight + "px";
}
}
},
//启动转盘
start : function(){
Wheel.timer = setInterval(function(){
if(Wheel.sqNum>Wheel.sqCount){
Wheel.sqNum=1;
}
Wheel.grid();
Wheel.sqNum++;
},500)
},
后期还需要与动态数据对接和一些优化。
师傅说：会写js的mm上辈子都是折翼天使，伤不起哈。
不管怎么说学习的过程在于亲自动手，很感谢帮助过我的所有人。也希望跟我一样正在学习js的妹纸都勇往直前吧。
突然听到身边最亲昵的朋友说
“你和以前不一样了”。
“老了呗，呵呵。”
“不是……”
我只想会心一笑。
我们每个人都在随着时光而成长。无论是外貌还是内心，其实并不“突然”。我们依然有“幼稚”如孩童的一面，亦会有成熟如智者的时候。
长大没有什么不好。有烦恼亦有快乐。我们可以用我们的智慧与阅历去劝导那些比我们经历稍短的孩子。我们也可以如积水般低微的去聆听善者的教诲。
一切一切都是快乐的，它帮助我们成为一个真正的人。我忽然有一种享受这种成长的感觉，无论它给我带来任何喜怒哀乐。
就让我们快乐的长大，优雅的变老吧~！
此片献给蜕变中的自己！
感谢猫咪的拍摄，处女作品拍的不错哦，我很喜欢^^
友情，是一件天长地久的事情。
无论我们身在何处都有那么一群人让我们感动。
我想说遇见你，认识你，一起哭，一起笑，一起抱怨，一起分享真的是人生中必不可少的幸福之事。
此片献给我所有的金兰之交。
栈方法：push() pop() LIFO（后进先出）
push方法接收任意参数，将其逐个添加至数组末尾，并返回修改后数组长度。
pop方法从数组末尾移除最后一项，减少数组length值。
列队方法：push() shift() FIFO（先进先出）
shift方法移除数组中第一个项并返回该项，同时数组长度减一。
unshift方法在数组前端添加任意个项，并返回新数组长度。
var color = ['red', 'blue'];
color.push('brown');
color.unshift('white');
alert(color);//white, red, blue, brown
alert(color.shift());//white
alert(color.pop());//brown
alert(color.length);//2