HTML + JS随机抽号。

【设置第三次抽取的号码为 (张三6)】
<script language="javascript"> var k = 0 ; function star(){ k++ ; loop() } var t ; var i ; var bs =true ; function loop(){ t = setTimeout( loop , 25 ) //时钟控件 var r = Math.random()*40 i = parseInt( r ) if( bs ){ $( $(".m")[i] ).css( "background-color" , "#ccff00" ) bs = false ; }else { $( $(".m") ).css( "background-color" , "#6666CC" ) bs = true ; } } function stop(){ clearTimeout( t ) if( k==3 ){ $( $(".m") ).css( "background-color" , "#6666CC" ) $( $(".m")[5] ).css( "background-color" , "#ccff00" ) }else{ $( $(".m")[i] ).css( "background-color" , "#ccff00" ) } } </script>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>随机抽号程序</title> <style type="text/css"> <!-- body { background-attachment: scroll; background-image: url(images/sjxh.jpg); background-repeat: no-repeat; background-position: right center; background-color: #333333; } #title { height: 25px; width: 300px; margin-right: auto; margin-left: auto; font-size: 25px; font-weight: bolder; color: #FFFFFF; line-height: 25px; margin-bottom: 50px; margin-top: 20px; } #box { height: 356px; width: 890px; margin-right: auto; margin-left: auto; } #rmd { width: 300px; float: none; clear: left; } #stop { height: 50px; width: 120px; float: left; font-size: 25px; font-weight: bold; color: #FFFFFF; text-align: center; vertical-align: middle; line-height: 50px; } #star { font-size: 25px; line-height: 50px; font-weight: bold; color: #FFFFFF; height: 50px; width: 120px; margin-right: auto; margin-left: 35%; text-align: center; vertical-align: middle; float: left; } #star a { color: #FFFFFF; text-decoration: none; height: 50px; width: 120px; background-color: #33FF00; display: block; } #stop a { color: #FFFFFF; text-decoration: none; background-color: #FF0000; display: block; height: 50px; width: 120px; } .m { font-size: 22px; line-height: 60px; font-weight: bold; color: #FFFFFF; background-color: #6666CC; text-align: center; vertical-align: middle; float: left; height: 60px; width: 100px; margin: 5px; font-family: "微软雅黑"; } body,td,th { font-family: 微软雅黑 Light; font-size: 20px; color: #FFFFFF; font-weight: bold; } --> </style> </head> <script language="javascript" src="js/jquery-1.10.2.min.js"></script> <script language="javascript"> function star(){ loop() } var t ; var i ; var bs =true ; function loop(){ t = setTimeout( loop , 25 ) //时钟控件 var r = Math.random()*40 i = parseInt( r ) if( bs ){ $( $(".m")[i] ).css( "background-color" , "#ccff00" ) bs = false ; }else { $( $(".m") ).css( "background-color" , "#6666CC" ) bs = true ; } } function stop(){ clearTimeout( t ) $( $(".m")[i] ).css( "background-color" , "#ccff00" ) var rm = document.createElement('div'); rm.innerHTML = $( $(".m")[i] ).html(); document.body.appendChild(rm); } </script> <body> <div id="title">网站随机抽号程序</div> <div id="box"> <div class="m">张三1</div> <div class="m">张三2</div> <div class="m">张三3</div> <div class="m">张三4</div> <div class="m">张三5</div> <div class="m">张三6</div> <div class="m">张三7</div> <div class="m">张三8</div> <div class="m">张三9</div> <div class="m">张三10</div> <div class="m">张三11</div> <div class="m">张三12</div> <div class="m">张三13</div> <div class="m">张三14</div> <div class="m">张三15</div> <div class="m">张三16</div> <div class="m">张三17</div> <div class="m">张三18</div> <div class="m">张三19</div> <div class="m">张三20</div> <div class="m">张三21</div> <div class="m">张三22</div> <div class="m">张三23</div> <div class="m">张三24</div> <div class="m">张三25</div> <div class="m">张三26</div> <div class="m">张三27</div> <div class="m">张三28</div> <div class="m">张三29</div> <div class="m">张三30</div> <div class="m">张三31</div> <div class="m">张三32</div> <div class="m">张三33</div> <div class="m">张三34</div> <div class="m">张三35</div> <div class="m">张三36</div> <div class="m">张三37</div> <div class="m">张三38</div> <div class="m">张三39</div> <div class="m">张三40</div> </div> <div id="star"><a href="#" onclick="star()">开始</a></div> <div id="stop"><a href="#" onclick="stop()">停止</a></div> <div id="rmd"></div> </body> </html>
分类:
JavaScript
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· DeepSeek 解答了困扰我五年的技术问题
· 为什么说在企业级应用开发中,后端往往是效率杀手?
· 用 C# 插值字符串处理器写一个 sscanf
· Java 中堆内存和栈内存上的数据分布和特点
· 开发中对象命名的一点思考
· 为什么说在企业级应用开发中,后端往往是效率杀手?
· DeepSeek 解答了困扰我五年的技术问题。时代确实变了!
· 本地部署DeepSeek后,没有好看的交互界面怎么行!
· 趁着过年的时候手搓了一个低代码框架
· 推荐一个DeepSeek 大模型的免费 API 项目!兼容OpenAI接口!