JS erstellt ein Zufallslotteriesystem-js-Tutorial-php.cn

JS erstellt ein Zufallslotteriesystem

php中世界最好的语言

Freigeben： 2018-04-13 13:53:11

Original

3243 Leute haben es durchsucht

Dieses Mal bringe ich Ihnen JS, um ein Zufallslotteriesystem zu erstellen. Was sind die Vorsichtsmaßnahmen für die Erstellung eines Zufallslotteriesystems mit JS? Hier ist ein praktischer Fall.

Verwenden Sie JavaScript, um ein einfaches Lotteriesystem mit einer [Start]-Schaltfläche und einer [Stopp]-Schaltfläche zu implementieren.

Funktion:

- Klicken Sie auf die Schaltfläche „Start“, um die Lotterie zu starten. Die Namen der Preise werden zufällig angezeigt.
. – Klicken Sie auf die Schaltfläche „Stopp“, um die Lotterie zu stoppen.

Wirkung

HTML-Code:

Erstellen Sie eine HTML-Struktur, deren grundlegendste der angezeigte Preisname sowie die Start- und Stoppschaltflächen sind.

<!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>

Nach dem Login kopieren

js-Hauptcode-Snippet:

Definieren Sie zunächst das Datenarray und schreiben Sie die Namen der einzelnen Preise. Und initialisieren Sie das Timer- und Tastatur-Ereignisstatus-Flag (der Anfangsstatus ist 0, drücken Sie die Tastatur, um auf 1 zu wechseln, drücken Sie die Tastatur erneut, um auf 0 zu wechseln, und so weiter). Definieren Sie die Lotterie-Startfunktion playFun();

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

Nach dem Login kopieren

Definieren Sie die Stop-Lotterie-Funktion 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';
}

Nach dem Login kopieren

Drücken Sie die Eingabetaste, um das Lotteriestatusereignis zu wechseln

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

Nach dem Login kopieren

js vollständiger Code:

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

Nach dem Login kopieren

CSS-Stil:

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

Nach dem Login kopieren

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

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

Nach dem Login kopieren

Swiper implementiert die Bildrotation für mobile Werbung

So verwenden Sie den Vue Component Communication Bus

Das obige ist der detaillierte Inhalt vonJS erstellt ein Zufallslotteriesystem. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!