九宫格如何一直转圈

最新推荐文章于 2024-07-25 09:38:53 发布

IKUNzhenin

最新推荐文章于 2024-07-25 09:38:53 发布

阅读量350

点赞数 10

分类专栏： js练手功能 js中的功能的特性文章标签： css 前端 javascript

本文链接：https://blog.csdn.net/IKUNzhenin/article/details/135357356

版权

js中的功能的特性同时被 2 个专栏收录

63 篇文章 0 订阅

订阅专栏

js练手功能

59 篇文章 0 订阅

订阅专栏

当然！这是一个更新的代码版本，其中包含控制旋转并在选定奖品处停止的逻辑。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Lottery Game</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .subimite {
            position: relative;
            width: 500px;
            height: 500px;
            text-align: center;
            right: -100px;
            top: 100px;
            border: 1 solid #000;
        }

        .subimite div {
            width: 25%;
            height: 25%;
            text-align: center;
            position: absolute;
        }

        .div1 {
            width: 30%;
            height: 30%;
            right: 67%;
            top: 0;
            width: 30%;
            position: fixed;
            line-height: 120px;
            background: #55ffff;
        }

        .div2 {
            width: 30%;
            height: 30%;
            right: 34%;
            top: 0%;
            line-height: 120px;
            position: fixed;
            background: #55ffff;
        }

        .div3 {
            width: 30%;
            height: 30%;
            right: 2%;
            top: 0%;
            line-height: 120px;
            position: fixed;
            background: #55ffff;
        }

        .div4 {
            width: 30%;
            height: 30%;
            right: 2%;
            top: 33%;
            position: fixed;
            line-height: 120px;
            background: #55ffff;
        }

        .div5 {
            width: 30%;
            height: 30%;
            right: 2%;
            top: 66%;
            position: fixed;
            line-height: 120px;
            background: #55ffff;
        }

        .div6 {
            width: 30%;
            height: 30%;
            top: 66%;
            right: 34%;
            position: fixed;
            line-height: 120px;
            background: #55ffff;
        }

        .div7 {
            width: 30%;
            height: 30%;
            top: 66%;
            right: 67%;
            position: fixed;
            line-height: 120px;
            background: #55ffff;
        }

        .div8 {
            width: 30%;
            height: 30%;
            top: 33%;
            right: 67%;
            position: fixed;
            line-height: 120px;
            background: #55ffff;
        }

        .price {
            width: 25%;
            height: 25%;
            top: 33%;
            right: 34%;
            position: absolute;
            line-height: 120px;
            background: #ffff00;
        }
    </style>
</head>
<body>
    <div class="subimite">
        <div class="div1">口红</div>
        <div class="div2">耳机</div>
        <div class="div3">衣服</div>
        <div class="div4">荣耀p60</div>
        <div class="div5">键盘</div>
        <div class="div6">鼠标</div>
        <div class="div7">鼠标垫</div>
        <div class="div8">围巾</div>
        <button class="price" id="price">抽奖</button>
    </div>

    <script>
        let price = document.getElementById('price');
        let subimite = document.querySelector('.subimite');
        let prizes = Array.from(subimite.getElementsByTagName('div'));
      
        price.onclick = function() {
            let random = Math.floor(Math.random() * prizes.length);
            let current = 0;
            let speed = 100;
            let rotations = 2;
            let interval;

            clearInterval(interval);

            interval = setInterval(function() {
                prizes[current].style.backgroundColor = '#55ffff';
                current = (current + 1) % prizes.length;
                prizes[current].style.backgroundColor = '#ffff00';

                if (rotations === 0 && current === random) {
                    clearInterval(interval);
                    setTimeout(function() {
                        alert('Congratulations! You won ' + prizes[random].textContent + '!');
                    }, 500);
                }

                if (current === 0) {
                    rotations--;
                    if (rotations === 0) {
                        speed += 100;
                    }
                }
            }, speed);
        };
    </script>
</body>
</html>

使用Array.from()将奖品的HTMLCollection转换为数组。这样我们就可以使用数组方法轻松访问和操作奖品。添加了一个current变量来跟踪奖品的当前位置。添加了一个speed变量来控制旋转速度。初始速度设置为100毫秒。添加了一个rotations变量来跟踪旋转次数。初始值设置为2，意味着在停止选择的奖品之前，奖品会旋转两次。添加了一个interval变量来保存对setInterval函数的引用。在开始新一轮旋转之前清除间隔，以防止同时发生多个旋转。添加逻辑来增加当前位置、更新奖品的背景颜色，并检查是否达到选择的奖品。
如果达到选择的奖品，则清除间隔，并在稍后显示带有该奖项名称的警报消息。
通过这些更改，代码应该按预期工作。
当点击“抽奖”按钮时，奖项将开始旋转，在两次旋转后，选定的奖项将显示在警报消息中

IKUNzhenin

关注

10
点赞
踩
9

收藏

觉得还不错? 一键收藏
0
评论
九宫格如何一直转圈

添加了一个current变量来跟踪奖品的当前位置。添加了一个speed变量来控制旋转速度。初始值设置为2，意味着在停止选择的奖品之前，奖品会旋转两次。在开始新一轮旋转之前清除间隔，以防止同时发生多个旋转。添加逻辑来增加当前位置、更新奖品的背景颜色，并检查是否达到选择的奖品。当点击“抽奖”按钮时，奖项将开始旋转，在两次旋转后，选定的奖项将显示在警报消息中。这是一个更新的代码版本，其中包含控制旋转并在选定奖品处停止的逻辑。如果达到选择的奖品，则清除间隔，并在稍后显示带有该奖项名称的警报消息。
复制链接

扫一扫

专栏目录