suchen

Heim  >  Artikel  >  Web-Frontend  >  So implementieren Sie ein Lotteriesystem mit JavaScript

So implementieren Sie ein Lotteriesystem mit JavaScript

亚连
亚连Original
2018-06-11 17:20:424857Durchsuche

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>

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;

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

CSS-Stil: 

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

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!

JavaScript css bootstrap html 封装 JS 对象 事件 键盘事件 table
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：Probleme im Zusammenhang mit der Wertübergabe in LauiNächster Artikel：Probleme im Zusammenhang mit der Wertübergabe in Laui

In Verbindung stehende Artikel

Mehr sehen