console
var g_Interval = 1;
var g_PersonCount = 500;
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();
}
<div id="Result">
<span id="ResultNum">
0
</span>
</div>
<h1>
抽奖结果
</h1>
<div id="Button">
<input type='button' value='开始' onclick='beginRndNum(this)' />
</div>
body {
background-color: #fff;
text-align: center;
padding-top: 50px;
}
h1 {
background: #fff5ee;
width: 200px;
margin: auto;
border-radius: 25px;
border: 3px solid #f33;
font-size: 26px;
margin-top: -205px;
padding: 7px;
color: #de0202;
}
#Result {
border: 3px solid #ff3333;
margin: 0 auto;
text-align: center;
width: 400px;
padding: 50px 0;
border-radius: 16px;
background: #fff5ee;
}
#ResultNum {
font-size: 50pt;
font-family: Verdana
}
#Button {
margin: 50px 0 0 0;
}
#Button input {
border-radius: 48px;
border: 1px solid #208a33;
background: #40aa53;
padding: 7px 33px;
color: #FFF;
font-size: 28px;
margin-top: 156px;
outline: none;
}