利用爪哇岛描述语言实现简单的转盘抽奖

首先来看看接口说明：

var _rotate=new iRotate('#div '，{ start : 0，//开始角度，可不写，默认0 end :45，//结束角度时间：5000,//持续时间，可不写，默认1000宽松： 'easeOut '，//动画形式，目前只有线性的和"放松"两种，可不写，默认"轻松退出"回调函数：(){//回调函数//这个为当前对象}});_rotate.stop(function(){ //停止回调函数//这个为当前对象});实现的效果图如下：

完整的示例代码如下：

！DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN ' ' http://www .w3。org/TR/XHTML 1/DTD/XHTML 1-Transitional。DTD ' html xmlns=' http://www .w3。org/1999/XHTML ' hearteta http-equiv=' Content-Type ' Content=' text/html；charset=utf-8' /title简单转盘效果/title style # RotateDiv {边框半径：50 px 0 50px 50px } # RotateDiv，# RotateDiv2 {宽度：50 px高度： 50pxcolor: # fff文本对齐：中心；线高： 50px背景技术： # 444;相对位置：margin : 20pxborder-radius :50 px 0 50px 50px }/style/head dyp举例子：/pp按钮id='RotateBtn '开始抽奖/button/pdiv id=' Rotatediv '/divp默认转动：/pp按钮id='RotateBtn2 '开始抽奖2/button/pdiv id=' rotatedi v2 '/div脚本类型=' text/JavaScript '窗口。irotate=(function(w，d){ function R(obj，JSON){ this。obj=(obj==' object ')的类型？obj :dquery selector(obj)；这个。starttime=date。now()；this.timer=nullthis。旋转(JSON)；};r . prototype={ rotate : function(JSON){ var t=this，times=JSON[' time ']| | 1000；清除间隔(t . timer)t . timer=设置间隔(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 . objstyle[' transform ']=t . obj。style['-web kit-transform ']=' rotate '(值60 ' deg ')；t . objSetAttribute(' data-rotate '，值60)if(TM==times){ ClearInterval(t . timer)；JSON。回调JSON。回调。呼叫(t . obj)} }，10) }，停止：函数(fn){ clearInterval(这个。计时器)；fn fn。叫(这个。obj)} }；返回r；})(窗口、文档);var Tween={linear:函数(t，b，c，d){返回c * t/d b；}，easeOut:函数(t，b，c，d){ return-c *(t/=d)*(t-2)b；}}//默认转动；(函数(){ var off=true，off2=truerotatebtn。onclick=function(){ if(！关闭)返回/判断是否在旋转off=false new iRotate(' # RotateDiv '，{ end :45 1800，time :5000，callback : function(){ //回调函数这个。innerhtml=this。GetAttribute(' data-rotate ')off=true } })；} var r=null函数rotate2(){ //递归持续旋转r=new iRotate('#RotateDiv2 '，{ start : 0，end :360，time :1000，easy : ' linear '，callback : function(){ rotatee 2()} })；} rotateb 2()rotateb TN 2。onclick=function(){ if(！off2)返回/判断是否在旋转off 2=false r . stop()；//停止之前的旋转新iRotate('#RotateDiv2 '，{ start : RotateDiv2。getattribute(' data-rotate ')，end :65 1800，time :5000，回调函数：(){//回调函数这个。innerhtml=this。GetAttribute(' data-rotate ')off 2=true } })；}})();/脚本/正文/html总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流。