溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

使用Javascript怎么編寫一個轉(zhuǎn)盤抽獎功能

發(fā)布時間：2020-12-22 15:27:10 來源：億速云 閱讀：195 作者：Leah 欄目：web開發(fā)

這篇文章給大家介紹使用Javascript怎么編寫一個轉(zhuǎn)盤抽獎功能，內(nèi)容非常詳細(xì)，感興趣的小伙伴們可以參考借鑒，希望對大家能有所幫助。

首先來看看接口說明： 

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

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

使用Javascript怎么編寫一個轉(zhuǎn)盤抽獎功能

使用Javascript怎么編寫一個轉(zhuǎ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>默認(rèn)轉(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;}}

//默認(rèn)轉(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>

關(guān)于使用Javascript怎么編寫一個轉(zhuǎn)盤抽獎功能就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，可以學(xué)到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手