Exemple de partage d'implémentation JavaScript du système de loterie-js tutoriel-php.cn

Exemple de partage d'implémentation JavaScript du système de loterie

小云云

Libérer： 2018-01-16 13:24:53

original

2659 Les gens l'ont consulté

Cet article présente principalement en détail le système de loterie basé sur JavaScript. Il a une certaine valeur de référence. Les amis intéressés peuvent s'y référer.

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 lancer la loterie, et le nom du prix apparaîtra au hasard
- Cliquez sur le bouton Démarrer ; bouton d'arrêt 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 doit inclure 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>

Copier après la connexion

Extrait de code principal js :

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, appuyer sur le clavier passe à 1, appuyer à nouveau sur le clavier passe à 0, et ainsi de suite). >

Définir la fonction de démarrage de la loterie playFun();

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

Copier après la connexion

Définir la fonction d'arrêt de la loterie stopFun();

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

Copier après la connexion

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

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

Copier après la connexion

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

Copier après la connexion

style CSS :

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

window.onload = function() {

  var play = document.getElementById(&#39;play&#39;),
    stop = document.getElementById(&#39;stop&#39;);

  // 开始抽奖
  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(&#39;title&#39;);
  var play = document.getElementById(&#39;play&#39;);
  //每次都先清除上一次的定时器任务，避免抽奖效果累加频率会越来越快
  clearInterval(timer);
  timer = setInterval(function() {
    var random = Math.floor(Math.random() * data.length);
    title.innerHTML = data[random];
  }, 50);
  play.style.background = &#39;#999&#39;;
}
//停止抽奖
function stopFun() {
  clearInterval(timer);
  var play = document.getElementById(&#39;play&#39;);
  play.style.background = &#39;#036&#39;;
}

Copier après la connexion

Recommandations associées :

* {
  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: &#39;微软雅黑&#39;;
  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;
}

Copier après la connexion

implémentation jQuery d'une loterie simple partage de technologie de jeu

JQuery, PHP, Mysql implémentation d'exemples de programmes de loterie explication détaillée

Vue implémentation de la loterie de numéros de téléphone mobile défilement haut et bas partage d'exemples d'animation

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!