本文共 959 字，大约阅读时间需要 3 分钟。
<!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>转载地址：http://zkchj.baihongyu.com/