js实现抽奖系统功能代码分享

来源：宝玛科技网

本文主要和大家详细介绍了一个关于抽奖系统的题目之js抽奖系统功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能帮助大家运用js开发一个抽系统。

要求实现功能：

1.点击左侧按键，开始抽奖，点击右侧按键，停止抽奖；

2.敲击回车键，开始抽奖，再次敲击回车键，停止抽奖；

3.开始抽奖后，左侧按钮变色；

html：

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>抽奖</title>
 <link rel="stylesheet" href="style.css">
 <script src="eventUtil.js"></script>
 <script src="js.js"></script>
</head>
<body>
<p class="box">
 <p id="header">开始抽奖啦！</p>
 <p id="btn">
 <span id="start">开始</span>
 <span id="stop">结束</span>
 </p>
</p>
</body>
</html>

css:

body{
 margin: 0;
 padding: 0;
}
.box{
 width: 400px;
 height: 200px;
 border: 1px solid #0C4E7C;
 margin: 0 auto;
}
#header{
 color:darkred;
 font-size: 24px;
 text-align: center;
 width: 400px;
 height: 60px;
 line-height: 60px;
}
#btn{
 width: 200px;
 overflow: hidden;
 margin: 30px auto 0;
}
#btn span{
 cursor: pointer;
 border: 2px solid #a09a09;
 border-radius: 7px;
 margin-right: 10px;
 color: #000;
 display: inline-block;
 height: 40px;
 width: 80px;
 background-color: #f2ec55;
 line-height: 40px;
 text-align: center;
}

JavaScript:

eventUtil.js

显示全文

全部频道

js实现抽奖系统功能代码分享