分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 技术分享

js:自动亮起100盏灯

发布时间:2023-09-06 02:28责任编辑:傅花花关键词:js

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

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved