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

  介绍

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

<强>首先来看看接口说明:,

var  _rotate =, new  iRotate (& # 39; # div # 39;, {   ,start : 0,,//开始角度,可不写,默认0   ,最终获得:45岁//结束角度   ,time : 5000//持续时间,可不写,默认1000   ,easing : & # 39; easeout # 39;,,//动画形式,目前只有& # 39;线性# 39;和& # 39;easeout # 39;两种,可不写,默认& # 39;easeout # 39;   ,callback :函数(){,//回调函数//这个才能为当前对象   ,}   });   _rotate.stop(函数(){,//停止回调函数   ,//这为当前对象   });

<强>实现的效果图如下:

使用Javascript怎么编写一个转盘抽奖功能“> <br/> </p> <p> <img src=

<强>完整的示例代码如下:

& lt; ! DOCTYPE  html  PUBLIC “-//W3C//DTD  XHTML  1.0,过渡//EN",“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"比;   & lt; html  xmlns=癶ttp://www.w3.org/1999/xhtml"比;   & lt; head>   & lt; meta  http-equiv=癈ontent-Type",内容=皌ext/html;, charset=utf-8",/比;   & lt; title>简单转盘效果& lt;/title>   & lt; style>   # RotateDiv {border - radius: 50 px  0, 50 px  50 px }   # RotateDiv, # RotateDiv2{,宽度:50 px;高度:,50 px;,颜色:,# fff; text-align:,中心;,行高:,50 px;,背景:,# 444;,位置:,相对;,保证金:,20 px; border - radius: 50 px  0, 50 px  50 px}   & lt;/style>   & lt;/head>      & lt; body>   & lt; p>举例子:& lt;/p>   & lt; p>, & lt; button  id=癛otateBtn"在开始抽奖& lt;/button>, & lt;/p>   & lt; div  id=癛otateDiv"祝辞& lt;/div>   & lt; p>默认转动:& lt;/p>   & lt; p>, & lt; button  id=癛otateBtn2"在开始抽奖2 & lt;/button>, & lt;/p>   & lt; div  id=癛otateDiv2"祝辞& lt;/div>      & lt; script 类型=拔谋?javascript"比;   window.iRotate =,(函数(w, d) {   ,function  R (obj, json) {=,this.obj  (typeof  obj==& # 39;对象# 39;),?,obj :, d.querySelector (obj);=,,this.startTime  Date.now ();=,this.timer 零;   ,this.rotate (json);   ,};   ,R.prototype =, {   ,rotate :函数(json) {   ,var  t =,, times =, json(& # 39;时间# 39;],| |,1000;   ,clearInterval (t.timer)=,,t.timer  setInterval(函数(){   ,var  changeTime =, Date.now (),=,,tm  times 作用;Math.max (0, t.startTime 安康;changeTime  +,),=,,value 渐变(json(& # 39;宽松# 39;],| |,& # 39;easeout # 39;] (tm + json(& # 39;开始# 39;],| |,0,json(& # 39;结束# 39;],安康;(+ json(& # 39;开始# 39;],| |,0),次);   ,t.obj.style[& # 39;变换# 39;],=,t.obj.style [& # 39; -webkit-transform& # 39;],=, & # 39;旋转(& # 39;+值% 360 + & # 39;度)& # 39;;   ,t.obj.setAttribute (& # 39; data-rotate& # 39;,值% 360)   ,如果(tm==次){   clearInterval才能(t.timer);   json.callback 才能,,,,json.callback.call (t.obj)   ,}   },10)   },   ,stop :函数(fn) {   ,clearInterval (this.timer);   ,fn 及,fn.call (this.obj)   ,}   ,};   ,return  R;   })(窗口、文档);   var  Tween =,{线性:function  (t, b, c, d) {return  c * t/d  +, b;}, easeOut:,函数(t, b, c, d) {return  -c  * (t/d=) * (2), +, b;}}//默认转动   ;(函数(){   ,var  off =,真的,off2 =,真的;=,RotateBtn.onclick 函数(){   ,如果(!)return //判断是否在旋转   ,off =false   ,new  iRotate (& # 39; # RotateDiv& # 39;, {   1800年,最终获得:45 +,   ,time : 5000年,   ,callback :函数(){,//回调函数   this.innerHTML 才能=,this.getAttribute (& # 39; data-rotate& # 39;)   off 才能=,真的   ,,}   ,});   ,}   ,var  r =,空;   ,function  rotate2(){,//递归持续旋转=,,r  new  iRotate (& # 39; # RotateDiv2& # 39;, {   ,start : 0,   360年,最终获得:   ,time : 1000年,   ,easing : & # 39;线性# 39;   ,callback :函数(){   ,rotate2 ()   ,}   ,});   ,}   ,rotate2 ()=,RotateBtn2.onclick 函数(){   ,如果(!远比return //判断是否在旋转   ,off2 =false   ,r.stop();,//停止之前的旋转   ,new  iRotate (& # 39; # RotateDiv2& # 39;, {   ,start : RotateDiv2.getAttribute (& # 39; data-rotate& # 39;),   ,最终获得:65 + 1800,   ,time : 5000年,   ,callback :函数(){,//回调函数   null   null   null   null   null   null   null   null   null   null   null

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