JS crée un système de loterie aléatoire
Cette fois, je vais vous amener JS pour créer un système de loterie aléatoire. Quelles sont les précautions pour créer un système de loterie aléatoire avec JS Voici un cas pratique, jetons un oeil.
Utilisez JavaScript pour implémenter un système de loterie simple, avec un bouton [Démarrer] et un bouton [Arrêter].
Fonction :
- Cliquez sur le bouton Démarrer pour démarrer la loterie, et les noms des prix apparaîtront de manière aléatoire
- Cliquez sur le bouton Arrêter pour arrêter la loterie
- Appuyez sur la touche Entrée pour basculer entre le démarrage et l'arrêt de la loterie ;
Effet
code html :
Créez une structure HTML dont la plus basique est le nom du prix affiché et les boutons de démarrage et d'arrêt.
<!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 extrait de code principal :
Tout d’abord, définissez le tableau de données et écrivez les noms de chaque prix. Et initialisez le drapeau d'état de la minuterie et de l'événement du clavier (l'état initial est 0, appuyez sur le clavier pour passer à 1, appuyez à nouveau sur le clavier pour passer à 0, et ainsi de suite). Définir la fonction de démarrage de la loterie playFun();
var data=['Phone7','Ipad','三星笔记本','佳能相机','惠普打印机','谢谢参与','100元充值卡','1000元超市购物券']; timer = null, flag = 0;
Définir la fonction stop loterie 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';
}Appuyez sur la touche Entrée pour changer l'événement de statut de loterie
function stopFun(){
//清除定时器即可结束抽奖
clearInterval(timer);
var play = document.getElementById('play');
//改变将停止按钮背景色
play.style.background = '#036';
}js code complet :
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;
}
}
}style css :
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';
}Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de PHP !
* {
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;
}Swiper implémente la rotation des images publicitaires mobiles
Méthode d'utilisation du bus de communication des composants Vue
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
Outils d'IA chauds
Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes
AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.
Undress AI Tool
Images de déshabillage gratuites
Clothoff.io
Dissolvant de vêtements AI
AI Hentai Generator
Générez AI Hentai gratuitement.
Article chaud
Outils chauds
Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit
SublimeText3 version chinoise
Version chinoise, très simple à utiliser
Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP
Dreamweaver CS6
Outils de développement Web visuel
SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)
Sujets chauds
La multiplication matricielle universelle de CUDA : de l'entrée à la maîtrise !
Mar 25, 2024 pm 12:30 PM
La multiplication matricielle générale (GEMM) est un élément essentiel de nombreuses applications et algorithmes, et constitue également l'un des indicateurs importants pour évaluer les performances du matériel informatique. Une recherche approfondie et l'optimisation de la mise en œuvre de GEMM peuvent nous aider à mieux comprendre le calcul haute performance et la relation entre les systèmes logiciels et matériels. En informatique, une optimisation efficace de GEMM peut augmenter la vitesse de calcul et économiser des ressources, ce qui est crucial pour améliorer les performances globales d’un système informatique. Une compréhension approfondie du principe de fonctionnement et de la méthode d'optimisation de GEMM nous aidera à mieux utiliser le potentiel du matériel informatique moderne et à fournir des solutions plus efficaces pour diverses tâches informatiques complexes. En optimisant les performances de GEMM
Le système de conduite intelligent Qiankun ADS3.0 de Huawei sera lancé en août et sera lancé pour la première fois sur Xiangjie S9
Jul 30, 2024 pm 02:17 PM
Le 29 juillet, lors de la cérémonie de lancement de la 400 000e nouvelle voiture d'AITO Wenjie, Yu Chengdong, directeur général de Huawei, président de Terminal BG et président de la BU Smart Car Solutions, a assisté et prononcé un discours et a annoncé que les modèles de la série Wenjie seraient sera lancé cette année En août, la version Huawei Qiankun ADS 3.0 a été lancée et il est prévu de pousser successivement les mises à niveau d'août à septembre. Le Xiangjie S9, qui sortira le 6 août, lancera le système de conduite intelligent ADS3.0 de Huawei. Avec l'aide du lidar, la version Huawei Qiankun ADS3.0 améliorera considérablement ses capacités de conduite intelligente, disposera de capacités intégrées de bout en bout et adoptera une nouvelle architecture de bout en bout de GOD (identification générale des obstacles)/PDP (prédictive prise de décision et contrôle), fournissant la fonction NCA de conduite intelligente d'une place de stationnement à l'autre et mettant à niveau CAS3.0
Quelle version du système Apple 16 est la meilleure ?
Mar 08, 2024 pm 05:16 PM
La meilleure version du système Apple 16 est iOS16.1.4. La meilleure version du système iOS16 peut varier d'une personne à l'autre. Les ajouts et améliorations de l'expérience d'utilisation quotidienne ont également été salués par de nombreux utilisateurs. Quelle version du système Apple 16 est la meilleure ? Réponse : iOS16.1.4 La meilleure version du système iOS 16 peut varier d'une personne à l'autre. Selon les informations publiques, iOS16, lancé en 2022, est considéré comme une version très stable et performante, et les utilisateurs sont plutôt satisfaits de son expérience globale. De plus, l'ajout de nouvelles fonctionnalités et les améliorations de l'expérience d'utilisation quotidienne dans iOS16 ont également été bien accueillies par de nombreux utilisateurs. Surtout en termes de durée de vie de la batterie mise à jour, de performances du signal et de contrôle du chauffage, les retours des utilisateurs ont été relativement positifs. Cependant, compte tenu de l'iPhone14
Comment créer une applet de loterie Excel
Mar 20, 2024 am 11:40 AM
Dans le travail quotidien, nous rencontrons beaucoup de choses qui nécessitent un tirage au sort. La méthode traditionnelle consiste à tirer des nombres au hasard à l'aide de numéros sur papier, nous pouvons utiliser des ordinateurs pour tirer au sort. La leçon que je veux partager avec vous. aujourd'hui, c'est Comment créer une applet de loterie Excel. 1. Tout d'abord, nous ouvrons le logiciel Excel et ouvrons le tableau que nous avons préparé. Le tableau doit contenir nos noms. 2. Ensuite, nous fusionnons les cellules de droite, remplissons en noir qui a de la chance ce soir, fusionnons les cellules ci-dessous et remplissons en rouge, comme le montre la figure ci-dessous. 3. Ensuite, nous entrons dans la fonction randbetween dans la zone rouge et définissons la première ligne sur 2 et la dernière ligne sur 7, comme le montre la figure ci-dessous. 4. Ensuite, nous entrons devant
Toujours nouveau ! Mises à niveau de la série Huawei Mate60 vers HarmonyOS 4.2 : amélioration du cloud AI, le dialecte Xiaoyi est si facile à utiliser
Jun 02, 2024 pm 02:58 PM
Le 11 avril, Huawei a officiellement annoncé pour la première fois le plan de mise à niveau de 100 machines HarmonyOS 4.2. Cette fois, plus de 180 appareils participeront à la mise à niveau, couvrant les téléphones mobiles, les tablettes, les montres, les écouteurs, les écrans intelligents et d'autres appareils. Au cours du mois dernier, avec la progression constante du plan de mise à niveau de 100 machines HarmonyOS4.2, de nombreux modèles populaires, notamment Huawei Pocket2, la série Huawei MateX5, la série nova12, la série Huawei Pura, etc., ont également commencé à être mis à niveau et à s'adapter, ce qui signifie qu'il y aura davantage d'utilisateurs de modèles Huawei pourront profiter de l'expérience commune et souvent nouvelle apportée par HarmonyOS. À en juger par les commentaires des utilisateurs, l'expérience des modèles de la série Huawei Mate60 s'est améliorée à tous égards après la mise à niveau d'HarmonyOS4.2. Surtout Huawei M
Quels sont les systèmes d'exploitation informatiques ?
Jan 12, 2024 pm 03:12 PM
Un système d'exploitation informatique est un système utilisé pour gérer du matériel informatique et des logiciels. C'est également un programme de système d'exploitation développé sur la base de tous les systèmes logiciels. Alors, quels sont les systèmes informatiques ? Ci-dessous, l'éditeur partagera avec vous ce que sont les systèmes d'exploitation informatiques. Le soi-disant système d'exploitation consiste à gérer le matériel informatique et les logiciels. Tous les logiciels sont développés sur la base des programmes du système d'exploitation. En fait, il existe de nombreux types de systèmes d’exploitation, notamment ceux à usage industriel, commercial et personnel, couvrant un large éventail d’applications. Ci-dessous, l'éditeur vous expliquera ce que sont les systèmes d'exploitation informatiques. Quels systèmes d'exploitation informatiques sont les systèmes Windows ? Le système Windows est un système d'exploitation développé par Microsoft Corporation des États-Unis. que le plus
Différences et similitudes des commandes cmd dans les systèmes Linux et Windows
Mar 15, 2024 am 08:12 AM
Linux et Windows sont deux systèmes d'exploitation courants, représentant respectivement le système Linux open source et le système Windows commercial. Dans les deux systèmes d'exploitation, il existe une interface de ligne de commande permettant aux utilisateurs d'interagir avec le système d'exploitation. Sur les systèmes Linux, les utilisateurs utilisent la ligne de commande Shell, tandis que sur les systèmes Windows, les utilisateurs utilisent la ligne de commande cmd. La ligne de commande Shell dans le système Linux est un outil très puissant qui peut effectuer presque toutes les tâches de gestion du système.
Explication détaillée de la façon de modifier la date système dans la base de données Oracle
Mar 09, 2024 am 10:21 AM
Explication détaillée de la méthode de modification de la date système dans la base de données Oracle. Dans la base de données Oracle, la méthode de modification de la date système consiste principalement à modifier le paramètre NLS_DATE_FORMAT et à utiliser la fonction SYSDATE. Cet article présentera en détail ces deux méthodes et leurs exemples de code spécifiques pour aider les lecteurs à mieux comprendre et maîtriser l'opération de modification de la date système dans la base de données Oracle. 1. Modifier la méthode du paramètre NLS_DATE_FORMAT NLS_DATE_FORMAT correspond aux données Oracle
