腳本之家服務器常用軟件

快捷導航

JavaScript手寫九宮格抽獎demo

更新時間：2023年10月08日 09:26:10 作者：Winn

這篇文章主要為大家介紹了JavaScript 手寫九宮格抽獎demo,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪

引言

九格宮抽獎相信大家都玩過，今天就用 JavaScript 寫個九宮格抽獎玩玩。讓中獎不再是夢！

1.預覽效果

效果圖為屏幕錄制軟件生成，以至于出現(xiàn)滾動不連貫。實際運行中不會出現(xiàn)不連貫的滾動效果

2.完整代碼

代碼可直接復制運行查看效果（圖片記得更換）

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript 實現(xiàn)九宮格抽獎</title>
<style>
    body{
        background-color: #2c9afc;
    }
    #container {
        width: 330px;
        height: 340px;
        margin: 10% auto;
        border: 7px solid #99d4ff;
        border-radius: 10px;
        padding: 2%;
    }
    #list {
        width: 330px;
        height: 340px;
        list-style: none;
        margin: 0;
        padding: 0;
    }
    #list li,
    #list span {
        width: 100px;
        height: 100px;
        float: left;
        text-align: center;
        line-height: 100px;
        position: relative;
        background-color: #384f9a;
        margin: 1.4%;
        border-radius: 5px;
    }
    #list li img{
        display: block;
        width: 100%;
        height: 100%;
    }
    #list li .mask{
        width: 100%;
        height: 100%;
        position: absolute;
        left:0;
        top:0;
        background: url(images/mask.png) no-repeat;
        background-size: cover;
        display: none;
    }
    #list span:hover {
        cursor: pointer;
        color: orange;
        font-size: 18px;
    }
    #list .active .mask{
        display: block;
    }
    #message {
        line-height: 32px;
        color: #9a9a9a;
        text-align: center;
        position:absolute;
        left: 50%;
        top: 50px;
        width: 300px;
        height: 50px;
        margin-left: -150px;
        display: none;
        background: #000;
        color: #fff;
    }
</style>
</head>
<body>            
    <h3 style="text-align:center;margin-top: 10%;color:white">JavaScript 實現(xiàn)九宮格抽獎</h3>
    <div id="container">
        <ul id="list">
            <!-- img標簽放獎品圖片 -->
            <!-- mask類為抽獎滾動起來的標記 -->
            <li><img src="images/1.png"/><div class="mask"></div></li>
            <li><img src="images/2.png"/><div class="mask"></div></li>
            <li><img src="images/3.png"/><div class="mask"></div></li>
            <li><img src="images/4.png"/><div class="mask"></div></li>
            <span id="startbutton" onclick="startlottery()" style="background-color:#ff3a59;color:white;font-size: 20px;">開始抽獎</span>
            <li><img src="images/5.png"/><div class="mask"></div></li>
            <li><img src="images/6.png"/><div class="mask"></div></li>
            <li><img src="images/7.png"/><div class="mask"></div></li>
            <li><img src="images/8.png"/><div class="mask"></div></li>
        </ul>
        <div id="message"></div><!-- 獲獎信息展示 -->
    </div>
</body>
<script type="text/javascript">
    var container = document.getElementById('container'),
        li = container.getElementsByTagName('li'),
        span = document.getElementById('startbutton'),
        message = document.getElementById('message'),
        timer = null;
        bReady = true;//定義一個抽獎開關
    var prize = [0,1,2,4,7,6,5,3];//獎品li標簽滾動的順序
    var num = 0;//num用來存放得到的隨機函數(shù)，也就是抽中的獎品
    //開始抽獎
    function startlottery(){
        if(bReady) {//當抽獎開關為true的時候，可點擊抽獎
            message.style.display="none";//將獲獎信息div隱藏（以防止上次抽獎信息還顯示）
            span.style.background="#ada7a8";
            bReady = false;//抽獎開關設為false 處于抽獎中 即不能點擊抽獎
            num = getrandomnum(1,9)//得到一個隨機數(shù)（即獎品）
            // console.log(num)
            startinit(num);//執(zhí)行抽獎初始化
        }
    }
    //抽中的獎品 返回1-9的整數(shù)，包含1，不包含9
    function getrandomnum(n, m) {
        return parseInt((m - n) * Math.random() + n);
    }
    //抽獎初始化
    function startinit(num) {
        var i = 0;  //定義一個i 用來計算抽獎跑動的總次數(shù)
        var t =200;  //抽獎跑動的速度 初始為200毫秒
        var rounds = 5;  //抽獎轉動的圈數(shù)
        var rNum = rounds*8;  //標記跑動的次數(shù)（這是一個條件判斷分界線）
        timer = setTimeout(startscroll, t);//每t毫秒執(zhí)行startscroll函數(shù)
        //抽獎滾動的函數(shù)
        function startscroll() {
            //每次滾動抽獎將所有l(wèi)i的class都設為空
            for(var j = 0; j < li.length; j++) {
                li[j].className = '';
            }
            var prizenum = prize[i%li.length];  //通過i余8得到此刻在prize數(shù)組中的數(shù)字，該數(shù)字就是mask標記出現(xiàn)的位置
            li[prizenum].className = "active";
            i++;
            if(i<rNum-8){  //當i小于轉(rNum-8次)的數(shù)量，t不變還是200毫秒
                timer = setTimeout(startscroll, t);//繼續(xù)執(zhí)行抽獎滾動
            }else if(i>= rNum-8 && i< rNum+num){
                //t時間變長，此時計時器運行速度降低，同時標簽刷新速度也降低
                t+=(i-rNum+8)*5;
                timer = setTimeout(startscroll, t);//繼續(xù)執(zhí)行抽獎滾動
            }
            if( i >= rNum+num){//當i大于轉rNum加隨機數(shù)字num次計時器結束，出現(xiàn)提示框提示中獎信息
                if (num==1) {
                   message.innerHTML="恭喜你中了耳機";
                }else if(num==2){
                   message.innerHTML="恭喜你中了iPad";
                }else if(num==3){
                   message.innerHTML="感謝參與";
                }else if(num==4){
                   message.innerHTML="恭喜你中了洋娃娃";
                }else if(num==5){
                   message.innerHTML="恭喜你中了紅色鞋子";
                }else if(num==6){
                   message.innerHTML="恭喜你中了白色手機";
                }else if(num==7){
                   message.innerHTML="恭喜你中了黑色手機";
                }else if(num==8){
                   message.innerHTML="恭喜你中了藍色鞋子";
                }
                var timer2 = null;
                timer2 = setTimeout(function(){
                    message.style.display="block";//獎品展示的信息為顯示狀態(tài)
                    span.style.background="#ff3a59";
                    clearTimeout(timer2);
                },1000);
                bReady = true;//當計時器結束后讓span標簽變?yōu)槌楠劆顟B(tài)
                clearTimeout(timer);
            }
        }
    }
</script>
</html>

3.代碼分析

prize

var prize = [0,1,2,4,7,6,5,3];//獎品li標簽滾動的順序

數(shù)組prize中的數(shù)字就是li標簽對應的索引值，由于是九宮格抽獎，因此抽獎滾動的順序并不是按li標簽的索引順序，以下是li標簽實際滾動的順序圖分析：

getrandomnum(1,9)

//抽中的獎品 返回1-9的整數(shù)，包含1，不包含9
    function getrandomnum(n, m) {
        return parseInt((m - n) * Math.random() + n);
    }

因為只有8個獎品，所以得到的隨機整數(shù)不包含9

變量 i、rounds、rNum

var i = 0;  //定義一個i 用來計算抽獎跑動的總次數(shù)
    var rounds = 5;  //抽獎轉動的圈數(shù)
    var rNum = rounds*8;  //標記跑動的次數(shù)（這是一個條件判斷分界線）

i 是用來計算li標簽滾動的次數(shù)，滾動一次加1；
rounds 及 rNum 用來讓滾動抽獎變慢及停止的判斷條件；

prizenum

var prizenum = prize[i%li.length];  //通過i余8得到此刻在prize數(shù)組中的數(shù)字，該數(shù)字就是mask標記出現(xiàn)的位置
  li[prizenum].className = "active";

i%li.length 為i除以li標簽長度得到的余數(shù)(始終為0-7范圍的整數(shù))，放進prize數(shù)組中，得到的prizenum數(shù)字就是當前滾動到的li標簽索引值

以上就是JavaScript手寫九宮格抽獎demo的詳細內容，更多關于JavaScript 九宮格抽獎的資料請關注腳本之家其它相關文章！

您可能感興趣的文章:

欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

JavaScript手寫九宮格抽獎demo

目錄

引言

1.預覽效果

2.完整代碼

3.代碼分析

相關文章

最新評論

大家感興趣的內容

最近更新的內容

常用在線小工具