如何用html+css+javascript写一个简易红绿灯

 时间:2024-10-13 02:50:32

1、新建一个.html文件,用记事本打开。

如何用html+css+javascript写一个简易红绿灯

2、在记事本中复制添加以下内容并保存:<html> <head>挢旗扦渌;<title>红绿灯</title><style>#div1 div{width:200px;height:200px;background:pink;border:2px solid blue;float:left;margin:10px;border-radius:100%;}#div1{ width:680px; height:220px; background:pink; border:2px solid black; margin-left:25%;}</style><script> window.onload = function(){var divs = document.getElementById('div1').getElementsByTagName('div');var index = 0;var color = ['red','yellow','green'];setInterval(f1,1000);f1();function f1(){ for(var i = 0; i < 3; i++){ divs[i].style.background = 'gray'; } divs[index].style.background = color[index]; index == 2 ? index = 0 : index++;} }</script> </head> <body><h1 style="text-align:center;margin-top:10%;">红绿灯</h1><div id="div1"><div></div><div></div><div></div></div> </body></html>

如何用html+css+javascript写一个简易红绿灯

4、效果截图:

如何用html+css+javascript写一个简易红绿灯如何用html+css+javascript写一个简易红绿灯
  • TIM怎么关闭锁屏显示消息弹框
  • Inkscape如何快速创建圆角矩形
  • 超星学习通最新版怎么下载安装
  • 如何在PPT中插入音频文件,如何播放音频文件
  • ppt怎么设置单击翻页
  • 热门搜索
    六盘水旅游景点大全 宁波东钱湖旅游学校 成都 旅游 上海国际旅游度假区 成都旅游局 虎跳峡旅游 阿克苏旅游 昆明旅游路线 法国旅游攻略 克什克腾旗旅游攻略