i'm lulu

一个组件化的抽奖转盘的雏形,打破了了圆形转盘的概念

可以自定义循环个数

可以更改循环速度

可以动态显示提示语言

写在前面的话：

话说这是我第一次用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