Js原生实现抽奖功能

<div>代码

按钮代码

JS原生代码

 完整的代码:

 <div style="365px;height:300px;border:2px solid green" id="names">
            <script>
                for (var i = 1; i <= 40; i++) {
                    document.write(
                        '<div style="45px;height:35px;background:#ccc;float:left;border:2px solid white;text-align:center;padding-top:7px;">' +
                        i + '</div>')
                }
            </script>
        </div>

  

<a href="javascript:oaction()" style="margin:5px;">开始抽奖</a>
        <a href="javascript:clearInterval(sh)" style="margin:5px;">停止抽奖</a>

  

<script>
            var names = document.getElementById("names").getElementsByTagName("div");
            var length = names.length;
            var oldNum = 0;
            var sh;

            function run() {
                var num = Math.floor((Math.random() * 40));
                names[oldNum].style.background = "#ccc";
                oldNum = num;
                names[num].style.background = "green";
            }

            function oaction() {
                sh = setInterval(run, 30)
            }
        </script>

  

<a href="javascript:oaction()" style="margin:5px;">开始抽奖</a>
<a href="javascript:clearInterval(sh)" style="margin:5px;">停止抽奖</a>

-------------------------------------------

个性签名:独学而无友,则孤陋而寡闻。做一个灵魂有趣的人!

如果觉得这篇文章对你有小小的帮助的话,记得在右下角点个“推荐”哦,博主在此感谢!

万水千山总是情,打赏一分行不行,所以如果你心情还比较高兴,也是可以扫码打赏博主,哈哈哈(っ•̀ω•́)っ✎⁾⁾!

原文地址:https://www.cnblogs.com/mahmud/p/10085208.html