Créez un système de loterie simple ! Tout le monde est invité à apprendre !
Principe JS : créez un tableau pour stocker le contenu de la loterie, tel que l'iphone6, etc. Lorsque le clic démarre, démarrez le minuteur, générez un nombre aléatoire et remplacez le innerHTML du texte correspondant par le contenu correspondant au tableau .
Si vous souhaitez augmenter la probabilité d'un certain tirage de loterie, vous pouvez répéter plusieurs fois une certaine valeur dans le tableau. Regardez ensuite le code. ,
Code JavaScript
window.onload = function(){
var data = [
"iphone 6s plus",
"苹果Mac 笔记本",
"美的洗衣机",
"凌美钢笔",
"谢谢参与",
"索尼入耳式耳机",
"雷柏机械键盘",
"《javaScript高级程序设计》",
"精美保温杯",
"维尼小熊一只",
"500元中国石化加油卡",
"爱奇艺年费会员",
"iPad mini",
"32G U盘",
];
var bStop = true;
var timer = null;
var btns = document.getElementById('btns').getElementsByTagName('span');
var text = document.getElementById('text');
btns[0].onclick = start;
btns[1].onclick = stop;
document.onkeyup = function(event){
event = event||window.event;
if(event.keyCode==13){
if(bStop){
start();
}else {
stop();
}
}
}
function start(){
clearInterval(timer);
timer = setInterval(function(){
var r = Math.floor(Math.random()*data.length);
text.innerHTML = data[r];
},20);
btns[0].style.background = '#666';
bStop = false;
}
function stop(){
clearInterval(timer);
btns[0].style.background = 'blue';
bStop = true;
}
}
code html css :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>抽奖啦</title>
<style>
* {
margin: 0;
padding:0;
}
#container {
width: 500px;
height: 200px;
margin: 100px auto;
background: red;
position: relative;
padding-top: 20px;
}
#container p {
position: absolute;
bottom: 4px;
left: 30px;
}
#btns {
position: absolute;
left: 118px;
bottom: 30px;
}
#container h1 {
color: #fff;
text-align: center;
}
#btn-start,#btn-stop {
width: 100px;
height: 60px;
background: blue;
text-align: center;
line-height: 60px;
font-size: 20px;
display: inline-block;
color: #fff;
margin-right: 60px;
border-radius: 10px;
cursor: pointer;
}
</style>
<script src="index.js"></script>
</head>
<body>
<div id="container">
<h1 id="text">iphone 6s plus</h1>
<p>小提示:您可以按下Enter键来控制开始暂停,祝您中大奖哟</p>
<div id="btns">
<span id="btn-start">开始</span>
<span id="btn-stop">停止</span>
</div>
</div>
</body>
</html>
J'espère que cet article aidera tout le monde à apprendre et à mettre en œuvre facilement le système de loterie.
Méthode d'implémentation de la fonction js barrage
langage c sinon utilisation de l'instruction
Introduction au contenu technologique de base Java
gestion des exceptions Java
méthode de formatage HTML
Que sont les échanges de devises numériques ?
Le but de la commande rm-rf sous Linux
Tendance des prix du prix Eth aujourd'hui
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
