原生JavaScript写一个简易的抽奖系统

最新推荐文章于 2024-07-31 13:55:09 发布

遇见小美好

最新推荐文章于 2024-07-31 13:55:09 发布

阅读量1w

点赞数 6

分类专栏： web前端 javascript 文章标签： javascript 抽奖系统

本文链接：https://blog.csdn.net/qq_37268201/article/details/70918506

版权

web前端同时被 2 个专栏收录

84 篇文章 1 订阅

订阅专栏

javascript

46 篇文章 0 订阅

订阅专栏

用原生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>
    <div id="title" class="title">开始抽奖啦！</div>
    <div class="btns">
        <span id="play">开 始</span>
        <span id="stop">停 止</span>
    </div>
</body>

</html>

js主要代码片段：

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

var data=['Phone7','Ipad','三星笔记本','佳能相机','惠普打印机','谢谢参与','100元充值卡','1000元超市购物券'];
    timer = null,
    flag = 0;

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

function playFun() {
	var title = document.getElementById('title');
	var play = document.getElementById('play');
	//每次都先清除上一次的定时器任务，避免抽奖效果累加频率会越来越快
	clearInterval(timer);
	//定时器50毫秒触发一次
	timer = setInterval(function(){
		//获取奖品下标随机数
		var random = Math.floor(Math.random() * data.length);
		//显示随机的奖品名称
		title.innerHTML = data[random];
	}, 50);
	//改变开始按钮背景色
	play.style.background = '#666';
}

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

function stopFun(){
	//清除定时器即可结束抽奖
	clearInterval(timer);
	var play = document.getElementById('play');
	//改变停止按钮背景色
	play.style.background = '#036';
}

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

document.onkeyup = function(event){
	event = event || window.event;
	//回车键键码为13
	if (event.keyCode == 13) {
		//如果状态flag值为0则开始抽奖，并把状态值改为1，否则停止抽奖并把状态值改为0
		if (flag === 0){
			playFun();
			flag = 1;
		}else{
			stopFun();
			flag = 0;
		}
	}
}

js完整代码：

var data = ['Phone7', 'Ipad', '三星笔记本', '佳能相机', '惠普打印机', '谢谢参与', '100元充值卡', '1000元超市购物券'],
    timer = null, //定时器
    flag = 0; //用于键盘事件状态标记

window.onload = function() {

    var play = document.getElementById('play'),
        stop = document.getElementById('stop');

    // 开始抽奖
    play.onclick = playFun;
    stop.onclick = stopFun;

    // 键盘事件
    document.onkeyup = function(event) {
        event = event || window.event;
        if (event.keyCode == 13) {
            if (flag == 0) {
                playFun();
                flag = 1;
            } else {
                stopFun();
                flag = 0;
            }
        }
    }
}
// 开始抽奖
function playFun() {
    var title = document.getElementById('title');
    var play = document.getElementById('play');
    //每次都先清除上一次的定时器任务，避免抽奖效果累加频率会越来越快
    clearInterval(timer);
    timer = setInterval(function() {
        var random = Math.floor(Math.random() * data.length);
        title.innerHTML = data[random];
    }, 50);
    play.style.background = '#999';
}
//停止抽奖
function stopFun() {
    clearInterval(timer);
    var play = document.getElementById('play');
    play.style.background = '#036';
}

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;
}