JavaScript实现抽奖系统实例分享

来源：懂视网责编：小OO 时间：2020-11-27 20:05:46

JavaScript实现抽奖系统实例分享

用JavaScript实现一个简单的抽奖系统，有【开始】按钮和【停止】按钮。功能。- 点开始按钮开始抽奖，随机出现奖品名称。- 点停止按钮即可停止抽奖。- 按下回车键可切换开始抽奖和停止抽奖。效果；html代码。创建html结构，最基础的要含有显示的奖品名称和开始、停止按钮。

推荐度：

点击下载本文 文档为doc格式

导读用JavaScript实现一个简单的抽奖系统，有【开始】按钮和【停止】按钮。功能。- 点开始按钮开始抽奖，随机出现奖品名称。- 点停止按钮即可停止抽奖。- 按下回车键可切换开始抽奖和停止抽奖。效果；html代码。创建html结构，最基础的要含有显示的奖品名称和开始、停止按钮。

本文主要为大家详细介绍了基于JavaScript实现抽奖系统，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能帮助到大家。

用JavaScript实现一个简单的抽奖系统，有【开始】按钮和【停止】按钮。

功能：

- 点开始按钮开始抽奖，随机出现奖品名称；
- 点停止按钮即可停止抽奖；
- 按下回车键可切换开始抽奖和停止抽奖。

效果

html代码：

创建html结构，最基础的要含有显示的奖品名称和开始、停止按钮。

<!doctype html>
<html>

<head>
 <title>抽奖系统</title>
 <meta charset="utf-8">
 <link type="text/css" rel="stylesheet" href="css/style.css">
 <script type="text/javascript" src="js/script.js"></script>
</head>

<body>
 <p id="title" class="title">开始抽奖啦！</p>
 <p class="btns">
 <span id="play">开 始</span>
 <span id="stop">停 止</span>
 </p>
</body>

</html>

js主要代码片段：

首先，定义data数组，写入各奖品名称。并初始化timer定时器，和键盘事件状态flag(一开始状态为0，按下键盘变成1，再按键盘变成0，如此切换).

定义开始抽奖函数playFun();

定义停止抽奖函数stopFun();

按回车键切换抽奖状态事件；

js完整代码：

css样式：

* {
 margin: 0;
 padding: 0;
}

.title {
 font-size: 24px;
 font-weight: bold;
 width: 400px;
 height: 70px;
 margin: 0 auto;
 padding-top: 30px;
 text-align: center;
 color: #f00;
}

.btns {
 width: 190px;
 height: 30px;
 margin: 0 auto;
}

.btns span {
 font-family: '微软雅黑';
 font-size: 14px;
 line-height: 27px;
 display: block;
 float: left;
 width: 80px;
 height: 27px;
 margin-right: 10px;
 cursor: pointer;
 text-align: center;
 color: #fff;
 border: 1px solid #eee;
 border-radius: 7px;
 background: #036;
}

JavaScript实现抽奖系统实例分享

推荐度：

点击下载本文 文档为doc格式

标签：分享抽奖实现

热门焦点

JavaScript实现抽奖系统实例分享

JavaScript实现抽奖系统实例分享

JavaScript实现抽奖系统实例分享

最新推荐

猜你喜欢

热门推荐