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;
}</pre>
本文由用戶 jopen 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。
轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。
本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！