利用Javascript实现简单的转盘抽奖

var_rotate =newiRotate('#div',{

 start : 0,//开始角度，可不写，默认0

 end :45,//结束角度

 time :5000,//持续时间，可不写，默认1000

 easing :'easeOut',//动画形式，目前只有'linear'和'easeOut'两种，可不写，默认'easeOut'

 callback :function(){//回调函数

  //this为当前对象

 }

});

_rotate.stop(function(){//停止回调函数

 //this为当前对象

});

举例子：

开始抽奖

默认转动：

开始抽奖2

window.iRotate = (function(w,d){

 function R(obj,json){

 this.obj = (typeof obj=='object') ? obj : d.querySelector(obj);

 this.startTime = Date.now();

 this.timer = null;

 this.rotate(json);

 };

 R.prototype = {

 rotate : function(json){

 var t = this,times = json['time'] || 1000;

 clearInterval(t.timer)

 t.timer = setInterval(function(){

 var changeTime = Date.now(),

 tm = times - Math.max(0,t.startTime - changeTime + times),

 value = Tween[json['easing'] || 'easeOut'](tm,+json['start'] || 0,json['end'] - (+json['start'] || 0),times);

 t.obj.style['transform'] = t.obj.style['-webkit-transform'] = 'rotate('+value%360+'deg)';

 t.obj.setAttribute('data-rotate',value%360)

 if(tm==times){

  clearInterval(t.timer);

  json.callback && json.callback.call(t.obj)

 }

 },10)

 },

 stop : function(fn){

 clearInterval(this.timer);

 fn && fn.call(this.obj)

 }

 };

 return R;

})(window,document);

var Tween = {linear: function (t, b, c, d){return c*t/d + b;},easeOut: function(t, b, c, d){return -c *(t/=d)*(t-2) + b;}}

//默认转动

;(function(){

 var off = true,off2 = true;

 RotateBtn.onclick = function(){

 if(!off) return //判断是否在旋转

 off = false

 new iRotate('#RotateDiv',{

 end :45+1800,

 time :5000,

 callback : function(){ //回调函数

  this.innerHTML = this.getAttribute('data-rotate')

  off = true

  }

 });

 }

 var r = null;

 function rotate2(){ //递归持续旋转

 r = new iRotate('#RotateDiv2',{

 start : 0,

 end :360,

 time :1000,

 easing : 'linear',

 callback : function(){

 rotate2()

 }

 });

 }

 rotate2()

 RotateBtn2.onclick = function(){

 if(!off2) return //判断是否在旋转

 off2 = false

 r.stop(); //停止之前的旋转

 new iRotate('#RotateDiv2',{

 start : RotateDiv2.getAttribute('data-rotate'),

 end :65+1800,

 time :5000,

 callback : function(){ //回调函数

  this.innerHTML = this.getAttribute('data-rotate')

  off2 = true

  }

 });

 }

})();