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. 【es6】变量解构赋值

    1.数组解构赋值 let [a,b,c]=[1,2,3];//数组解构赋值,注意:左右两边格式需一致 let [a,b]=[1,2,3];//不完全解构,取位置靠前的值 let [a=1,b]=[un ...

  2. unity代码创建草和模拟风的效果

    void Start() { Test4(); } //草 private Vector3[] grassArray = new Vector3[7]; private GameObject gras ...

  3. [作业] Python入门基础---购物车小程序

    1.购物车小程序: 1.1用户输入工资取60% 1.2打印输出商品菜单 1.3由用户输入数字选择 #__author:Mifen #date: 2018/11/27 # 购物车程序 #把工资作为账户的 ...

  4. 去除inline-block之间的空白

    做一个水平排列的导航通常有以下几种布局: 1.给一个浮动. 2.设置display为inline. 3.设置display为inline-block. 但要追求代码量最少的话,设置为inline元素或 ...

  5. 《Think Python》第17章学习笔记

    目录 <Think Python>第17章学习笔记 17.1 面向对象的特性(Object-oriented features) 17.2 打印对象(Printing objects) 1 ...

  6. python之virtualenv的简单使用

    什么是virtualenv? virtualenv可以创建独立Python开发环境,比如当前的全局开发环境是python3.6,现在我们有一个项目需要使用django1.3,另一个项目需要使用djan ...

  7. 学会了ES6，就不会写出那样的代码

    用let不用var ES6之前我们用var声明一个变量,但是它有很多弊病: 因为没有块级作用域,很容易声明全局变量 变量提升 可以重复声明 还记得这道面试题吗? var a = []; for (va ...

  8. WordPress主题开发：主题初始化

    在最简单的情况下,一个WordPress主题由两个文件构成: index.php ------------------主模版 style.css  -------------------主样式表(注意 ...

  9. ExtJs定时消息提示框，类似于QQ右下角提示，ExtJs如何定时向后台发出两个请求并刷新数据实例

    原文出自:https://blog.csdn.net/seesun2012 思路: 1.加载页面,加载Ext.TaskManager.start()方法: 2.执行定时器方法: 3.获取地址向后台发送 ...

  10. 联想G480安装固态硬盘过程

    联想G480安装固态硬盘过程  百度上面图文并茂: https://jingyan.baidu.com/article/e2284b2b68eaf6e2e6118de1.html