Saya membuat perkara kecil loteri Butang mula dan berhenti ialah label butang. Apabila saya menekan mula dengan tetikus dan memasukkan bilangan orang, adalah OK untuk menekan Enter untuk menjeda, tetapi jika saya menekan Enter sekali lagi, ia akan bermula dan kemudian berhenti serta-merta, bukannya menekan Enter sekali lagi untuk menamatkan label tidak digunakan, ia akan menjadi Ya, atau mungkin ia tidak berhenti serta-merta jika saya klik pada halaman dahulu dan kemudian tekan Enter Saya ingin tahu mengapa?
Kod:
<!DOCTYPE html>
<html lang="en">
<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></kepala>
<badan>
<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] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Selepas mengklik butang sekali, fokus diletakkan pada butang Pada masa ini, setiap kali anda menekan Enter, butang akan diklik dua kali. Bertukar kepada span akan menghapuskan masalah fokus
Prinsipnya seperti yang dinyatakan di atas, sila tambah jawapan.
Apabila fokus pada butang, menekan enter adalah bersamaan dengan klik kiri tetikus.
Selain itu, tag butang tidak disyorkan, jadi gantikannya terus tanpa teragak-agak