使用Javascript怎么编写一个转盘抽奖功能-创新互联

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

成都创新互联公司是一家专业提供锡林郭勒盟企业网站建设,专注与做网站、成都做网站、HTML5、小程序制作等业务。10年已为锡林郭勒盟众多企业、政府机构等服务。创新互联专业网站建设公司优惠进行中。

首先来看看接口说明: 

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

另外有需要云服务器可以了解下创新互联建站www.cdcxhl.com,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。


文章标题:使用Javascript怎么编写一个转盘抽奖功能-创新互联
文章地址:http://ybzwz.com/article/ccjcgg.html

其他资讯