J'ai fait un petit truc de loterie. Les boutons de démarrage et d'arrêt sont des étiquettes de boutons. Lorsque j'appuie sur Démarrer avec la souris et que j'entre le nombre de personnes, vous pouvez appuyer sur Entrée pour faire une pause, mais appuyer à nouveau sur Entrée démarrera puis s'arrêtera instantanément, au lieu d'appuyer à nouveau sur Entrée pour terminer. Si l'étiquette du bouton n'est pas utilisée, ce sera Oui, ou peut-être que cela ne s'arrête pas immédiatement si je clique d'abord sur la page puis que j'appuie sur Entrée. Je veux savoir pourquoi ?
Code :
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>抽奖</title>
<style type="text/css">
*{
margin:0 0;
padding:0;
font-family: "微软雅黑";
}
h1{margin-top:20px;text-align: center;}
#content{
margin: 0 auto;
text-align: center;
}
#show{
margin: 10px auto;
padding: 20px;
text-align: center;
font-size: 300px;
}
.btn{
margin-top: 10px;
}
.btn li{
display: inline-block;
width:220px;
}
.btn button{
border: 2px outset #fff;
background: #000;
letter-spacing: 2px;
padding: 5px 8px;
color: #FFF;
font-size: 18px;
font-weight: bold;
border-radius:5px;
outline:none;
cursor: pointer;
width: 150px;
text-align: center;
}
#footer{
margin-top: 65px;
}
</style>
<script type="text/javascript">
var timer=null;
var num=0;
var flag=0;
window.onload=function(){
start=document.getElementById("start");
stop=document.getElementById("stop");
showNum=document.getElementById("show");
start.onclick = playFun;
stop.onclick = stopFun;
document.onkeyup=function(event){
var event = event || window.event;
if(event.keyCode==13){
if(!flag){
playFun();
}
else {
stopFun();
console.log(flag);
}
}
}
}
function playFun (){
if(!num){
num = window.prompt("参加这次抽奖的人数：");
if(!num){
playFun();
}
}
clearInterval(timer);
timer = setInterval(function(){
var random = Math.floor(Math.random()*num+1);
showNum.innerHTML=random;
},50);
showNum.style.background = '#FFF';
showNum.style.color = '#000';
flag=1;
}
function stopFun (){
clearInterval(timer);
showNum.style.background = '#000';
showNum.style.color = '#FFF';
flag=0;
}
</script></tête>
<corps>
<h1>抽奖XD</h1>
<p id="content">
<p id="show">1</p>
<ul class="btn">
<li><button id="start">开始</button></li>
<li><button id="stop">停止</button></li>
</p>
</p></body>
</html>
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Après avoir cliqué une fois sur le bouton, le focus est positionné sur le bouton. À ce moment, chaque fois que vous appuyez sur Entrée, le bouton sera cliqué deux fois. Passer à span éliminera le problème de mise au point
Le principe est tel que mentionné ci-dessus, merci d'ajouter la réponse.
Lorsque le focus est sur le bouton, appuyer sur Entrée équivaut à un clic gauche de la souris.
.De plus, la balise bouton n'est pas recommandée, alors n'hésitez pas à la remplacer directement