10
0

练习1_倒计时.html 1.1 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849
  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: #aaa;
  12. box-shadow: 0 0 10px rgba(0,0,0,.5);
  13. border-radius: 10px;
  14. position: fixed;
  15. top:50%;
  16. left:50%;
  17. margin-left: -150px;
  18. margin-top: -150px;
  19. text-align: center;
  20. line-height: 300px;
  21. font-size: 40px;
  22. font-weight: 500;
  23. }
  24. </style>
  25. </head>
  26. <body>
  27. <div class="box">
  28. <span>10</span>
  29. </div>
  30. <script>
  31. var oSpan = document.getElementsByTagName("span");
  32. var num = 10;
  33. var setObj = setInterval(function(){
  34. if(num == 0){
  35. clearInterval(setObj);
  36. }
  37. oSpan[0].innerText = num--;
  38. },1000);
  39. // oSpan[0].innerText = "hello world";
  40. // var arr = [1,2,3,4]
  41. // arr[0] = "a"
  42. </script>
  43. </body>
  44. </html>