Heim > Artikel > Web-Frontend > Beispiel für die gemeinsame Nutzung einer JavaScript-Implementierung des Lotteriesystems

Beispiel für die gemeinsame Nutzung einer JavaScript-Implementierung des Lotteriesystems

小云云Original: 2018-01-16 13:24:532628Durchsuche

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

Definieren Sie die Stopplotteriefunktion 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;;
}

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

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

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

CSS-Stil:

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

Verwandte Empfehlungen:

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

jQuery-Implementierung einer einfachen Lotterie Teilen von Spieltechnologien

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!

php JavaScript mysql jquery css html JS 事件键盘事件

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Detaillierte Erläuterung der JavaScript-GrundlagenNächster Artikel：Detaillierte Erläuterung der JavaScript-Grundlagen

In Verbindung stehende Artikel

Mehr sehen