抽獎

廢話不多說，直接上代碼：

（原始碼如下，大家可以自己copy一份試試哦！具體操作：先在本地新建一個.txt檔案，然后copy下面代碼，最后將檔案后綴名改為.html，雙擊即可！！！【代碼能給的注釋我都給啦，不信你還看不明白！】）

溫馨小提示——可以通過更改45~53行div標簽的文本內容來更改獎項哦！

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>抽獎</title>
    <style>
        .box{
            width: 606px;
            height: 606px;
            border: 1px solid #dfff4a;
            margin: 100px auto;
        }
        .option{
            width: 200px;
            height: 200px;
            border: 1px solid #dfff4a;
            background-color: green;
            font-size: 15px;
            color: white;
            text-align: center;
            line-height: 200px;
            float: left;
        }
        /*設定影片，以實作旋轉
        第一個引數是變化的屬性，all是整個盒子都進行影片；
        第二個引數0.5s是影片執行的時間;
        第三個引數是影片的方式：linear(勻速),ease-in由慢到快,ease-out由快到慢，ease-in-out慢到快到慢
        第四個引數是影片延時多久再執行
        */
        .box .five{
            transition: all 0.5s ease-in-out 0s;
        }
        .box .five:hover{
            cursor: pointer;
            font-size: 35px;
            color: #494aff;
            background-color: white;
            /*放大倍數，轉換的角度*/
            transform: scale(1.2) rotate(360deg);
        }
    </style>
</head>
<body>
<div class="box">
    <div class="option">python編程從入門到跑路</div>
    <div class="option">c編程從入門到跑路</div>
    <div class="option">java編程從入門到跑路</div>
    <div class="option">cpython編程從入門到跑路</div>
    <div class="option five">點擊抽獎</div>
    <div class="option">go編程從入門到跑路</div>
    <div class="option">匯編從入門到跑路</div>
    <div class="option">php編程從入門到跑路</div>
    <div class="option">BASIC編程從入門到跑路</div>
</div>
<script>
    // 獲取元素
    var options = document.getElementsByClassName("option");
    var button = document.getElementsByClassName("five")[0];
    // 所有獎項下標的值
    var arr = [0,1,2,5,8,7,6,3];
    // 陣列的下標的初始值
    var num = 0;
    // 轉動的次數
    var count = 0;
    button.addEventListener("click",function () {
        // 獲取的亂數   轉動的次數
        var time = Math.ceil(Math.random()*16+16);
        // 定時器來抽獎
        var timer = setInterval(function () {
            // 遍歷arr陣列      目的：如果不設定這個回圈，那么一次走過的獎項都會變色，變不回原來的顏色
            for(var i=0;i<arr.length;i++){
                options[arr[i]].style.backgroundColor = "green";
            }
            // 走到的獎項
            options[arr[num]].style.backgroundColor = "red";
            num++;
            // 如果上面陣列的下標值為8時，要重新賦值為0
            if(num == 8){
                num = 0;
            }
            // 走的div的個數
            count++;
            // 如果轉動的次數與獲取的亂數一致的情況下，清除定時器
            if(count==time){
                clearInterval(timer);
                // 轉動的次數清零
                count = 0;
            }
        },100)
    })
</script>
</body>
</html>

轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/289400.html

標籤：其他

上一篇：趙神牛的游戲

下一篇：猜數字游戲——純前端實作（純小白也能看懂&CV直接拿走直接玩）

抽獎小游戲——純前端實作（純小白也能看懂&CV直接拿走直接玩）

廢話不多說，直接上代碼：