js實現(xiàn)轉(zhuǎn)盤抽獎功能
更新時間：2022年03月09日 13:45:36 作者：kirsten_z
這篇文章主要為大家詳細介紹了js實現(xiàn)轉(zhuǎn)盤抽獎功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了js實現(xiàn)轉(zhuǎn)盤抽獎功能的具體代碼，供大家參考，具體內(nèi)容如下
效果：點擊抽獎按鈕，轉(zhuǎn)盤開始旋轉(zhuǎn)數(shù)圈后停止
示例：
抽獎html代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="apple-touch-fullscreen" content="YES" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="format-detection" content="telephone=no" />
<link rel="apple-touch-icon-precomposed" href="icon.png" />
<meta http-equiv="Cache-Control" content="max-age=0" />
<meta name="viewport" content="width=device-width; initial-scale=1.0; ?minimum-scale=1.0; maximum-scale=1.0" />
<meta name="MobileOptimized" content="320" />
<title>抽獎頁</title>
<script type="text/javascript" src="jquery-3.0.0.min.js"></script>
<script type="text/javascript" src="disk.js"></script>
<link type="text/css" rel="stylesheet" href="style.css"/>
</head>
<body>
? ? <div class="wrap_disk">
? ? ? ? <div class="page">
? ? ? ? ? ? <div id="divDisk" class="disk">
? ? ? ? ? ? ? ? <div id="divPointer" class="pointer"></div>
? ? ? ? ? ? </div>
? ? ? ? </div>
? ? </div>?
? ? <script type="text/javascript">
? ? ? ? disk.init();//抽獎插件初始化
? ? ? ? if($(window).height()<568){
? ? ? ? ? ? $('.wrap_disk').css('height','568px');
? ? ? ? }
? ? ? ? else{
? ? ? ? ? ? $('.wrap_disk').css('min-height',$(window).height());
? ? ? ? }
? ? </script>
</body>
</html>抽獎實現(xiàn)js
1）原生版
// JavaScript Document
(function(win){
? ? var degDivide = 45;
? ? var prizeName;
? ? var prizeTypeArr = ['一等獎','三等獎','繼續(xù)加油！','二等獎','參與獎'];
? ? var prizeTypeDegArr = [[300],[180],[240,0],[60],[120]];
? ? var disk = {
? ? ? ? prizeType : 0,
? ? ? ? nowDeg : 0,
? ? ? ? willDeg : 0,
? ? ? ? weixinId : null,
? ? ? ? contentId : null,
? ? ? ? turnFlag : true,
? ? ? ? count : null,
? ? ? ? init : function(id,contentid,count,flag){
? ? ? ? ? ? var t = this;
? ? ? ? ? ? divPointer.onclick = function(){
// ? ? ? ? ? ? ? ? ? ? ?t.nowDeg = t.nowDeg%360;
// ? ? ? ? ? ? ? ? ? ? ?/*webkit*/
// ? ? ? ? ? ? ? ? ? ? ?divPointer.style.webkitTransitionTimingFunction = 'cubic-bezier(.53,.3,.24,1.01)';
// ? ? ? ? ? ? ? ? ? ? ?divPointer.style.webkitTransitionDuration = '4s'
// ? ? ? ? ? ? ? ? ? ? ?divPointer.style.webkitTransitionProperty = 'width';
// ? ? ? ? ? ? ? ? ? ? ?divPointer.style.webkitTransform = 'rotate('+ t.nowDeg +'deg)';
// ? ? ? ? ? ? ? ? ? ? ?/*ie*/
// ? ? ? ? ? ? ? ? ? ? ?divPointer.style.msTransitionTimingFunction = 'cubic-bezier(.53,.3,.24,1.01)';
// ? ? ? ? ? ? ? ? ? ? ?divPointer.style.msTransitionDuration = '4s'
// ? ? ? ? ? ? ? ? ? ? ?divPointer.style.msTransitionProperty = 'width';
// ? ? ? ? ? ? ? ? ? ? ?divPointer.style.msTransform = 'rotate('+ t.nowDeg +'deg)';
? ? ? ? ? ? ? ? t.lottery();
? ? ? ? ? ? } ??
? ? ? ? },
? ? ? ? lottery: function(){ ? ?
? ? ? ? ? ? var t = this;
? ? ? ? ? ? ? ? t.prizeType= t._rand();
? ? ? ? ? ? ? ? t._judge();
? ? ? ? },
? ? ? ? //獲取范圍內(nèi)的隨機數(shù)
? ? ? ? ?_rand: function (){
? ? ? ? ? ? var max=4;
? ? ? ? ? ? var min=0;
? ? ? ? ? ? return Math.floor(min+Math.random()*(max-min));
? ? ? ? },
? ? ? ? _judge: function(){
? ? ? ? ? ? var t = this,
? ? ? ? ? ? judgeArr = prizeTypeDegArr[t.prizeType],
? ? ? ? ? ? judgeArrLen = judgeArr.length;
? ? ? ? ? ? if(judgeArrLen == 1){
? ? ? ? ? ? ? ? t.willDeg = 1080 + judgeArr[0] + 2 + (degDivide-4)*Math.random();
? ? ? ? ? ? ? ? prizeName = prizeTypeArr[t.prizeType];
? ? ? ? ? ? }else if(judgeArrLen > 1){
? ? ? ? ? ? ? ? var judgeArrRan =Math.floor(judgeArrLen * Math.random());
? ? ? ? ? ? ? ? t.willDeg = 1080 + judgeArr[judgeArrRan] + 2 + (degDivide-4)*Math.random();
? ? ? ? ? ? ? ? prizeName = prizeTypeArr[t.prizeType];
? ? ? ? ? ? }else{
? ? ? ? ? ? ? ? return;?
? ? ? ? ? ? }
? ? ? ? ? ? t._turn();
? ? ? ? },
? ? ? ? _turn : function(){
? ? ? ? ? ? var t = this;
? ? ? ? ? ? setTimeout(function(){
? ? ? ? ? ? ? ? divPointer.style.webkitTransitionTimingFunction = 'cubic-bezier(.53,.3,.24,1.01)';
? ? ? ? ? ? ? ? divPointer.style.webkitTransitionDuration = '4s'
? ? ? ? ? ? ? ? divPointer.style.webkitTransitionProperty = 'all';
? ? ? ? ? ? ? ? divPointer.style.webkitTransform = 'rotate('+ t.willDeg +'deg)';
? ? ? ? ? ? ? ? divPointer.style.msTransitionTimingFunction = 'cubic-bezier(.53,.3,.24,1.01)';
? ? ? ? ? ? ? ? divPointer.style.msTransitionDuration = '4s'
? ? ? ? ? ? ? ? divPointer.style.msTransitionProperty = 'all';
? ? ? ? ? ? ? ? divPointer.style.msTransform = 'rotate('+ t.willDeg +'deg)';
? ? ? ? ? ? ? ? //t.nowDeg = t.willDeg;
? ? ? ? ? ? },100);
? ? ? ? ? ? setTimeout(function(){
? ? ? ? ? ? ? ? var clss;
? ? ? ? ? ? ? ? clss = "noPreize";
? ? ? ? ? ? ? ? t.myAlert('',prizeName,'ok',function(){
? ? ? ? ? ? ? ? ? ? divPointer.style.webkitTransitionProperty = 'width';
? ? ? ? ? ? ? ? ? ? divPointer.style.webkitTransform = 'rotate(0deg)';
? ? ? ? ? ? ? ? ? ? divPointer.style.msTransitionProperty = 'width';
? ? ? ? ? ? ? ? ? ? divPointer.style.msTransform = 'rotate(0deg)';
? ? ? ? ? ? ? ? ? ? t.turnFlag = true;
? ? ? ? ? ? ? ? },clss);
? ? ? ? ? ? },4100)
? ? ? ? },
? ? ? ? tels : function(){
? ? ? ? ? ? var t = this;
? ? ? ? ? ? t.myPrompt('請?zhí)顚懯謾C號!','','確定','取消',function(){
? ? ? ? ? ? ? ? var telNum = $('.my_prompt_text input').val();
? ? ? ? ? ? ? ? var telephone_regx = /^(((13[0-9]{1})|14[0-9]{1}|15[0-9]{1}|18[0-9]{1})\d{8})$/;
? ? ? ? ? ? ? ? if(telNum == '' || !telephone_regx.exec(telNum)){
? ? ? ? ? ? ? ? ? ? t.myAlert('','填寫正確手機號','ok',function(){
? ? ? ? ? ? ? ? ? ? ? ? t.tels();
? ? ? ? ? ? ? ? ? ? });
? ? ? ? ? ? ? ? }else{
? ? ? ? ? ? ? ? ? ? //Ajax提交手機號碼
? ? ? ? ? ? ? ? ? ? $.ajax({
? ? ? ? ? ? ? ? ? ? ? ? type:"POST",
? ? ? ? ? ? ? ? ? ? ? ? success:function(json){
? ? ? ? ? ? ? ? ? ? ? ? ? ? var data = $.parseJSON(json);
? ? ? ? ? ? ? ? ? ? ? ? ? ? var submitFlag = data.submit;
? ? ? ? ? ? ? ? ? ? ? ? ? ? if(submitFlag == 'succeed'){
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? t.myAlert('','提交成功！','ok',function(){
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? $('.my_prompt').hide();
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? t.turnFlag = true;
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? });?
? ? ? ? ? ? ? ? ? ? ? ? ? ? }else{
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? t.myAlert('','提交失??！','ok',function(){
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? t.tels();
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? });?
? ? ? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? ? ? ? ? error:function(){
? ? ? ? ? ? ? ? ? ? ? ? ? ? t.myAlert('','請檢查網(wǎng)絡(luò)！','ok',function(){
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? t.tels();
? ? ? ? ? ? ? ? ? ? ? ? ? ? });
? ? ? ? ? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? ? ? ? ? timeout:'5000',
? ? ? ? ? ? ? ? ? ? ? ? url:'/weixin/front_index.inc.php?type=turntable&action=submit',
? ? ? ? ? ? ? ? ? ? ? ? data:{id:t.wenxinId,contentid:t.contentId,telephone:telNum}?
? ? ? ? ? ? ? ? ? ? })
? ? ? ? ? ? ? ? }
? ? ? ? ? ? },function(){
? ? ? ? ? ? ? ? t.turnFlag = true;
? ? ? ? ? ? ? ? return;
? ? ? ? ? ? });
? ? ? ? },
? ? ? ? getPrize : function(){
? ? ? ? ? ? var t = this;
? ? ? ? ? ? $('.getIt').hide();
? ? ? ? ? ? divPointer.style.webkitTransitionProperty = 'width';
? ? ? ? ? ? divPointer.style.webkitTransform = 'rotate(0deg)';
? ? ? ? ? ? divPointer.style.msTransitionProperty = 'width';
? ? ? ? ? ? divPointer.style.msTransform = 'rotate(0deg)';
? ? ? ? ? ? t.tels();
? ? ? ? },
? ? ? ? myAlert : function(title,text,btnText,fn,cls){
? ? ? ? ? ? $('.my_alert').hide();
? ? ? ? ? ? $('.my_alert_title').html(title);
? ? ? ? ? ? $('.my_alert_text').html(text);
? ? ? ? ? ? if(btnText == '') btnText = 'ok';
? ? ? ? ? ? $('.my_alert_btn input').val(btnText);
? ? ? ? ? ? $('.my_alert_btn input').click(function(){
? ? ? ? ? ? ? ? $('.my_alert').hide();
? ? ? ? ? ? ? ? fn(); ??
? ? ? ? ? ? });
? ? ? ? ? ? if(cls == '' || cls == undefined){
? ? ? ? ? ? ? ? ?$('.my_alert').attr('class','my_alert');
? ? ? ? ? ? }else{
? ? ? ? ? ? ? ? $('.my_alert').attr('class','my_alert ' + cls);
? ? ? ? ? ? }
? ? ? ? ? ? $('.my_alert').show();
? ? ? ? },
? ? ? ? myPrompt : function(title,text,btnTextY,btnTextN,fnY,fnN){
? ? ? ? ? ? $('.my_prompt').hide();
? ? ? ? ? ? $('.my_prompt_title').html(title);
? ? ? ? ? ? //$('.my_prompt_text').html(text);
? ? ? ? ? ? if(btnTextY == '') btnTextY = 'ok';
? ? ? ? ? ? if(btnTextN == '') btnTextN = 'no';
? ? ? ? ? ? $('.my_prompt_btnY').val(btnTextY).click(function(){
? ? ? ? ? ? ? ? $('.my_prompt').hide();
? ? ? ? ? ? ? ? fnY(); ?
? ? ? ? ? ? });
? ? ? ? ? ? $('.my_prompt_btnN').val(btnTextN).click(function(){
? ? ? ? ? ? ? ? $('.my_prompt').hide();
? ? ? ? ? ? ? ? fnN(); ?
? ? ? ? ? ? });
? ? ? ? ? ? $('.my_prompt').show();
? ? ? ? }
? ? }
? ? win.disk = disk;
})(window)2）優(yōu)化版（實際應(yīng)用）
// JavaScript Document
(function(win){
? ? var degDivide = 60;//各獎品旋轉(zhuǎn)角度范圍60°
? ? var prizeName;//獎品名稱
? ? //獎品次序及獎品名稱
? ? var prizeTypeArr = ['繼續(xù)加油！','二等獎','參與獎','三等獎','繼續(xù)加油！','一等獎'];
? ? //獎品編號
? ? var prizeTypeArrType = [0,1,2,3,4,5];
? ? //獎品范圍開始度數(shù)
? ? var prizeTypeDegArr = [[0],[60],[120],[180],[240],[300]];
? ? //var prizeTypeDegArr = [[0,240],[60],[120],[180],[300]];
? ? var disk = {//初始化插件參數(shù)
? ? ? ? prizeType : 0,
? ? ? ? nowDeg : 0,
? ? ? ? willDeg : 0,
? ? ? ? weixinId : null,
? ? ? ? contentId : null,
? ? ? ? turnFlag : true,
? ? ? ? count : null,
? ? ? ? init : function(id,contentid,count,flag){
? ? ? ? ? ? var t = this;
? ? ? ? ? ? //點擊指定原生，觸發(fā)抽獎方法
? ? ? ? ? ? divPointer.onclick = function(){
? ? ? ? ? ? ? ? t.lottery();
? ? ? ? ? ? } ??
? ? ? ? },
? ? ? ? //抽獎方法實現(xiàn)
? ? ? ? lottery: function(){ ? ?
? ? ? ? ? ? var t = this;
? ? ? ? ? ? var url = '/award/choice-award';
? ? ? ? ? ? $.post(url, {}, function(msg){
? ? ? ? ? ? ? ? if(msg == 'false'){
? ? ? ? ? ? ? ? ? ? alert('未中獎~');
? ? ? ? ? ? ? ? ? ? return;
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? //賦值獎品編號
? ? ? ? ? ? ? ? t.prizeType= msg;
? ? ? ? ? ? ? ? t._judge();
? ? ? ? ? ? });?
? ? ? ? },
? ? ? ? //獲取指針旋轉(zhuǎn)角度數(shù)
? ? ? ? _judge: function(){
? ? ? ? ? ? var t = this,
? ? ? ? ? ? judgeArr = prizeTypeDegArr[t.prizeType],
? ? ? ? ? ? judgeArrLen = judgeArr.length;
? ? ? ? ? ? if(judgeArrLen == 1){//設(shè)置旋轉(zhuǎn)圈數(shù)
? ? ? ? ? ? ? ? t.willDeg = 1800 + judgeArr[0] + 2 + (degDivide-4)*Math.random();
? ? ? ? ? ? ? ? prizeName = prizeTypeArr[t.prizeType];
? ? ? ? ? ? }else if(judgeArrLen > 1){
? ? ? ? ? ? ? ? var judgeArrRan =Math.floor(judgeArrLen * Math.random());
? ? ? ? ? ? ? ? t.willDeg = 1800 + judgeArr[judgeArrRan] + 2 + (degDivide-4)*Math.random();
? ? ? ? ? ? ? ? prizeName = prizeTypeArr[t.prizeType];
? ? ? ? ? ? }else{
? ? ? ? ? ? ? ? return;?
? ? ? ? ? ? }
? ? ? ? ? ? t._turn();
? ? ? ? },
? ? ? ? //實現(xiàn)轉(zhuǎn)盤旋轉(zhuǎn)效果
? ? ? ? _turn : function(){
? ? ? ? ? ? var t = this;
? ? ? ? ? ? setTimeout(function(){
? ? ? ? ? ? ? ? divPointer.style.webkitTransitionTimingFunction = 'cubic-bezier(.53,.3,.24,1.01)';
? ? ? ? ? ? ? ? divPointer.style.webkitTransitionDuration = '2s'
? ? ? ? ? ? ? ? divPointer.style.webkitTransitionProperty = 'all';
? ? ? ? ? ? ? ? divPointer.style.webkitTransform = 'rotate('+ t.willDeg +'deg)';
? ? ? ? ? ? ? ? divPointer.style.msTransitionTimingFunction = 'cubic-bezier(.53,.3,.24,1.01)';
? ? ? ? ? ? ? ? divPointer.style.msTransitionDuration = '2s'
? ? ? ? ? ? ? ? divPointer.style.msTransitionProperty = 'all';
? ? ? ? ? ? ? ? divPointer.style.msTransform = 'rotate('+ t.willDeg +'deg)';
? ? ? ? ? ? },100);
? ? ? ? ? ? //轉(zhuǎn)盤停止后操作
? ? ? ? ? ? setTimeout(function(){
? ? ? ? ? ? ? ? //未中獎顯示
? ? ? ? ? ? ? ? if (t.prizeType == 0 || t.prizeType == 4) {
? ? ? ? ? ? ? ? ? ? alert('未中獎~');
? ? ? ? ? ? ? ? ? ? return false;
? ? ? ? ? ? ? ? } else {
? ? ? ? ? ? ? ? ? ? alert('中獎了~');
? ? ? ? ? ? ? ? }
? ? ? ? ? ? },2100)
? ? ? ? },
? ? }
? ? win.disk = disk;
})(window)以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了js 如何刪除對象里的某個屬性，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
js實現(xiàn)百度聯(lián)盟中一款不錯的圖片切換效果完整實例
這篇文章主要介紹了js實現(xiàn)百度聯(lián)盟中一款不錯的圖片切換效果的方法,以完整實例形式分析了javascript操作圖片切換的技巧,需要的朋友可以參考下2015-03-03
這篇文章主要為大家詳細介紹了js實現(xiàn)百度登錄框鼠標拖拽效果的相關(guān)資料，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-03-03
瀏覽器加載、渲染和解析過程的黑箱分析,對于渲染，利用 Fiddler 將網(wǎng)速調(diào)慢，可以看到 css 下載后會馬上渲染到頁面，渲染和下載同步進行,需要的朋友可以參考下2012-11-11
這篇文章主要為大家詳細介紹了javascript正則replace的使用方法，感興趣的朋友可以參考一下2016-03-03
下面小編就為大家?guī)硪黄猨s中獲取鍵盤事件的簡單實現(xiàn)方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-10-10
用了獲取鍵盤值的代碼。2009-04-04
解讀TypeScript與JavaScript的區(qū)別
這篇文章主要介紹了TypeScript與JavaScript的區(qū)別及說明，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-12-12
本篇文章主要介紹了js中定時器的使用方法。需要的朋友可以過來參考下，希望對大家有所幫助2014-01-01
這篇文章主要為大家詳細介紹了微信小程序?qū)崿F(xiàn)簡易封裝彈窗，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-01-01