本文实例为大家分享了js实现抽奖系统功能的具体代码,供大家参考,具体内容如下
要求实现功能:
1。点击左侧按键,开始抽奖,点击右侧按键,停止抽奖;
2。敲击回车键,开始抽奖,再次敲击回车键,停止抽奖;
3。开始抽奖后,左侧按钮变色;
html:
& lt; !DOCTYPE html>
& lt; html lang=癳n”比;
& lt; head>
& lt;元charset=皍tf - 8”比;
& lt; title>抽奖& lt;/title>
& lt;链接rel="样式表" href=" https://www.yisu.com/zixun/style.css "比;
& lt;脚本src=" https://www.yisu.com/zixun/eventUtil.js "祝辞& lt;/script>
& lt;脚本src=" https://www.yisu.com/zixun/js.js "祝辞& lt;/script>
& lt;/head>
& lt; body>
& lt; div类="盒子"比;
& lt; div id=巴贰痹诳汲榻崩? & lt;/div>
& lt; div id=癰tn”比;
& lt;跨度id="开始"祝辞开始& lt;/span>
& lt;跨度id="停止"祝辞结束& lt;/span>
& lt;/div>
& lt;/div>
& lt;/body>
& lt;/html>
之前
css:
身体{
保证金:0;
填充:0;
}
.box {
宽度:400 px;
身高:200 px;
边界:1 px固体# 0 c4e7c;
保证金:0汽车;
}
#标题{
颜色:darkred;
字体大小:24 px;
text-align:中心;
宽度:400 px;
高度:60 px;
行高:60 px;
}
# btn {
宽度:200 px;
溢出:隐藏;
保证金:30 px汽车0;
}
# btn跨度{
光标:指针;
边界:2 px固体# a09a09;
border - radius: 7 px;
margin-right: 10 px;
颜色:# 000;
显示:inline-block;
高度:40像素;
宽度:80 px;
background - color: # f2ec55;
行高:40像素;
text-align:中心;
}
之前
JavaScript:
js.js:
var日期=["谢谢参与“,”谢谢参与“,”谢谢参与“,”50元话费”,“ipad”,“佳能相机”、“苹果手机”,“3 ds”,“开关”,“1000元超市购物卡”);
var计时器=零;
var国旗=0;
窗口。onload=function () {//var头=. getelementbyid(“标题”);优化前
var开始=. getelementbyid(“开始”);
var停止=. getelementbyid(“停止”);//鼠标抽奖
eventUtil。addHandler(启动、“点击”getStart);
eventUtil。addHandler(停止、“点击”getStop);//键盘抽奖;
文档。onkeyup=函数(事件){
var e=事件| | window.event;//检测按键键值;//console.log (e.keyCode);
如果(e。键码===13){
如果(标志===0){
getStart ();
标志=1;
其他}{
getStop ();
国旗=0;
}
}
}；
函数getStart () {
clearInterval(计时器);
var头=. getelementbyid(“标题”);//优化后
计时器=setInterval(函数(){//代码优化前//var x=方法(math . random () * 10);
var随机=Math.floor (math . random () * date.length);
头。innerHTML=日期(随机);
},50);
start.style。写成backgroundColor=" # 999”;
标志=1;
}
函数getStop () {
clearInterval(计时器);
start.style。写成backgroundColor=" # f2ec55”;
国旗=0;
}
}；
之前
eventUtil。js
var eventUtil={
getEvent:函数(事件){
返回事件# 63;事件:window.event;
}，
方法:函数(事件){
返回event.type;
}，
getTarget:函数(事件){
返回event.target | | event.srcElement;
}，//阻止冒泡
stopPropagation:函数(事件){
如果(event.stopPropagation) {
event.stopPropagation ();
其他}{
event.cancelBubble=true;
}
}，//阻止事件默认行为;
preventDefault:函数(事件){
如果(event.preventDefault) {
事件。防止发生（）：
其他}{
事件。returnValue=https://www.yisu.com/zixun/false;
}
}，//添加具柄;
addHandler:函数(元素、类型、处理程序){
如果(元素。{
元素。addEventListener(类型、处理程序、错误);
}else if (element.attachEvent) {
元素。attachEvent (“on”+类型,处理程序);
其他}{
元素[“on”+类型]=处理程序;
}
}，//删除具柄;
removeHandler:函数(元素、类型、处理程序){
如果(element.removeEventListener) {
元素。removeEventListener(类型、处理程序、错误);
}else if (element.detachEvent) {
element.detachEvent (“on”+类型,处理程序);
其他}{
元素[“on”+类型]=零;
}
}
