JS erstellt ein Zufallslotteriesystem
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.
<!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>
var data=['Phone7','Ipad','三星笔记本','佳能相机','惠普打印机','谢谢参与','100元充值卡','1000元超市购物券']; timer = null, flag = 0;
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';
}function stopFun(){
//清除定时器即可结束抽奖
clearInterval(timer);
var play = document.getElementById('play');
//改变将停止按钮背景色
play.style.background = '#036';
}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;
}
}
}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';
}* {
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;
}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!
Heiße KI -Werkzeuge
Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos
AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.
Undress AI Tool
Ausziehbilder kostenlos
Clothoff.io
KI-Kleiderentferner
AI Hentai Generator
Erstellen Sie kostenlos Ai Hentai.
Heißer Artikel
Heiße Werkzeuge
Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor
SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen
Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung
Dreamweaver CS6
Visuelle Webentwicklungstools
SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)
Heiße Themen
1376
52
CUDAs universelle Matrixmultiplikation: vom Einstieg bis zur Kompetenz!
Mar 25, 2024 pm 12:30 PM
Die allgemeine Matrixmultiplikation (GEMM) ist ein wesentlicher Bestandteil vieler Anwendungen und Algorithmen und außerdem einer der wichtigen Indikatoren zur Bewertung der Leistung der Computerhardware. Eingehende Forschung und Optimierung der Implementierung von GEMM können uns helfen, Hochleistungsrechnen und die Beziehung zwischen Software- und Hardwaresystemen besser zu verstehen. In der Informatik kann eine effektive Optimierung von GEMM die Rechengeschwindigkeit erhöhen und Ressourcen einsparen, was für die Verbesserung der Gesamtleistung eines Computersystems von entscheidender Bedeutung ist. Ein tiefgreifendes Verständnis des Funktionsprinzips und der Optimierungsmethode von GEMM wird uns helfen, das Potenzial moderner Computerhardware besser zu nutzen und effizientere Lösungen für verschiedene komplexe Computeraufgaben bereitzustellen. Durch Optimierung der Leistung von GEMM
Das intelligente Fahrsystem Qiankun ADS3.0 von Huawei wird im August auf den Markt kommen und erstmals auf dem Xiangjie S9 eingeführt
Jul 30, 2024 pm 02:17 PM
Am 29. Juli nahm Yu Chengdong, Huawei-Geschäftsführer, Vorsitzender von Terminal BG und Vorsitzender von Smart Car Solutions BU, an der Übergabezeremonie des 400.000sten Neuwagens von AITO Wenjie teil, hielt eine Rede und kündigte an, dass die Modelle der Wenjie-Serie dies tun werden Dieses Jahr auf den Markt kommen Im August wurde die Huawei Qiankun ADS 3.0-Version auf den Markt gebracht und es ist geplant, die Upgrades sukzessive von August bis September voranzutreiben. Das Xiangjie S9, das am 6. August auf den Markt kommt, wird erstmals mit dem intelligenten Fahrsystem ADS3.0 von Huawei ausgestattet sein. Mit Hilfe von Lidar wird Huawei Qiankun ADS3.0 seine intelligenten Fahrfähigkeiten erheblich verbessern, über integrierte End-to-End-Funktionen verfügen und eine neue End-to-End-Architektur von GOD (allgemeine Hinderniserkennung)/PDP (prädiktiv) einführen Entscheidungsfindung und Kontrolle), Bereitstellung der NCA-Funktion für intelligentes Fahren von Parkplatz zu Parkplatz und Aktualisierung von CAS3.0
Welche Version des Apple 16-Systems ist die beste?
Mar 08, 2024 pm 05:16 PM
Die beste Version des Apple 16-Systems ist iOS16.1.4. Die beste Version des iOS16-Systems kann von Person zu Person unterschiedlich sein. Die Ergänzungen und Verbesserungen im täglichen Nutzungserlebnis wurden auch von vielen Benutzern gelobt. Welche Version des Apple 16-Systems ist die beste? Antwort: iOS16.1.4 Die beste Version des iOS 16-Systems kann von Person zu Person unterschiedlich sein. Öffentlichen Informationen zufolge gilt iOS16, das 2022 auf den Markt kam, als eine sehr stabile und leistungsstarke Version, und die Benutzer sind mit dem Gesamterlebnis recht zufrieden. Darüber hinaus wurden die neuen Funktionen und Verbesserungen des täglichen Nutzungserlebnisses in iOS16 von vielen Benutzern gut angenommen. Insbesondere in Bezug auf die aktualisierte Akkulaufzeit, Signalleistung und Heizungssteuerung war das Feedback der Benutzer relativ positiv. Betrachtet man jedoch das iPhone14
So erstellen Sie ein Excel-Lotterie-Applet
Mar 20, 2024 am 11:40 AM
Bei der täglichen Arbeit stoßen wir auf viele Dinge, die das Auslosen von Zahlen erfordern. Mit der Entwicklung elektronischer Software können wir die Lektion, die ich mit Ihnen teilen möchte, nutzen Heute erfahren Sie, wie Sie ein Excel-Lotterie-Applet erstellen. 1. Zuerst öffnen wir die Excel-Software und öffnen die von uns vorbereitete Tabelle. Die Tabelle muss unsere Namen enthalten. 2. Dann führen wir die Zellen auf der rechten Seite zusammen, füllen Schwarz aus, wer heute Abend Glück hat, und fügen die Zellen darunter zusammen und füllen Rot aus, wie in der Abbildung unten gezeigt. 3. Dann geben wir die Randbetween-Funktion in den roten Bereich ein und setzen die erste Zeile auf 2 und die letzte Zeile auf 7, wie in der Abbildung unten gezeigt. 4. Dann geben wir vorne ind ein
Immer neu! Upgrade der Huawei Mate60-Serie auf HarmonyOS 4.2: KI-Cloud-Erweiterung, Xiaoyi-Dialekt ist so einfach zu bedienen
Jun 02, 2024 pm 02:58 PM
Am 11. April kündigte Huawei erstmals offiziell den 100-Maschinen-Upgradeplan für HarmonyOS 4.2 an. Dieses Mal werden mehr als 180 Geräte an dem Upgrade teilnehmen, darunter Mobiltelefone, Tablets, Uhren, Kopfhörer, Smart-Screens und andere Geräte. Im vergangenen Monat haben mit dem stetigen Fortschritt des HarmonyOS4.2-Upgradeplans für 100 Maschinen auch viele beliebte Modelle, darunter Huawei Pocket2, Huawei MateX5-Serie, Nova12-Serie, Huawei Pura-Serie usw., mit der Aktualisierung und Anpassung begonnen, was bedeutet, dass dass es mehr Benutzer von Huawei-Modellen geben wird, die das gemeinsame und oft neue Erlebnis von HarmonyOS genießen können. Den Rückmeldungen der Benutzer zufolge hat sich das Erlebnis der Modelle der Huawei Mate60-Serie nach dem Upgrade von HarmonyOS4.2 in allen Aspekten verbessert. Vor allem Huawei M
Welche Computer-Betriebssysteme gibt es?
Jan 12, 2024 pm 03:12 PM
Ein Computerbetriebssystem ist ein System zur Verwaltung von Computerhardware und -software. Es ist auch ein Betriebssystemprogramm, das auf allen Softwaresystemen basiert. Welche Computersysteme gibt es also? Im Folgenden erklärt Ihnen der Herausgeber, was Computer-Betriebssysteme sind. Das sogenannte Betriebssystem dient der Verwaltung von Computerhardware und Softwareprogrammen. Sämtliche Software wird auf Basis von Betriebssystemprogrammen entwickelt. Tatsächlich gibt es viele Arten von Betriebssystemen, darunter solche für den industriellen Einsatz, den kommerziellen Einsatz und den persönlichen Gebrauch, die ein breites Anwendungsspektrum abdecken. Im Folgenden erklärt Ihnen der Herausgeber, was Computer-Betriebssysteme sind. Welche Computer-Betriebssysteme sind Windows-Systeme? Das Windows-System ist ein Betriebssystem, das von der Microsoft Corporation in den Vereinigten Staaten entwickelt wurde. als die meisten
Ausführliche Erklärung zum Ändern des Systemdatums in der Oracle-Datenbank
Mar 09, 2024 am 10:21 AM
Ausführliche Erläuterung der Methode zum Ändern des Systemdatums in der Oracle-Datenbank. In der Oracle-Datenbank umfasst die Methode zum Ändern des Systemdatums hauptsächlich das Ändern des Parameters NLS_DATE_FORMAT und die Verwendung der Funktion SYSDATE. In diesem Artikel werden diese beiden Methoden und ihre spezifischen Codebeispiele ausführlich vorgestellt, um den Lesern zu helfen, den Vorgang zum Ändern des Systemdatums in der Oracle-Datenbank besser zu verstehen und zu beherrschen. 1. Ändern Sie die NLS_DATE_FORMAT-Parametermethode. NLS_DATE_FORMAT sind Oracle-Daten
Unterschiede und Gemeinsamkeiten von cmd-Befehlen in Linux- und Windows-Systemen
Mar 15, 2024 am 08:12 AM
Linux und Windows sind zwei gängige Betriebssysteme, die das Open-Source-Linux-System bzw. das kommerzielle Windows-System darstellen. In beiden Betriebssystemen gibt es eine Befehlszeilenschnittstelle, über die Benutzer mit dem Betriebssystem interagieren können. In Linux-Systemen verwenden Benutzer die Shell-Befehlszeile, während Benutzer in Windows-Systemen die cmd-Befehlszeile verwenden. Die Shell-Befehlszeile im Linux-System ist ein sehr leistungsfähiges Tool, das fast alle Systemverwaltungsaufgaben erledigen kann.
