利用Javascript实现简单的转盘抽奖

首先来看看接口说明：

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为当前对象}）;

实现的效果图如下：

完整的示例代码如下：

<！DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>简单转盘效果</title><style>#RotateDiv{border-radius:50px 0 50px 50px }#RotateDiv,#RotateDiv2{ width: 50px;height: 50px; color: #fff;text-align: center; line-height: 50px; background: #444; position: relative; margin: 20px;border-radius:50px 0 50px 50px}</style></head><body><p>举例子：</p><p> <button id="RotateBtn">开始抽奖</button> </p><div id="RotateDiv"></div><p>默认转动：</p><p> <button id="RotateBtn2">开始抽奖2</button> </p><div id="RotateDiv2"></div><script type="text/javascript">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} }）; }}）（）; </script></body></html>

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