JavaScript实践——破产版抽奖（吃饭选择器）

最新推荐文章于 2024-04-07 22:10:16 发布

pzh1109

最新推荐文章于 2024-04-07 22:10:16 发布

阅读量482

点赞数

分类专栏：学习文章标签： javascript css html

本文链接：https://blog.csdn.net/weixin_48619092/article/details/120922710

版权

学习专栏收录该内容

34 篇文章 0 订阅

订阅专栏

<!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>

这是给广大每天遇到吃什么困难症的朋友们设置的简易吃饭选择工具

pzh1109

关注

0
点赞
踩
8

收藏

觉得还不错? 一键收藏
打赏
0
评论
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>D.
复制链接

扫一扫