抽奖大转盘案例

最新推荐文章于 2024-06-14 00:12:25 发布

李先坤

最新推荐文章于 2024-06-14 00:12:25 发布

阅读量113

点赞数

文章标签： html javascript 前端

本文链接：https://blog.csdn.net/weixin_43391261/article/details/127136710

版权

代码：

<!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;
            list-style: none;
        }

        ul {
            width: 600px;
            margin: 0 auto;
        }

        ul>li {
            float: left;
            width: 150px;
            height: 150px;
            text-align: center;
            line-height: 150px;
            background-color: skyblue;
            margin-top: 10px;
            margin-left: 10px;
            font-size: 20px;
            color: white;
        }

        .ac {
            background-color: gray;
        }
    </style>
</head>

<body>
    <ul>
        <li class="ac">100优惠券</li>
        <li>200优惠券</li>
        <li>300优惠券</li>
        <li>400优惠券</li>
        <li><button>开始</button><button>暂停</button></li>
        <li>600优惠券</li>
        <li>700优惠券</li>
        <li>800优惠券</li>
        <li>900优惠券</li>
    </ul>
</body>

</html>
<script>
    //获取开始和暂停按钮
    var btn = document.getElementsByTagName('button');
    //获取li 
    var li = document.querySelectorAll('li');
    //把所有li 的下标放在数组中
    var arr = [0, 1, 2, 5, 8, 7, 6, 3];
    //定时器
    var timer = null;
    //num 表示arr中的初始下标
    var num = 0;
    //开始
    btn[0].onclick = function () {
        //放置定时器叠加，并清除
        clearInterval(timer);
        timer = setInterval(function () {
            for (var i = 0; i < arr.length; i++) {
                //利用循环将所有li中的类名变为空
                li[arr[i]].className = '';
            }
            //大于7时转完一圈，让他重新从第一个开始
            if (num > 7) {
                num = 0;
            }
            li[arr[num]].className = 'ac';
            num++;
        }, 300);
    }
    //结束
    btn[1].onclick = function () {
        clearInterval(timer);
        alert('恭喜你获得' + li[arr[num]].innerHTML);

    }
</script>