JavaScript实现一个小抽奖程序
jopen
12年前
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; }