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盏灯
原文地址:https://www.cnblogs.com/25miao/p/10205426.html