原生js手撕实现超级抽奖大转盘

最新推荐文章于 2025-04-15 09:55:22 发布
打码中...
最新推荐文章于 2025-04-15 09:55:22 发布
阅读量345
点赞数 1
分类专栏： js 文章标签： javascript 前端 css
本文链接：https://blog.csdn.net/m0_52669454/article/details/126909103
版权
js 专栏收录该内容
45 篇文章
订阅专栏
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        ul {
            width: 650px;
            height: 650px;
            margin: auto;
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            justify-content: space-between;
            text-align: center;

        }

        ul li {
            list-style: none;
            width: 200px;
            height: 200px;
            background-color: aqua;
            box-sizing: border-box;
            border: 1px solid blue;

        }

        span {
            line-height: 200px;
        }

        .start {
            display: inline-block;
            width: 100px;
            height: 100px;
            border-radius: 50%;
            background-color: aquamarine;
            border: 2px solid brown;


        }

        ul li:nth-child(5) {
            display: flex;
            align-items: center;
            justify-content: center;

        }

       

        .shade {
            width: 100%;
            height: 100%;
            background-color: rgb(180, 180, 188, 0.5);
            z-index: 1;
            position: absolute;
            top: 0;
            display: none;

        }

        .show {
            width: 300px;
            height: 400px;
            position: absolute;
            margin: auto;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
           

        }

        .showreward {
            width: 300px;
            height: 300px;
            text-align: center;
            line-height: 300px;
            background-color: rgb(201, 201, 232,1);
        
            transform: scale(0);
            opacity: 0.3;
            transition: 3s;
          
        }

        .calcel {
            width: 100px;
            height: 50px;
            text-align: center;
            line-height: 50px;
            margin: 50px 100px 0 100px;
        }
    </style>
</head>

<body>
    <ul>
        <li name="reward"><span>100</span></li>
        <li name="reward"><span>200</span></li>
        <li name="reward"><span>400</span></li>
        <li name="reward"><span>500</span></li>
        <li><button class="start">开始</button> </li>
        <li name="reward"><span>600</span></li>
        <li name="reward"><span>700</span></li>
        <li name="reward"><span>800</span></li>
        <li name="reward"><span>900</span></li>
    </ul>
    <div class="shade">
        <div class="show">

            <div class="showreward">
            </div>
            <button class="calcel">取消</button>
        </div>


    </div>

    <script>
        let li = document.getElementsByName("reward")
        let shade = document.querySelector(".shade")
        let showreward = document.querySelector(".showreward")
        let button = document.querySelector(".start")
        let calcel = document.querySelector(".calcel")
        
        let already = false  //定义抽奖中的状态
        let order = [0, 1, 2, 4, 7, 6, 5, 3] //定义滚动顺序
        let curindex = 0
       



        button.onclick = function () {
            if (already) return
            already = true
            let num = Math.floor(Math.random() * 16 + 20) //[20,36)
            let fast = Math.floor(num / 3 * 2)  //快转
            let slow = Math.floor(num / 3 * 1)  //慢转
            console.log(slow);
            var fasttimer = setInterval(() => {

                li[order[curindex]].style.backgroundColor = ""
                if (curindex + 1 > 7) {
                    curindex = -1
                }

                li[order[curindex + 1]].style.backgroundColor = "rgb(144, 127, 226)"
                curindex = curindex + 1


            }, 100);

            var cleanfast = setTimeout(() => {
                clearInterval(fasttimer)
                clearTimeout(cleanfast)   //自身定时器内部清理自己，且定时器内部的也都会继续执行一次，因为虽然删除语句在前面，但是这个函数内部所有执行语句都已经被初始化了
                var slowtimer = setInterval(() => {  //慢转要在快转完全结束后，所以慢转要在清理快转的定时器里

                    li[order[curindex]].style.backgroundColor = ""
                    if (curindex + 1 > 7) {
                        curindex = -1
                    }
                    li[order[curindex + 1]].style.backgroundColor = "rgb(144, 127, 226)"
                    curindex = curindex + 1


                }, 300);

                var cleanslow = setTimeout(() => {
                    clearInterval(slowtimer)
                    clearTimeout(cleanslow) 
                    already = false
                    let rewardcon = li[order[curindex]].childNodes[0].textContent
                    showreward.innerHTML = rewardcon
                    shade.style.display = "block"

                    setTimeout(() => {  //定时器作用是将opacity和transform的操作推迟到下一个tick中处理，从而与display的操作分隔开，否则动画效果会失效
                     
                        showreward.style.opacity= "1";
                        showreward.style.transform= 'scale(1)';
                     
                        
                    }, 1); //要大于0



                }, slow * 300);
            }, fast * 100);



        }


        calcel.onclick = function () {
            shade.style.display = "none"  //由于display对transition的破坏作用，所以动画效果会自动消失，想让transition为0，则也不用再加定时器分隔开
            showreward.style.opacity= "0.3";
            showreward.style.transform= 'scale(0)';
        }


    </script>
</body>

</html>