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盏灯的更多相关文章

  1. python基础===100盏灯的问题

    闪存里有人这样提问这样: 第一轮操作所有电灯,第二轮操作第2盏,第4盏开关,以此类推,第三轮改变编号为3的倍数的电灯,第3盏,第6盏,如果原来那盏灯是亮的,就熄灭它,如果原来是灭的,就点亮它,以此类推 ...

  2. JS练习--自动生成100个li

    点击按钮,自动生成100个li,红.黄.蓝.绿四种颜色的顺序显示出现在页面中 CSS: ;;} ul,li{list-style: none;} #ul1{position: relative;} # ...

  3. js自动生成条形码插件-JsBarcode

    JsBarcode.html <!DOCTYPE html> <html lang="en"> <head> <meta charset= ...

  4. n盏灯亮灭问题

    前几天看了华为的一个上机操作题,讲得是n盏灯亮灭问题,本质上还是数学问题,感觉很有趣,和大家分享一下,问题描述如下: 有n盏灯排成一排,依次标号1,2,…,n,每盏灯都有一根拉线开关,最初电灯都是关着 ...

  5. MyEclipse 中 添加 js自动完成模版

    MyEclipse 中 添加 js自动完成模版: window>preference>MyEclipse>Files and Editors>JavaScript>Edi ...

  6. 【XSS】对抗蠕虫 —— 如何让按钮不被 JS 自动点击

    前言 XSS 自动点按钮有什么危害? 在社交网络里,很多操作都是通过点击按钮发起的,例如发表留言.假如留言系统有 XSS,用户中招后除了基本攻击外,还能进行传播 -- XSS 自动填入留言内容,并模拟 ...

  7. js 自动类型转换

    js自动类型转换 1.==符号在判断左右两边数据是否相等时,如果数据类型一致,直接比较值即可 2.==符号左右数据类型不一致时,如果两方数据为布尔型.数值型.字符串型时,不为数字的那一方自动调用Num ...

  8. 怎么用js编写1——100的质数？

    这里来自csdn问答的一个问题,怎么用js编写1——100的质数? http://ask.csdn.net/questions/214429 质数也就是素数,即只能被1和自身整除的数,因此可以构造循环 ...

  9. pageresponse.min.js自动缩放页面改写

    /* * 名称 :移动端响应式框架 * 作者 :白树 http://peunzhang.cnblogs.com * 版本 :v2.1 * 日期 :2015.10.13 * 兼容 :ios 5+.and ...

随机推荐

  1. 通过CGI实现在Html页面上执行shell命令

    在mac上配置cgi(不用系统自带的apache cgi.) 安装cgi 1. brew update 2. brew install httpd24 安装完后,会有如下提示 DocumentRoot ...

  2. express后端和fetch前端的json数据传递

    在使用express做后端,前端使用fetch API来请求后端时,一般都是用 JSON 数据进行通信的. 下面是一个简单的例子: 前端: if (up) { var passwordAgain = ...

  3. Java网络编程基础之TCP粘包拆包

    TCP是个"流"协议,所谓流,就是没有界限的一串数据.大家可以想象河里的流水,他们是连成一片的,其间并没有分界线.TCP底层并不了解上层业务数据的具体含义,他会根据TCP缓冲区的实 ...

  4. IO流（三）其他流与File类

    1:其他的流 1: DataOutputStream ;多了一些操作基本数据类型的功能 DataInputStream:读取文件. 用DataOutputStream流写进去的数据,就用DataInp ...

  5. IntelliJ IDEA 转移 C盘.IntelliJIdea 索引目录

    IntelliJ IDEA 索引目录默认路径是  C:\Users\用户\.IntelliJIdea 转移步骤 1. 将  C:\Users\用户\.IntelliJIdea 索引目录剪切到要移动到的 ...

  6. 将一个表的数据导入到另一个表的sql

    ALTER PROCEDURE [dbo].[usp_ea_Copy] ( @eaId int, @createdBy varchar(), @newEaId int output ) AS decl ...

  7. IOS渐变图层CAGradientLayer

    看支付宝蚂蚁积分,天气预报等好多APP都有圆形渐变效果,今天就试着玩了. 一.CAGradientLayer类中属性介绍 CAGradientLayer继承CALayer,主要有以下几个属性: 1.@ ...

  8. Firebird 安装多实例

    火鸟数据库的安装向导,默认不允许多实例. 但是不管出于什么原因,若想安装多实例,很简单. 1.先用安装文件,按照向导安装第一个实例. 2.安装后不要启动服务,根据需要配置好Firebird.conf. ...

  9. 从CentOS官网下载系统镜像详细教程

      很多新手小白鼠想学习CentOS系统,但是不知道镜像去哪里搞,随便去个第三方发现要么要注册,要么各种广告病毒,或者好不容易找到官网,点进去一看却一脸懵逼,不仅全英文,有些专业术语也不懂啊,不要担心 ...

  10. 二：Bootstrap-css组件

    Glyphicons 图标: span.glyphicon glyphicon-align-center 下拉菜单: div.dropdown/div.btn-group button[data-to ...