So implementieren Sie ein Lotteriesystem mit JavaScript-js-Tutorial-php.cn

So implementieren Sie ein Lotteriesystem mit JavaScript

亚连

Freigeben： 2018-06-11 17:20:42

Original

4902 Leute haben es durchsucht

In diesem Artikel wird hauptsächlich die Implementierung des auf JavaScript basierenden Lotteriesystems im Detail vorgestellt, das einen gewissen Referenzwert hat.

Die Verwendung von JavaScript zur Implementierung eines einfachen Lotteriesystems gibt [Start] Taste und [Stopp]-Taste.

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 ;
- Drücken Sie die Eingabetaste, um zwischen dem Starten und Stoppen der Lotterie zu wechseln.

HTML-Code:

Erstellen Sie die HTML-Struktur. Am einfachsten ist es, den angezeigten Preisnamen sowie die Start- und Stoppschaltflächen einzubinden.

<!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 jedes Preises. Und initialisieren Sie den Timer und das Tastaturereignis-Statusflag (der Anfangsstatus ist 0, ein erneutes Drücken der Tastatur ändert sich auf 0 usw.

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;

Nach dem Login kopieren

definiert die Startlotteriefunktion playFun(). ).

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

Nach dem Login kopieren

CSS-Stil:

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

Nach dem Login kopieren

Das Obige habe ich für alle zusammengestellt. Ich hoffe, dass es in Zukunft für alle hilfreich sein wird.

Verwandte Artikel:

So implementieren Sie benutzerdefinierte globale Methoden in Vue

So implementieren Sie untergeordnete Geschwisterkomponenten in der Vue2.0-Dateninteraktion zwischen

Wie man den Prozentsatz der Tabellenunterstützungshöhe im Bootstrap implementiert

Wie man Axios verwendet, um get und die Post-Methode zu kapseln

implementiert eine unidirektionale Bindung im Vue-Komponenten-Lieferobjekt. Wie geht das?

Das obige ist der detaillierte Inhalt vonSo implementieren Sie ein Lotteriesystem mit JavaScript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!