使用Javascript怎么編寫一個(gè)轉(zhuǎn)盤抽獎(jiǎng)功能-創(chuàng)新互聯(lián)

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

成都創(chuàng)新互聯(lián)公司是一家專業(yè)提供錫林郭勒盟企業(yè)網(wǎng)站建設(shè),專注與做網(wǎng)站、成都做網(wǎng)站、HTML5、小程序制作等業(yè)務(wù)。10年已為錫林郭勒盟眾多企業(yè)、政府機(jī)構(gòu)等服務(wù)。創(chuàng)新互聯(lián)專業(yè)網(wǎng)站建設(shè)公司優(yōu)惠進(jìn)行中。

首先來看看接口說明：

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

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

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

完整的示例代碼如下：

<!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">開始抽獎(jiǎng)</button> </p>
<div id="RotateDiv"></div>
<p>默認(rèn)轉(zhuǎn)動(dòng)：</p>
<p> <button id="RotateBtn2">開始抽獎(jiǎng)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)動(dòng)
;(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怎么編寫一個(gè)轉(zhuǎn)盤抽獎(jiǎng)功能就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，可以學(xué)到更多知識(shí)。如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到。

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)建站jinyejixie.com，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。

網(wǎng)站欄目：使用Javascript怎么編寫一個(gè)轉(zhuǎn)盤抽獎(jiǎng)功能-創(chuàng)新互聯(lián)
網(wǎng)址分享：http://jinyejixie.com/article16/ccjcgg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站內(nèi)鏈、網(wǎng)站改版、網(wǎng)站維護(hù)、自適應(yīng)網(wǎng)站、網(wǎng)站導(dǎo)航、網(wǎng)站建設(shè)

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

成人午夜视频全免费观看高清-秋霞福利视频一区二区三区-国产精品久久久久电影小说-亚洲不卡区三一区三区一区

使用Javascript怎么編寫一個(gè)轉(zhuǎn)盤抽獎(jiǎng)功能-創(chuàng)新互聯(lián)