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>

 

相关文章