JavaScript_实现红绿灯倒计时效果

红绿灯倒计时

1.效果
绿灯亮(35秒)-黄灯亮(5秒)-红灯亮(30秒)-绿灯亮(35秒)无限循环,实现红绿灯倒计时效果。
2.代码解析
(1)编写HTML代码

 <div class="box">
      <div id="red"></div>
      <div id="yellow"></div>
      <div id="green"></div>
      <div class="count" id="count"></div>
    </div>

(2)编写盒子模型样式

<style>
    .box{
   width:300px;height:60px;padding:22px 30px;border:300px solid #ccc;border-radius:200px;margin:0 auto;}
    .box 
实现红绿灯倒计时显示在灯内部,可以使用HTML、CSS和JavaScript。 首先,需要创建一个包含三个圆形灯的HTML结构。每个灯都有一个内部圆形,用于显示倒计时。HTML代码如下: ```html <div class="traffic-light"> <div class="red"></div> <div class="yellow"></div> <div class="green"></div> </div> ``` 接着,使用CSS样式来定义灯的外观和位置。在这里,我们使用绝对定位来将内部圆形放置在灯的中心。CSS代码如下: ```css .traffic-light { position: relative; width: 100px; height: 250px; } .red, .yellow, .green { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 60px; height: 60px; border-radius: 50%; } .red { background-color: red; } .yellow { background-color: yellow; } .green { background-color: green; } ``` 最后,使用JavaScript实现倒计时功能。可以使用setInterval函数来定时更新内部圆形的文本内容。JavaScript代码如下: ```javascript var red = document.querySelector('.red'); var yellow = document.querySelector('.yellow'); var green = document.querySelector('.green'); function startTimer(element, time) { var interval = setInterval(function() { time--; element.innerText = time; if (time <= 0) { clearInterval(interval); } }, 1000); } startTimer(red, 10); startTimer(yellow, 5); startTimer(green, 15); ``` 在这个例子中,我们使用了startTimer函数来开始倒计时。该函数接受两个参数:一个元素和倒计时的时间。它使用setInterval函数每更新内部圆形的文本内容,直到倒计时时间到达0。在这个例子中,我们分别为红、黄、绿三个灯设置了不同的倒计时时间。 完整的代码示例: ```html <!DOCTYPE html> <html> <head> <title>红绿灯倒计时</title> <style> .traffic-light { position: relative; width: 100px; height: 250px; } .red, .yellow, .green { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 60px; height: 60px; border-radius: 50%; } .red { background-color: red; } .yellow { background-color: yellow; } .green { background-color: green; } </style> </head> <body> <div class="traffic-light"> <div class="red"></div> <div class="yellow"></div> <div class="green"></div> </div> <script> var red = document.querySelector('.red'); var yellow = document.querySelector('.yellow'); var green = document.querySelector('.green'); function startTimer(element, time) { var interval = setInterval(function() { time--; element.innerText = time; if (time <= 0) { clearInterval(interval); } }, 1000); } startTimer(red, 10); startTimer(yellow, 5); startTimer(green, 15); </script> </body> </html> ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值