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

该博客介绍了如何使用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>

最终效果图:

1
后四位是随机号码位置

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值