开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> JavaScript实践——破产版抽奖（吃饭选择器） -> 正文阅读

[JavaScript知识库]JavaScript实践——破产版抽奖（吃饭选择器）

<!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: 0px;
            padding: 0px;
            list-style: none;
        }
        
        div {
            width: 750px;
            height: 480px;
            margin-right: auto;
            margin-left: auto;
            overflow: hidden;
            position: relative;
        }
        
        ul {
            overflow: hidden;
            width: 750px;
            height: 480px;
            position: relative;
        }
        
        li {
            width: 150px;
            height: 120px;
        }
        
        img {
            width: 150px;
            height: 120px;
        }
        
        li:nth-of-type(1),
        li:nth-of-type(2),
        li:nth-of-type(3),
        li:nth-of-type(4),
        li:nth-of-type(5) {
            float: left;
        }
        
        li:nth-of-type(6) {
            float: right;
        }
        
        li:nth-of-type(7) {
            position: absolute;
            top: 240px;
            left: 600px;
            float: right;
        }
        
        li:nth-of-type(8) {
            position: absolute;
            top: 360px;
            left: 600px;
        }
        
        li:nth-of-type(9) {
            position: absolute;
            top: 360px;
            left: 450px;
        }
        
        li:nth-of-type(10) {
            position: absolute;
            top: 360px;
            left: 300px;
        }
        
        li:nth-of-type(11) {
            position: absolute;
            top: 360px;
            left: 150px;
        }
        
        li:nth-of-type(12) {
            position: absolute;
            top: 360px;
            left: 0px;
        }
        
        li:nth-of-type(13) {
            position: absolute;
            top: 240px;
            left: 0px;
        }
        
        li:nth-of-type(14) {
            position: absolute;
            top: 120px;
            left: 0px;
        }
        
        li:nth-of-type(15) {
            position: absolute;
            top: 200px;
            left: 400px;
        }
        
        li:nth-of-type(16) {
            position: absolute;
            top: 200px;
            left: 200px;
        }
        
        .current {
            opacity: 0.4;
            transition: all 1.8;
        }
    </style>
</head>

<body>
    <div>
        <ul id="box">
            <li class="火锅"><img src="01.webp" alt=""></li>
            <li value="烤鸭"><img src="02.webp" alt=""></li>
            <li value="东坡肉"><img src="03.webp" alt=""></li>
            <li value="寿司"><img src="04.webp" alt=""></li>
            <li value="酸菜鱼"><img src="05.webp" alt=""></li>
            <li value="烤串"><img src="06.webp" alt=""></li>
            <li value="炸鸡"><img src="07.webp" alt=""></li>
            <li value="粉面"><img src="08.webp" alt=""></li>
            <li value="蛋糕"><img src="9.webp" alt=""></li>
            <li value="烤肉"><img src="10.webp" alt=""></li>
            <li value="慕斯"><img src="11.webp" alt=""></li>
            <li value="汉堡"><img src="12.webp" alt=""></li>
            <li value="冷串串"><img src="13.webp" alt=""></li>
            <li value="茶点"><img src="14.webp" alt=""></li>
            <li id="start"><img src="15.webp" alt=""></li>

        </ul>
    </div>

    <script>
        var box = document.getElementById('box');
        var tags = document.getElementsByTagName('li');
        var start = document.getElementById('start');
        var num = 0;
        var timer;
        var flag = 0;

        function begin() {
            var round = 14 * 2 + parseInt(Math.random() * 14);
            clearInterval(timer)
            timer = setInterval(function() {
                num++;
                if (num > tags.length - 2) {
                    num = 0;
                }
                for (var i = 0; i < tags.length; i++) {
                    tags[i].setAttribute('class', '')
                }
                flag++;
                console.log(num);
                if (flag > round - 1) {
                    var abc = tags[num].getAttribute("value");
                    alert(abc);
                    clearInterval(timer);
                    flag = 0

                    for (var j = 0; j < 14; j++) {
                        tags[j].setAttribute('class', '')
                    }
                }
                tags[num].setAttribute('class', 'current')
            }, 50);
            return timer;
        }
        start.onclick = function() {
            begin();
        }

        /*start.onclick = function() {
            var timer = begin();
            setTimeout(function() {
                clearInterval(timer);
            }, 500);
        }*/
    </script>
</body>

</html>