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>
原文地址:https://www.cnblogs.com/wintuzi/p/4953392.html