cari

Rumah  >  Soal Jawab  >  teks badan

javascript - Ralat menukar antara acara tetikus dan acara papan kekunci apabila menggunakan tag butang?

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>

習慣沉默習慣沉默2749 hari yang lalu582

membalas semua(3)saya akan balas

  • 天蓬老师

    天蓬老师2017-05-18 10:56:36

    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

    balas
    0
  • 怪我咯

    怪我咯2017-05-18 10:56:36

    Prinsipnya seperti yang dinyatakan di atas, sila tambah jawapan. 

    function playFun (e){
    e && e.target.blur()
    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 (e){
    e && e.target.blur()
    clearInterval(timer);
    showNum.style.background = '#000';
    showNum.style.color = '#FFF';
    flag=0;
}

    balas
    0
  • PHP中文网

    PHP中文网2017-05-18 10:56:36

    Apabila fokus pada butang, menekan enter adalah bersamaan dengan klik kiri tetikus.
    Selain itu, tag butang tidak disyorkan, jadi gantikannya terus tanpa teragak-agak

    balas
    0
  • Batalbalas