最近用js做了一个简单年会抽奖系统

当点击开始的时候五秒钟后怎么让他自动停止，过一秒钟后又自动开始 就这样循环5次

解决方案 »

  1.   


    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <title> 页面名称 </title>
    <style type="text/css">
    #textbox  {
    border: 3px solid #006;
    width: 300px;
    font-size: 40px;
    text-align: center;
    }
    </style>
    </head>
    <body>
    <div id="textbox">-----</div>
    <input type="button" value="开始" onclick="startrun();" />
    <br>获奖名单:<div id="list"></div>
    <script type="text/javascript">
    var nameArr = ["名字01","名字02","名字03","名字04","名字05","名字06","名字07","名字08","名字09","名字10","名字11","名字12","名字13","名字14","名字15","名字16","名字17","名字18","名字19","名字20","名字21","名字22","名字23","名字24","名字25","名字26","名字27","名字28","名字29","名字30"];
    var listnum = 5;
    var timer, timer2;
    function startrun() {
    if (listnum<=0) return;
    clearInterval(timer);
    clearTimeout(timer2);
    var index;
    timer = setInterval(function(){
    index = Math.floor(Math.random()*nameArr.length);
    document.getElementById("textbox").innerHTML = nameArr[index];
    }, 30);
    timer2 = setTimeout(function(){
    clearInterval(timer);
    document.getElementById("list").innerHTML += nameArr[index] + "<br>";
    nameArr.splice(index,1);
    listnum--;
    timer2 = setTimeout(startrun, 1000);
    }, 5000);
    }
    </script>
    </body>
    </html>