快捷導(dǎo)航

利用Javascript實現(xiàn)簡單的轉(zhuǎn)盤抽獎

更新時間：2017年02月13日 11:47:06 投稿：daisy

這篇文章主要介紹了利用Javascript實現(xiàn)的簡單的轉(zhuǎn)盤抽獎，文中分享了兩種抽獎效果，一種是默認轉(zhuǎn)動，一種是需要點擊開始轉(zhuǎn)動的，并給出了晚上的示例代碼，需要的朋友可以參考借鑒，下面來一起看看吧。

首先來看看接口說明：

var _rotate = new iRotate('#div',{
 start : 0, //開始角度，可不寫，默認0
 end :45, //結(jié)束角度
 time :5000, //持續(xù)時間，可不寫，默認1000
 easing : 'easeOut', //動畫形式，目前只有'linear'和'easeOut'兩種，可不寫，默認'easeOut'
 callback : function(){ //回調(diào)函數(shù)
  //this為當前對象
 }
});
_rotate.stop(function(){ //停止回調(diào)函數(shù)
 //this為當前對象
});

實現(xiàn)的效果圖如下：

完整的示例代碼如下：

<!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>簡單轉(zhuǎn)盤效果</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>默認轉(zhuǎn)動：</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;}}

//默認轉(zhuǎn)動
;(function(){
 var off = true,off2 = true;
 RotateBtn.onclick = function(){
 if(!off) return //判斷是否在旋轉(zhuǎn)
 off = false
 new iRotate('#RotateDiv',{
 end :45+1800,
 time :5000,
 callback : function(){ //回調(diào)函數(shù)
  this.innerHTML = this.getAttribute('data-rotate')
  off = true
  }
 });
 }
 var r = null;
 function rotate2(){ //遞歸持續(xù)旋轉(zhuǎn)
 r = new iRotate('#RotateDiv2',{
 start : 0,
 end :360,
 time :1000,
 easing : 'linear',
 callback : function(){
 rotate2()
 }
 });
 }
 rotate2()
 RotateBtn2.onclick = function(){
 if(!off2) return //判斷是否在旋轉(zhuǎn)
 off2 = false
 r.stop(); //停止之前的旋轉(zhuǎn)
 new iRotate('#RotateDiv2',{
 start : RotateDiv2.getAttribute('data-rotate'),
 end :65+1800,
 time :5000,
 callback : function(){ //回調(diào)函數(shù)
  this.innerHTML = this.getAttribute('data-rotate')
  off2 = true
  }
 });
 }
})();
 
</script>

</body>
</html>

總結(jié)

以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作能帶來一定的幫助，如果有疑問大家可以留言交流。

您可能感興趣的文章: