JS手机号后四位随机号码摇奖

最新推荐文章于 2022-10-10 21:25:09 发布

朱记晗.

最新推荐文章于 2022-10-10 21:25:09 发布

阅读量572

点赞数

CC 4.0 BY-SA版权

文章标签： js html css

本文链接：https://blog.youkuaiyun.com/Z15090488131/article/details/106804920

该博客介绍了如何使用JavaScript实现一个手机号后四位随机摇奖的功能，包括CSS样式设计和HTML结构布局。JS代码部分涉及随机数生成，结合body部分的代码，最终展示了一个完整的摇奖效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

css样式：

<style type="text/css">
        .in
        {
            border: solid;
            color: ##0000FF;
            width: 50px;
            height: 50px;
            font-size: 40px;
            text-align: center;
        }
        .btn
        {
            width: 100px;
            height: 60px;
            font-size: 30px;
        }
    </style>

JS代码部分：

 <script type="text/javascript">
        var timer;
        function startDo() {
            clearTimeout(timer); //关闭定时器
            for (var i = 0; i < 4; i++) {
                var rand = Math.random() * 10;
                rand = parseInt(rand % 10);
                document.form1.n[i].value = rand;
            }
            timer = setTimeout("startDo()", 100); //打开定时器
        }
        function stopDo() {
            clearTimeout(timer);
        }
    </script>

bady部分代码：

 <form name="form1">
    <input name="n11" type="text" value="1" class="in" />
    &nbsp;
    <input name="n22" type="text" value="8" class="in" />
    &nbsp;
    <input name="n33" type="text" value="8" class="in" />
    &nbsp;
    <input name="n44" type="text" value="8" class="in" />
    &nbsp;
    <input name="n55" type="text" value="8" class="in" />
    &nbsp;
    <input name="n66" type="text" value="8" class="in" />
    &nbsp;
    <input name="n77" type="text" value="8" class="in" />
    &nbsp;
    <input name="n" type="text"  class="in" />
    &nbsp;
    <input name="n" type="text" class="in" />
    &nbsp;
    <input name="n" type="text" class="in" />
    &nbsp;
    <input name="n" type="text" class="in" />
    <br />
    <br />
    <br />
    <br />
    <br />
    <input type="button" value="开始" onClick="startDo()" class="btn">
    &nbsp; &nbsp; &nbsp;
    <input type="button" value="停止" onClick="stopDo()" class="btn">
    </form>

最终效果图：