zoukankan      html  css  js  c++  java
  • 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>

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

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

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

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

  • 相关阅读:
    web性能优化
    9.1_the end
    8.28_the end
    1.获取元素绝对位置
    8.14_end
    JavaScript 函数用途
    JavaScirpt事件处理
    《JavaScript语言精粹》读书笔记
    《图解http协议》之HTTPs学习笔记
    Laya 1.x 按文件夹TS代码合并
  • 原文地址:https://www.cnblogs.com/mahmud/p/10085208.html
Copyright © 2011-2022 走看看