用JavaScript实现一个简单的抽奖系统,有【开始】按钮和【停止】按钮。
<强>功能:
——点开始按钮开始抽奖,随机出现奖品名称,
——点停止按钮即可停止抽奖;
——按下回车键可切换开始抽奖和停止抽奖。
html代码:
创建html结构,最基础的要含有显示的奖品名称和开始,停止按钮。
& lt; !doctype html>
& lt; html>
& lt; head>
& lt; title>抽奖系统& lt;/title>
& lt;元charset=皍tf - 8”比;
& lt;链接类型=" text/css " rel="样式表" href=" https://www.yisu.com/zixun/css/style.css "比;
& lt;脚本type=" text/javascript " src=" https://www.yisu.com/zixun/js/script.js "祝辞& lt;/script>
& lt;/head>
& lt; body>
& lt; div id=氨晏狻眂lass=氨晏狻痹诳汲榻崩? & lt;/div>
& lt; div类=癰tn”比;
& lt;跨度id=巴妗钡脑诳? lt;/span>
& lt;跨度id="停止"祝辞停止& lt;/span>
& lt;/div>
& lt;/body>
& lt;/html>
之前
js主要代码片段:
首先,定义数的数据组,写入各奖品名称。并初始化计时器定时器,和键盘事件状态国旗(一开始状态为0,按下键盘变成1,再按键盘变成0,如此切换)。
var data=https://www.yisu.com/zixun/[“Phone7”、“Ipad”,“三星笔记本”,“佳能相机”、“惠普打印机”,“谢谢参与”、“100元充值卡”,“1000元超市购物券”);
计时器=零,
国旗=0;
之前
定义开始抽奖函数playFun ();
函数playFun () {
var title=. getelementbyid(“标题”);
var玩=. getelementbyid(“玩”);//每次都先清除上一次的定时器任务,避免抽奖效果累加频率会越来越快
clearInterval(计时器);//定时器50毫秒触发一次
计时器=setInterval(函数(){//获取奖品下标随机数
var随机=Math.floor (math . random () * data.length);//显示随机的奖品名称
标题。innerHTML=数据(随机);
},50);//改变将开始按钮背景色
play.style。背景=? 666”;
}
之前
定义停止抽奖函数stopFun ();
函数stopFun () {//清除定时器即可结束抽奖
clearInterval(计时器);
var玩=. getelementbyid(“玩”);//改变将停止按钮背景色
play.style。背景=? 036”;
}
之前
按回车键切换抽奖状态事件;
文档。onkeyup=函数(事件){
事件=事件| | window.event;//回车键键码为13
如果事件。键码==13){//如果状态标志值为0则开始抽奖,并把状态值改为1,否则停止抽奖并把状态值改为0
如果(标志==0){
playFun ();
标志=1;
其他}{
stopFun ();
国旗=0;
}
}
}
之前
js完整代码:
var data=https://www.yisu.com/zixun/[“Phone7”、“Ipad”,“三星笔记本”,“佳能相机”、“惠普打印机”,“谢谢参与”、“100元充值卡”,“1000元超市购物券”),
计时器=null,//定时器
国旗=0;//用于键盘事件状态标记
窗口。onload=function () {
var玩=. getelementbyid(“玩”),
停止=. getelementbyid(“停止”);//开始抽奖
玩了。onclick=playFun;
停止。onclick=stopFun;//键盘事件
文档。onkeyup=函数(事件){
事件=事件| | window.event;
如果事件。键码==13){
如果(标志==0){
playFun ();
标志=1;
其他}{
stopFun ();
国旗=0;
}
}
}
}//开始抽奖
函数playFun () {
var title=. getelementbyid(“标题”);
var玩=. getelementbyid(“玩”);//每次都先清除上一次的定时器任务,避免抽奖效果累加频率会越来越快
clearInterval(计时器);
计时器=setInterval(函数(){
var随机=Math.floor (math . random () * data.length);
标题。innerHTML=数据(随机);
},50);
play.style。背景=? 999”;
}//停止抽奖
函数stopFun () {
clearInterval(计时器);
var玩=. getelementbyid(“玩”);
play.style。背景=? 036”;
}
之前
