Js原生实现抽奖功能

<div>代码

按钮代码

JS原生代码

 

 

 完整的代码:

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

  

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

  

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<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>

本文作者:Mahmud(مەھمۇد)

本文链接:https://www.cnblogs.com/mahmud/p/10085208.html

版权声明:本作品采用知识共享署名-非商业性使用-禁止演绎 2.5 中国大陆许可协议进行许可。

posted @   Mahmud(مەھمۇد)  阅读(279)  评论(1编辑  收藏  举报
编辑推荐:
· 没有源码,如何修改代码逻辑?
· 一个奇形怪状的面试题:Bean中的CHM要不要加volatile?
· [.NET]调用本地 Deepseek 模型
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· .NET Core 托管堆内存泄露/CPU异常的常见思路
阅读排行:
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· 没有源码,如何修改代码逻辑?
· PowerShell开发游戏 · 打蜜蜂
· 在鹅厂做java开发是什么体验
· 凌晨三点救火实录:Java内存泄漏的七个神坑,你至少踩过三个!
点击右上角即可分享
微信分享提示
评论
收藏
关注
推荐
深色
回顶
收起
  1. 1 404 not found REOL
404 not found - REOL
00:00 / 00:00
An audio error has occurred.

Not available