js:自动亮起100盏灯

Posted 2021-01-31 幸福安康

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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>

以上是关于js:自动亮起100盏灯的主要内容，如果未能解决你的问题，请参考以下文章

100盏灯开关的问题

关于js----------------分享前端开发常用代码片段

HaaS100按键及LED使用介绍

百度百灯问题

若依 vue前端动态设置路由path不同参数在页面容器里打开新页面（新路由），面包屑和标签页标题根据参数动态改变，面包屑多级标题，侧边栏对应菜单亮起

西门子PLC编程，有8个灯,编号为1到8,要求亮灯顺序为1-23-4-56-7-81-2-34依次递推,