html+css 实现红绿灯效果

声明一个函数light，接收时间、颜色、当前标签三个参数，函数中获取当前标签并改变其背景颜色赋值，返回promise，成功执行一个延时器，延时器中执行promise成功的回调
声明另一个函数step，并执行 Promise.resolve().then方法，方法中分别获取三个灯的标签，并未当前标签背景颜色设置为白色，返回 light(时间,颜色, 当前标签);
执行 step 函数

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title></head><body><div style="display: flex"><divstyle="padding: 10px 15px;background-color: black;border: 1px solid #666;border-radius: 15px;"><divclass="redbox"style="width: 100px;height: 100px;border: 1px solid #fff;background: #fff;border-radius: 50%;"></div><divstyle="width: 100px;height: 100px;border: 1px solid #fff;background: #fff;border-radius: 50%;"></div><divstyle="width: 100px;height: 100px;border: 1px solid #fff;background: #fff;border-radius: 50%;"></div></div><divstyle="padding: 10px 15px;background-color: black;border: 1px solid #666;border-radius: 15px;"><divstyle="width: 100px;height: 100px;border: 1px solid #fff;background: #fff;border-radius: 50%;"></div><divstyle="width: 100px;height: 100px;border: 1px solid #fff;background: #fff;border-radius: 50%;"class="greenbox"></div><divstyle="width: 100px;height: 100px;border: 1px solid #fff;background: #fff;border-radius: 50%;"></div></div><divstyle="padding: 10px 15px;background-color: black;border: 1px solid #666;border-radius: 15px;"><divstyle="width: 100px;height: 100px;border: 1px solid #fff;background: #fff;border-radius: 50%;"></div><divstyle="width: 100px;height: 100px;border: 1px solid #fff;background: #fff;border-radius: 50%;"></div><divstyle="width: 100px;height: 100px;border: 1px solid #fff;background: #fff;border-radius: 50%;"class="yellowbox"></div></div></div><script>let light = function (timmer, color, box) {console.log(box);let divbox = document.querySelector("." + box);divbox.style.backgroundColor = color;return new Promise(function (resolve, reject) {setTimeout(function () {resolve();}, timmer);});};let step = function () {Promise.resolve().then(function () {let divbox = document.querySelector("." + "yellowbox");divbox.style.backgroundColor = "#fff";return light(3000, "red", "redbox");}).then(function () {let divbox = document.querySelector("." + "redbox");divbox.style.backgroundColor = "#fff";return light(2000, "green", "greenbox");}).then(function () {let divbox = document.querySelector("." + "greenbox");divbox.style.backgroundColor = "#fff";return light(1000, "yellow", "yellowbox");}).then(function () {step();});};step();</script></body>
</html>

html+css 实现红绿灯效果相关推荐

HTML中 css红绿黄灯,纯CSS实现红绿灯效果(面试常见)
先看题,别看答案试下吧 ~_~ 1.下面的代码输出的内容是什么? function O(name){ this.name=name||'world'; } O.prototype.hello=func ...
html css鼠标手型效果
html css鼠标手型效果 style="cursor:pointer" 转载于:https://blog.51cto.com/chengang/1288597
纯 CSS 实现波浪效果！
一直以来,使用纯 CSS 实现波浪效果都是十分困难的. 因为实现波浪的曲线需要借助贝塞尔曲线. 而使用纯 CSS 的方式,实现贝塞尔曲线,额,暂时是没有很好的方法. 当然,借助其他力量(SVG.CAN ...
C#实现winform仿div+css半透明遮罩效果
本文实现在winform项目实现网页div+css关透明效果,挺帅的,在网页中要实现div的半透明遮罩层效果不难,在winform项目就不是这么容易了,下面我们来看下效果图先: 正常时: 文章来自 ...
php鼠标经过显示文本,CSS_HTML和CSS做网页实例教程:鼠标滑过文字改变，关于HTML+CSS的实例效果很多， - phpStudy...
关于HTML+CSS的实例效果很多,下面举出常用的几列,供新手们学习参考. html+CSS实例效果(1):鼠标滑过改变文字鼠标经过变换文字 #Menu{ width:500px; margin:5 ...
html 悬浮阴影,css实现悬浮效果的阴影的方法示例
本文介绍了css实现悬浮效果的阴影的方法示例,分享给大家,具体如下: 要实现的效果图: 实现的代码: -webkit-box-shadow:0px 3px 3px #c8c8c8 ; -moz-box ...
制作css开关,纯css实现开关效果
大家好,我又来了,这次给大家表演使用纯css实现开关效果首先是构思我们使用标签来实现这个效果. checkbox的选中.未选中的特性,刚好对应开关的打开.关闭 on:打开 off:关闭未选中,则 ...
html 星空效果,使用css实现星空效果！
css实现星空效果 html, body { height: 100%; overflow: hidden; } body { width: 100%; height:100%; background ...
《javaScript100例|03》自写javaScript+CSS轮显效果
目录效果图代码示例源码地址:自写Js+CSS轮显效果.rar-互联网文档类资源-CSDN下载https://download.csdn.net/download/weixin_41937552/ ...

html+css 实现红绿灯效果

html+css 实现红绿灯效果相关推荐

最新文章

热门文章