原生js实现抽奖效果

最新推荐文章于 2023-09-01 09:00:00 发布

禁花

最新推荐文章于 2023-09-01 09:00:00 发布

阅读量1.8k

点赞数 1

本文链接：https://blog.csdn.net/chenzhuozhu/article/details/80684047

版权

本人为初学者，写的不好的请不要见怪

目的是用节简的代码来实现抽奖效果

下图为基本的布局

通过点击GO按钮可以实现滚动，可连续点击。

以下为代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        #dalor{
            width: 400px;
            height: 400px;
            position: absolute;
            margin-top: -200px;
            margin-left: -200px;
            top: 50%;
            left: 50%;
        }
        #dalor div{
            position: absolute;
            width: 100px;
            height: 100px;
            line-height: 100px;
            text-align: center;
        }
        #dalor_go{
            position: absolute;
            width: 200px;
            height: 200px;
            top: 100px;
            left: 100px;
            line-height: 200px;
            background: red;
            color: white;
            text-align: center;
            border: none;
            cursor: pointer;
        }
        .dalor1{
            top: 0;
            left: 0;
            background: #FF9999;
        }
        .dalor2{
            top: 0;
            left: 100px;
            background: #CDCD66;
        }
        .dalor3{
            top: 0;
            left: 200px;
            background: #FF9999;
        }
        .dalor4{
            top: 0;
            left: 300px;
            background: #CDCD66;
        }
        .dalor5{
            top: 100px;
            left: 300px;
            background: #FF9999;
        }
        .dalor6{
            top: 200px;
            left: 300px;
            background: #CDCD66;
        }
        .dalor7{
            top: 300px;
            left: 300px;
            background: #FF9999;
        }
        .dalor8{
            top: 300px;
            left: 200px;
            background: #CDCD66;
        }
        .dalor9{
            top: 300px;
            left: 100px;
            background: #FF9999;
        }
        .dalor10{
            top: 300px;
            left: 0;
            background: #CDCD66;
        }
        .dalor11{
            top: 200px;
            left: 0;
            background: #FF9999;
        }
        .dalor12{
            top: 100px;
            left: 0;
            background: #CDCD66;
        }
        .blue{
            background: #40FFE5;
        }
    </style>
</head>
<body>
<div id="dalor">
    <input id="dalor_go" type="button" value="go!">
    <div class="dalor1 blue">1</div>
    <div class="dalor2">2</div>
    <div class="dalor3">3</div>
    <div class="dalor4">4</div>
    <div class="dalor5">5</div>
    <div class="dalor6">6</div>
    <div class="dalor7">7</div>s
    <div class="dalor8">8</div>
    <div class="dalor9">9</div>
    <div class="dalor10">10</div>
    <div class="dalor11">11</div>
    <div class="dalor12">12</div>
</div>
<script>
    window.οnlοad=function () {
        var odar=document.getElementById("dalor").getElementsByTagName("div");
        var odarGo=document.getElementById("dalor_go");
        var suzi=0;
        odarGo.addEventListener("click",function () {
            var odartime=Math.ceil(Math.random()*24+24);
            var xunuantimu=setInterval(function () {
                odar[suzi%12].classList.remove("blue");
                odar[(++suzi)%12].classList.add("blue");
                if (suzi%odartime==0){
                   clearInterval(xunuantimu);
                }
            },100);
        });
    }

</script>
</body>
</html>

主要通过suzi来判断整体的运作，通过求余数来实现停止，增加来实现滚动的效果。

禁花

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
1
评论
原生js实现抽奖效果

本人为初学者，写的不好的请不要见怪目的是用节简的代码来实现抽奖效果下图为基本的布局通过点击GO按钮可以实现滚动，可连续点击。以下为代码&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;/title&a
复制链接

扫一扫