一、实现效果
绿(10秒)→黄(5秒)→红(10秒)→绿(10秒)…依次循环。
二、代码分析
首先编写html代码,使用CSS确定需要改变的div。其次编写JavaScript代码,通过修改背景颜色的方式,设置信号灯样式。最后实现红绿灯读秒,利用setInterval()和setTimeout()函数完成信号灯读秒的动态改变效果。
三、代码实现
1.编写HTML代码
<body>
<div class="trfc_lts1">
<div id="redLight" class="light"></div> <!-- 红灯 -->
<div id="yellowLight" class="light"></div> <!-- 黄灯 -->
<div id="greenLight" class="light"></div> <!-- 绿灯 -->