1.4 【综合案例1】：随机抽奖小程序
这个抽奖主要是通过在HTML中嵌入JavaScript代码实现随机抽奖，通过单击“开始抽奖”按钮实现开始随机抽奖，按“停止抽奖”实现抽奖结果，显示抽奖结果。通过这个小案例，大家初步认识一下JavaScript脚本在HTML中的应用，其效果如图1-12和图1-13所示。
图1-12 开始抽奖界面
图1-13 停止抽奖界面
实现上述效果用以下代码就可以了，代码就是通过在HTML中嵌入JavaScript代码实现的，可以初步感受一下JavaScript代码。
<script type="text/javascript">
var namelist=[
"1号球","2号球","3号球","4号球","5号球","6号球","7号球","8号球","9号球","10号球"];
var mytime=null;
function doit(){
var bt=window.document.get Element By Id("bt");
if(mytime==null){
bt.inner HTML="停止抽奖";
show();
}else{
bt.inner HTML="开始抽奖";
clear Timeout(mytime);
mytime=null;
}
}
function show(){
var box=window.document.get Element By Id("box");
var num=Math.floor((Math.random()*100000))%namelist.length;
box.inner HTML=namelist[num];
mytime=set Timeout("show()",1);
}
</script>
HTML页面代码如下所示。
<body id="bodybj">
<div id="box">准备好了，开始抽奖了</div>
<div id="bt" on Click="doit()">开始抽奖</div>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'Micro Soft Ya Hei';">
<p>适用浏览器：IE8、360、Fire Fox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. </p>
</div>
</body>