Dieser Artikel stellt hauptsächlich das auf JavaScript basierende Lotteriesystem im Detail vor. Interessierte Freunde können darauf verweisen.
Verwenden Sie JavaScript, um ein einfaches Lotteriesystem mit einer [Start]-Schaltfläche und einer [Stopp]-Schaltfläche zu implementieren.
Funktion:
- Klicken Sie auf die Startschaltfläche, um die Lotterie zu starten, und der Preisname wird zufällig angezeigt.
- Klicken Sie auf Stopp-Taste, um die Lotterie zu stoppen;
- Drücken Sie die Eingabetaste, um zwischen Starten und Stoppen der Lotterie zu wechseln.
Effekt
HTML-Code:
Erstellen Sie eine HTML-Struktur, deren einfachste Struktur den angezeigten Preisnamen sowie Start- und Stoppschaltflächen enthalten sollte.
<!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-Hauptcode-Snippet:
Definieren Sie zunächst das Datenarray und schreiben Sie die Namen jedes Preises. Und initialisieren Sie das Timer- und Tastatur-Ereignisstatus-Flag (der Anfangsstatus ist 0, ein erneutes Drücken der Tastatur ändert sich auf 0 usw.). >
Definieren Sie die Startlotteriefunktion playFun();var data=['Phone7','Ipad','三星笔记本','佳能相机','惠普打印机','谢谢参与','100元充值卡','1000元超市购物券']; timer = null, flag = 0;
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';
}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;
}
}
}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';
}* {
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;
}JQuery-, PHP-, MySQL-Implementierung von Lotterieprogrammbeispielen, ausführliche Erklärung
Vue-Implementierung der Mobiltelefonnummernlotterie nach oben und unten scrollen Teilen von Animationsbeispielen
Das obige ist der detaillierte Inhalt vonBeispiel für die gemeinsame Nutzung einer JavaScript-Implementierung des Lotteriesystems. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
