1. <!DOCTYPE html>
    2. <html lang="en" >
    3. <head>
    4. <meta charset="UTF-8">
    5. <title>红绿灯</title>
    7. </head>
    8. <body>
    9.   <div id="div">
    11.   </div>
    12. </body>
    13. </html>
    14. <style>
    15.   div{
    16.     border:1px solid;
    17.     width: 200px;
    18.     height: 200px;
    19.     border-radius:50%
    20.   }
    21. </style>
    22. <script>
    23. function delay(duration) {
    24.   return new Promise((relove,reject)=>{
    25.     setTimeout(relove,duration)
    26.   })
    27. }
    28. async  function changeBg(color,duration){
    29.     document.getElementById("div").style.background = color
    30.     await delay(duration)
    31.   }
    32. async function  goChange(){
    33.   await changeBg('green',3000)
    34.   await changeBg('red',1000)
    35.   await changeBg('yellow',3000)
    37.  }
    38.  goChange()
    40. </script>