html5与JavaScript脚本的六位彩票随机数字算法

最新推荐文章于 2023-08-11 10:55:58 发布

原创最新推荐文章于 2023-08-11 10:55:58 发布 · 3.9k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#Tag #html #JavaScript #CSS

html 专栏收录该内容

2 篇文章

订阅专栏

本文展示了一个HTML5页面，利用JavaScript脚本实现了一个六位随机彩票号码生成器。当点击“开始”按钮时，六个输入框会每100毫秒更新一次，生成0到9之间的随机数字，模拟彩票抽号效果。点击“停止”按钮则会停止号码的更新。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>抽奖</title>
    <style>
        input{
            width: 20px;
            height: 20px;
        }
        [type="button"]{
            width: 40px;
            height: 20px;
        }
    </style>
    <script>
        var showNum;
        window.onload=function(){
            document.getElementById("start").onclick=function(){
                showNum=setInterval(randomNum,100);
                document.getElementById("stop").disabled=false;
                this.disabled=true;
            }
            document.getElementById("stop").onclick=function(){
                document.getElementById("start").disabled=false;
                this.disabled=true;
                window.clearInterval(showNum);
            }
        }
         var randomNum=function(){
            var result=document.getElementsByName("num");
            for(var i=0;i<result.length;i++){
                result[i].value=Math.floor(Math.random()*10);
            }
        }
    </script>
</head>
<body>
    <input type="text" name="num" value=""/>
    <input type="text" name="num" value=""/>
    <input type="text" name="num" value=""/>
    <input type="text" name="num" value=""/>
    <input type="text" name="num" value=""/>
    <input type="text" name="num" value=""/>
    <input type="button" value="开始" id="start"/>
    <input type="button" value="停止" id="stop" disabled="disabled"/>
</body>
</html>