zoukankan      html  css  js  c++  java
  • 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>
  • 相关阅读:
    LeetCode 230. 二叉搜索树中第K小的元素(Kth Smallest Element in a BST)
    LeetCode 216. 组合总和 III(Combination Sum III)
    LeetCode 179. 最大数(Largest Number)
    LeetCode 199. 二叉树的右视图(Binary Tree Right Side View)
    LeetCode 114. 二叉树展开为链表(Flatten Binary Tree to Linked List)
    LeetCode 106. 从中序与后序遍历序列构造二叉树(Construct Binary Tree from Inorder and Postorder Traversal)
    指针变量、普通变量、内存和地址的全面对比
    MiZ702学习笔记8——让MiZ702变身PC的方法
    你可能不知道的,定义,声明,初始化
    原创zynq文章整理(MiZ702教程+例程)
  • 原文地址:https://www.cnblogs.com/wintuzi/p/4953392.html
Copyright © 2011-2022 走看看