红绿灯+读秒——html+CSS+JavaScript实现

最新推荐文章于 2023-12-14 11:24:07 发布

DDD_duck

最新推荐文章于 2023-12-14 11:24:07 发布

阅读量4.2k

点赞数 2

文章标签： JavaScript 红绿灯倒计时 HTML CSS

本文链接：https://blog.csdn.net/qq_54108778/article/details/118061151

版权

一、实现效果

绿(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>       <!-- 绿灯 -->

最低0.47元/天解锁文章

DDD_duck

关注

2
点赞
踩
23

收藏

觉得还不错? 一键收藏
打赏
0
评论
红绿灯+读秒——html+CSS+JavaScript实现

目录一、实现效果二、代码分析三、代码实现1.编写HTML代码2.初始化3.实现红绿灯变化4.实现红绿灯倒计时5.CSS相关总结一、实现效果绿(10秒)→黄(5秒)→红(10秒)→绿(10秒)…依次循环。二、代码分析首先编写html代码，使用CSS确定需要改变的div。其次编写JavaScript代码，通过修改背景颜色的方式，设置信号灯样式。最后实现红绿灯读秒，利用setInterval()和setTimeout()函数...
复制链接

扫一扫