10
0

8_BOM定时函数取消.html 1.3 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253
  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. box-shadow: 0 0 10px rgba(0,0,0.5);
  12. background-color: #aaa;
  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. }
  21. .btn{
  22. width: 100px;
  23. height: 40px;
  24. line-height: 40px;
  25. margin:0 auto;
  26. border:1px solid #666;
  27. cursor: pointer;
  28. }
  29. .box h1{
  30. margin-top: 100px;
  31. }
  32. </style>
  33. </head>
  34. <body>
  35. <div class="box">
  36. <h1>100</h1>
  37. <div class="btn">开始</div>
  38. </div>
  39. <script>
  40. var oH1 = document.getElementsByTagName("h1")[0];
  41. var oBtn = document.getElementsByClassName("btn")[0];
  42. oBtn.onclick = function(){
  43. console.log("本次timer:"+timer);
  44. var timer = setInterval(function(){
  45. console.log(timer);
  46. oH1.innerText--
  47. },1000)
  48. }
  49. </script>
  50. </body>
  51. </html>