<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{padding: 0;margin: 0;}
ul{margin: 200px;}
li{list-style: none;width: 80px;height: 80px;border-radius: 50%;float: left;margin:20px;opacity: .1;}
#red{background: red;}
#green{background: green;}
#yellow{background: yellow;}
.red #red,.green #green,.yellow #yellow{
opacity:1;
}
</style>
</head>
<body>
<ul id="list" class="">
<li id="red"></li>
<li id="yellow"></li>
<li id="green"></li>
</ul>
<script type="text/javascript">
let oList=document.getElementById("list");
let oLi=oList.children;
oList.className="red";
function apromise(t){
return new Promise(function(resolve,reject){
setTimeout(resolve,t)
})
}
function stat(){
apromise(3000).then(function(){
oList.className="yellow";
return apromise(1000);
}).then(function(){
oList.className="green";
return apromise(2000);
}).then(function(){
oList.className="red";
stat();
})
}
stat();
</script>
</body>
</html>
原生js实现红绿灯效果
猜你喜欢
转载自blog.csdn.net/namechenfl/article/details/81408990
今日推荐
周排行