练习1_倒计时.html 1016 B

123456789101112131415161718192021222324252627282930313233343536373839404142
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <title>Document</title>
  7. <style>
  8. .box{
  9. width: 300px;
  10. height: 300px;
  11. background-color: #999;;
  12. position: fixed;
  13. top: 50%;
  14. left: 50%;
  15. margin-top: -150px;
  16. margin-left: -150px;
  17. color: #fff;
  18. font-weight: bold;
  19. font-size: 50px;
  20. text-align: center;
  21. line-height: 300px;
  22. }
  23. </style>
  24. </head>
  25. <body>
  26. <div class="box">
  27. <span class="num">10</span>
  28. </div>
  29. <script>
  30. var i = 10;
  31. var oNum = document.getElementsByClassName("num")[0];
  32. var timer = setInterval(function(){
  33. i--;
  34. console.log(i);
  35. oNum.innerText = i;
  36. if(i==0){
  37. clearInterval(timer);
  38. }
  39. },1000)
  40. </script>
  41. </body>
  42. </html>