JavaScript实现一个小抽奖程序

jopen 8年前

                JavaScript实现一个小抽奖程序

js代码:

var g_Interval = 10;    var g_PersonCount = 10000;//参加抽奖人数    var g_Timer;    var running = false;    function beginRndNum(trigger){     if(running){    running = false;    clearTimeout(g_Timer);         $(trigger).val("开始");    $('#ResultNum').css('color','red');   }   else{    running = true;    $('#ResultNum').css('color','black');       $(trigger).val("停止");    beginTimer();   }    }    function updateRndNum(){   var num = Math.floor(Math.random()*g_PersonCount+1);   $('#ResultNum').html(num);    }    function beginTimer(){   g_Timer = setTimeout(beat, g_Interval);    }    function beat() {   g_Timer = setTimeout(beat, g_Interval);      updateRndNum();    }


HTML代码:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  <html>   <head>    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">    <meta http-equiv="description" content="this is my page">    <meta http-equiv="content-type" content="text/html; charset=gbk">    <title>抽奖</title>    <script type="text/javascript" src="jquery-1.4.4.min.js"></script>   </head>   <body>    <body>     <h1>      抽奖结果     </h1>     <div id="Result">      <span id="ResultNum">0</span>     </div>     <div id="Button">      <input type='button' value='开始' onclick='beginRndNum(this)' />     </div>    </body>   </body>  </html>


CSS代码:

body {   text-align: center;   padding-top: 50px;  }  #Result {   border: 3px solid #40AA53;   margin: 0 auto;   text-align: center;   width: 400px;   padding: 50px 0;   background: yellow;  }  #ResultNum {   font-size: 50pt;   font-family: Verdana  }    #Button {   margin: 50px 0 0 0;  }  #Button input {   font-size: 40px;   padding: 0 50px;  }