使用Javascript怎么编写一个转盘抽奖功能

这篇文章给大家介绍使用Javascript怎么编写一个转盘抽奖功能,内容非常详细,感兴趣的小伙伴们可以参考借鉴,希望对大家能有所帮助。

网站的建设创新互联建站专注网站定制,经验丰富,不做模板,主营网站定制开发.小程序定制开发,H5页面制作!给你焕然一新的设计体验!已为门窗定制等企业提供专业服务。

首先来看看接口说明: 

var _rotate = new iRotate('#div',{
 start : 0, //开始角度,可不写,默认0
 end :45, //结束角度
 time :5000, //持续时间,可不写,默认1000
 easing : 'easeOut', //动画形式,目前只有'linear'和'easeOut'两种,可不写,默认'easeOut'
 callback : function(){ //回调函数
  //this为当前对象
 }
});
_rotate.stop(function(){ //停止回调函数
 //this为当前对象
});

实现的效果图如下:

使用Javascript怎么编写一个转盘抽奖功能

使用Javascript怎么编写一个转盘抽奖功能

完整的示例代码如下:





简单转盘效果




举例子:

 开始抽奖 

默认转动:

 开始抽奖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   }  });  } })();  

关于使用Javascript怎么编写一个转盘抽奖功能就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到。


分享文章:使用Javascript怎么编写一个转盘抽奖功能
文章源于:http://csdahua.cn/article/ieiphs.html
扫二维码与项目经理沟通

我们在微信上24小时期待你的声音

解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流