Maison > Article > interface Web > JS crée un système de loterie aléatoire

JS crée un système de loterie aléatoire

php中世界最好的语言original: 2018-04-13 13:53:113260parcourir

Cette fois, je vais vous amener JS pour créer un système de loterie aléatoire. Quelles sont les précautions pour créer un système de loterie aléatoire avec JS Voici un cas pratique, jetons un oeil.

Utilisez JavaScript pour implémenter un système de loterie simple, avec un bouton [Démarrer] et un bouton [Arrêter].

Fonction :

- Cliquez sur le bouton Démarrer pour démarrer la loterie, et les noms des prix apparaîtront de manière aléatoire
- Cliquez sur le bouton Arrêter pour arrêter la loterie
- Appuyez sur la touche Entrée pour basculer entre le démarrage et l'arrêt de la loterie ;

Effet

code html :

Créez une structure HTML dont la plus basique est le nom du prix affiché et les boutons de démarrage et d'arrêt.

<!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 extrait de code principal :

Tout d’abord, définissez le tableau de données et écrivez les noms de chaque prix. Et initialisez le drapeau d'état de la minuterie et de l'événement du clavier (l'état initial est 0, appuyez sur le clavier pour passer à 1, appuyez à nouveau sur le clavier pour passer à 0, et ainsi de suite). Définir la fonction de démarrage de la loterie playFun();

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

Définir la fonction stop loterie stopFun();

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

Appuyez sur la touche Entrée pour changer l'événement de statut de loterie

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

js code complet :

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

style css :

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

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de PHP !

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

Lecture recommandée :

Swiper implémente la rotation des images publicitaires mobiles

Méthode d'utilisation du bus de communication des composants Vue

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

php JavaScript css html JS 事件键盘事件

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Étapes de mise en œuvre de l'utilisation d'oxm pour mapper XMLArticle suivant：Étapes de mise en œuvre de l'utilisation d'oxm pour mapper XML

Articles Liés

Voir plus