zoukankan      html  css  js  c++  java
  • 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>
  • 相关阅读:
    推送
    XPath
    XML
    在xcode 6.4 环境下写的demo 在xode7 环境下 网络请求有问题
    SVN 搭建
    翻译
    iOS面试题积累
    安卓扁平化之路专题(三)Android 5.0新特性
    Android @SuppressLint @TargetApi 总结
    Android_support_v4,Android_support_v7,Android_support_v13区别
  • 原文地址:https://www.cnblogs.com/25miao/p/10205426.html
Copyright © 2011-2022 走看看