随机倒计时抽奖

最新推荐文章于 2022-11-16 17:08:22 发布
别动我代码儿
最新推荐文章于 2022-11-16 17:08:22 发布
阅读量892
点赞数
分类专栏： Demo
本文链接：https://blog.csdn.net/weixin_45176415/article/details/104854664
版权
Demo 专栏收录该内容
15 篇文章 0 订阅
订阅专栏
<!DOCTYPE html>
<html lang="en">

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

        ul {
            margin: 0;
            padding: 0;
        }

        li {
            list-style: none;
            padding-bottom: 40px;
            overflow: hidden;
            box-sizing: border-box;
        }

        .lis {
            display: block;
            width: 115px;
            height: 52px;
            background-color: #99ceff;
            float: left;
            margin-right: 40px;
            text-align: center;
            color: #0c3d67;
            line-height: 52px;
        }

        .list_box {
            width: 1200px;
            margin: 100px auto;
        }

        .list_box li span:last-child {
            /* border: solid red 1px; */
            margin-right: 0;
        }

        .bg1 {
            background-color: #994bff;
            color: #fff;
        }

        .bg2 {
            background-color: #ff4b8b;
            color: #fff;
        }

        .bg3 {
            background-color: #8b0685;
            color: #fff;
        }


        #oneBtn {
            width: 200px;
            height: 56px;
            background: #51aded;
            border: none;
            font-size: 20px;
            color: #fff;
            border-radius: 8px;
        }

        #threeBtn {
            width: 200px;
            height: 56px;
            background: #ff4b8b;
            border: none;
            font-size: 20px;
            color: #fff;
            border-radius: 8px;
        }

        #fivBtn {
            width: 200px;
            height: 56px;
            background: #8b0685;
            border: none;
            font-size: 20px;
            color: #fff;
            border-radius: 8px;
        }

        .btn {
            margin-bottom: 40px;
            text-align: center;
        }

        .title h1 {
            margin-bottom: 100px;
            text-align: center;
        }
    </style>
</head>

<body>
    <div class="list_box" id="box">
        <div class="title">
            <h1>下面的人中谁最帅</h1>
        </div>
        <div class="btn">
            <input type="button" value="单个点名" id="oneBtn">
            <input type="button" value="3个点名" id="threeBtn">
            <input type="button" value="5个点名" id="fivBtn">
        </div>
        <ul id="ulLis">
            <li>
                <span class="lis">德玛西亚</span>
                <span class="lis">德玛西亚</span>
                <span class="lis">德玛西亚</span>
                <span class="lis">德玛西亚</span>
                <span class="lis">德玛西亚</span>
                <span class="lis">德玛西亚</span>
                <span class="lis">德玛西亚</span>
                <span class="lis">德玛西亚</span>
            </li>
            <li>
                <span class="lis">诺克萨斯</span>
                <span class="lis">诺克萨斯</span>
                <span class="lis">诺克萨斯</span>
                <span class="lis">诺克萨斯</span>
                <span class="lis">诺克萨斯</span>
                <span class="lis">诺克萨斯</span>
                <span class="lis">诺克萨斯</span>
                <span class="lis">诺克萨斯</span>
            </li>
            <li>
                <span class="lis">黑色玫瑰</span>
                <span class="lis">黑色玫瑰</span>
                <span class="lis">黑色玫瑰</span>
                <span class="lis">黑色玫瑰</span>
                <span class="lis">黑色玫瑰</span>
                <span class="lis">黑色玫瑰</span>
                <span class="lis">黑色玫瑰</span>
                <span class="lis">黑色玫瑰</span>
            </li>
            <li>
                <span class="lis">裁决之地</span>
                <span class="lis">裁决之地</span>
                <span class="lis">裁决之地</span>
                <span class="lis">裁决之地</span>
                <span class="lis">裁决之地</span>
                <span class="lis">裁决之地</span>
                <span class="lis">裁决之地</span>
                <span class="lis">裁决之地</span>
            </li>
        </ul>
        <div class="gettime">
            <span style="font-size: 24px">倒计时</span>
            <span id="djs" style="color: red">5</span>
            <span>s</span>
        </div>
    </div>

    <script>
        var box = document.getElementById('box'); //获取最大的盒子
        var ulLis = document.getElementById('ulLis'); //获取ul标签
        var spans = ulLis.querySelectorAll('span') //获取每个姓名元素
        var oneBtn = document.getElementById('oneBtn') //获取一个按钮
        var threeBtn = document.getElementById('threeBtn') //获取三个按钮
        var fivBtn = document.getElementById('fivBtn') //获取五个按钮
        var djs = document.getElementById('djs');
        var init;
        var timer;
        var count = 5;
        var count = djs.innerText; //获取倒计时的数字

        // 获取随机数
        function random(num) {
            var arr = [];
            while (arr.length < num) {
                var flag = true;
                var ran = Math.floor(Math.random() * 31);
                for (var i = 0; i < arr.length; i++) {
                    if (ran == arr[i]) {
                        flag = false;
                    }
                }
                if (flag) {
                    arr.push(ran)
                }
            };
            return arr;
            // console.log(arr)
        }

        

        count = 5;

        oneBtn.onclick = function () {
            // count = 5;

            djs.innerText = count;

            clearInterval(timer)
            one()
        }

        threeBtn.onclick = function () {
            // count = 5;

            djs.innerText = count;

            clearInterval(timer)

            two()
        }

        fivBtn.onclick = function () {
            // count = 5;

            djs.innerText = count;

            clearInterval(timer)

            three()
        }

        function f2() {
            var arr = random(3);
            var id1 = 'sj_' + arr[0];

            var spans1 = document.getElementById(id1);
            spans1.classList.add('bg1')
        }

        function f3() {
            var arr = random(3);
            var id1 = 'sj_' + arr[0];
            var id2 = 'sj_' + arr[1];
            var id3 = 'sj_' + arr[2];

            var spans1 = document.getElementById(id1);
            var spans2 = document.getElementById(id2);
            var spans3 = document.getElementById(id3);
            spans1.classList.add('bg2')
            spans2.classList.add('bg2')
            spans3.classList.add('bg2')
        }

        function f4() {
            var arr = random(5);
            var id1 = 'sj_' + arr[0];
            var id2 = 'sj_' + arr[1];
            var id3 = 'sj_' + arr[2];
            var id4 = 'sj_' + arr[3];
            var id5 = 'sj_' + arr[4];

            var spans1 = document.getElementById(id1);
            var spans2 = document.getElementById(id2);
            var spans3 = document.getElementById(id3);
            var spans4 = document.getElementById(id4);
            var spans5 = document.getElementById(id5);

            spans1.classList.add('bg3')
            spans2.classList.add('bg3')
            spans3.classList.add('bg3')
            spans4.classList.add('bg3')
            spans5.classList.add('bg3')
        }



        // 给所有的span移除bg样式
        function f1() {
            for (var i = 0; i < spans.length; i++) {
                spans[i].setAttribute('id', 'sj_' + i);
                spans[i].classList.remove('bg1');
                spans[i].classList.remove('bg2');
                spans[i].classList.remove('bg3');
            }
        }

        function one() {
            
            console.log('ss')
            timer = setInterval(function () {
                f1();
                f2();
            }, 200)
            times();
        }

        function two() {
            timer = setInterval(function () {
                f1();
                f3();
            }, 200)
            times();
        }

        function three() {
            // clearInterval(timer)
            timer = setInterval(function () {
                f1();
                f4();
            }, 100)
            times();
        }

        function times() {
            clearInterval(init)
            init = setInterval(function () {
                count--;
                djs.innerText = count;
                if (count == 0) {
                    clearInterval(timer);
                    clearInterval(init);
                    count = 5;
                }
            }, 1000)
        }
        
    </script>
</body>

</html>