js:自動亮起100盞燈


1)    使用js在頁面上顯示100盞燈,並標記從1到100的編號
2)    頁面加載后3秒,從編號是1的燈依次自動亮起。
3)    每過0.5秒亮下一盞燈(10分)
4)    所有燈亮起后,彈出確認框,詢問是否要關閉頁面
5)    點確定,頁面自動關閉。點取消,頁面不動。

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>100盞燈</title>
    <meta charset="utf-8" />
</head>
<body onload="trunonLight();">
    <div id="divDengAll">
        <!--<img src="img/2.jpg.gif" id="deng01"/>-->
    </div>
    <script type="text/javascript">
        function trunonLight() {
            //放置100盞燈
            var divDengAll = document.getElementById("divDengAll");
            var str = "";
            for (var i = 0; i < 100; i++) {
                str += "<img src=\"img/2.jpg.gif\" id=\"deng0" + i + "\"/>";
            }
            divDengAll.innerHTML = str;
            var j = 0;
            setTimeout(function () {
                //3秒后執行
                setInterval(function () {
                    turnonLight2(j);
                    j++
                }, 500);
            }, 3000);
           
        }
        //開燈
        function turnonLight2(j) {
           // setTimeout(function () {
                document.getElementById("deng0" + j).src = "img/1.jpg.gif";
            // }, 500);
                if (j>=99) {
                    if (confirm("全部燈都已亮了,是否關閉本頁面")) {
                        window.close();
                    }
                }
        }
    </script>
</body>
</html>

 


注意!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系我们删除。



 
粤ICP备14056181号  © 2014-2020 ITdaan.com