Javascript 随机抽奖

最新推荐文章于 2025-09-10 19:44:49 发布

weixin_33728268

最新推荐文章于 2025-09-10 19:44:49 发布

阅读量120

点赞数

文章标签： javascript ViewUI

本文介绍了一个简单的抽奖程序实现方法，使用JavaScript动态生成抽奖元素，并通过定时器实现抽奖效果。该程序在一个包含40个元素的区域中随机高亮显示，用户可以点击按钮启动或停止抽奖过程。

开始抽奖停止抽奖

Code:

 
   <body> 
       <div style="width:365px;height:180px;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> 
       <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,10) 
           } 
       </script> 
   </body> 
  