jQuery实现号码抽奖
jQuery #抽奖2012-06-29 13:26
以下是相关jquery实现号码抽奖的代码，看看。
<!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=gb2312" />
<meta http-equiv="Content-Language" content="zh-CN"/>
<title>yige.org抽奖</title>
<script type="text/javascript" src="http://yige.org/static/js/j.js"></script>
<style type="text/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:#efe;}
#ResultNum {font-size:50pt;font-family:Verdana}
#Button {margin:50px 0 0 0;}
#Button input {font-size:40px;padding:0 50px;}
</style>
<script type='text/javascript'>
<!--
var g_Interval = 10;
var g_PersonCount = 100;//参加抽奖人数
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();
}
//-->
</script>
</head>
<body>
<h1>抽奖结果</h1>
<div id="Result"> <span id="ResultNum">0</span> </div>
<div id="Button">
<input type='button' value='开始' onclick='beginRndNum(this)'/>
</div>
</body>
</html>效果如下图：
相关文章
- jQuery基础小记录 2012/06/28
- jQuery实现图片等比缩放以及预加载 2012/06/28
- jquery禁用右键/文本选择功能/复制按键 2012/06/19
- jquery中$().hover(func1, funct2)的用法 2012/06/14
- jQuery操作select相关方法 2012/06/13
- jQuery动态添加file的方法 2012/06/13
- jQuery常用函数及功能 2012/06/11
- jQuery操作checkbox相关方法 2012/06/11
- jQuery操作radio相关方法 2012/06/08
- jQuery实现简单的隐藏效果 2012/06/04