要求
龙安网站制作公司哪家好，找创新互联！从网页设计、网站建设、微信开发、APP开发、成都响应式网站建设公司等网站项目制作，到程序开发，运营维护。创新互联2013年至今到现在10年的时间，我们拥有了丰富的建站经验和运维经验，来保证我们的工作的顺利进行。专注于网站建设就选创新互联。
html 实现如下：
定义一个空类，之后再js中操作对应的类名即可实现相关的效果。
CSS实现如下：
ul {
position: absolute;
width: 200px;
height: 200px;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
/*画3个圆代表红绿灯*/
ul >li {
width: 40px;
height: 40px;
border-radius:50%;
opacity: 0.2;
display: inline-block;
}
/*执行时改变透明度*/
ul.red >#red,
ul.green >#green,
ul.yellow >#yellow{
opacity: 1.0;
}
/*红绿灯的三个颜色*/
#red {background: red;}
#yellow {background: yellow;}
#green {background: green;}javascript原理：
promise函数为一个异步操作函数，在函数运行结束时可以使用then()方法。我们再在promise函数内部设置延迟执行即可实现。
js 代码如下：
function timeout(timer){
return function(){
return new Promise(function(resolve,reject){
setTimeout(resolve,timer)
})
}
}
var green = timeout(3000);
var yellow = timeout(4000);
var red = timeout(5000);
var traffic = document.getElementById("traffic");
(function restart(){
'use strict' //严格模式
console.log("绿灯"+new Date().getSeconds()) //绿灯执行三秒
traffic.className = 'green';
green()
.then(function(){
console.log("黄灯"+new Date().getSeconds()) //黄灯执行四秒
traffic.className = 'yellow';
return yellow();
})
.then(function(){
console.log("红灯"+new Date().getSeconds()) //红灯执行五秒
traffic.className = 'red';
return red();
}).then(function(){
restart()
})
})();Demo 请 点击这里!
ps:下面看一个Promise用法例子
注意：要想then方法能链式的执行下去，必须返回Promise对象！！！
'use strict';
function async(value) {
return new Promise(function(resolve, reject) {
var ms = Math.round(Math.random() * 1000);
setTimeout(function() {
console.log('waiting ' + ms + 'ms');
// 等待ms毫秒
resolve(value + ms);
}, ms);
});
}
// 每次执行随机等待n毫秒，结果统计总毫秒数
async(0)
.then(async)
.then(async)
.then(async)
.then(async)
.then(function(value) {
console.log('------total wait:' + value + 'ms');
});
////////////////////////////////////////////////////////////
function async1(value) {
return new Promise(function(resolve, reject) {
resolve(value + 1);
});
}
function async2(value) {
// return new Promise(function(resolve, reject) {
// resolve(value + 2);
// });
// 等价与上面写法
return Promise.resolve(value + 2);
}
function async3(value) {
return new Promise(function(resolve, reject) {
resolve(value + 3);
});
}
async1(100).then(async2).then(async3).then(function(value) {
console.log('------' + value);
});
/////////////////////////////////////////////////////////////////
function say() {
var value = 'what';
return Promise.resolve(value);
}
say().then(function(value) {
value = value + ' are';
return Promise.resolve(value);
}).then(function(value) {
value = value + ' you';
return Promise.resolve(value);
}).then(function(value) {
value = value + ' doing';
return Promise.resolve(value);
//return Promise.reject('error, exit'); // 中途退出
}).then(function(value) {
value = value + ' now!';
return Promise.resolve(value);
}).then(function(value) {
console.log('------' + value);
}).catch(function(error) {
console.log('------' + error);
});
Ball move
总结
以上所述是小编给大家介绍的JS 中使用Promise 实现红绿灯实例代码(demo)，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对创新互联网站的支持！