资讯

精准传达 • 有效沟通

从品牌网站建设到网络营销策划，从策略到执行的一站式服务

网站建设 >

查看其它板块

使用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://cdkjz.cn/article/ccjcgg.html
返回首页 了解更多建站资讯

相关资讯

多年建站经验

多一份参考，总有益处

联系快上网，免费获得专属《策划方案》及报价

咨询相关问题或预约面谈，可以通过以下方式与我们联系

大客户专线   成都：13518219792   座机：028-86922220

在线咨询 提交需求
友情链接 交换友情链接
免备案空间高端定制网站设计红光高低压开关厂成都定制网站德阳东方电机技改微信开发眉山做网站高防机房艾名斯线缆软文推广公司

成都网站建设公司地址：成都市青羊区太升南路288号锦天国际A座10层 建设咨询028-86922220

成都快上网科技有限公司-四川网站建设设计公司 | 蜀ICP备19037934号 Copyright 2020,ALL Rights Reserved cdkjz.cn | 成都网站建设 | © Copyright 2020版权所有.

专家团队为您提供成都网站建设,成都网站设计,成都品牌网站设计,成都营销型网站制作等服务,成都建网站就找快上网！ | 成都网站建设哪家好？ | 网站建设地图