example_of_bom_1.html 1003 B

123456789101112131415161718192021222324252627282930313233
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>BOM - 延迟跳转</title>
  6. </head>
  7. <body>
  8. <h3><span id="countdown">5</span>秒钟以后自动跳转到百度</h3>
  9. <button id="cancelBtn">取消跳转</button>
  10. <button id="openBtn">打开百度</button>
  11. <script>
  12. // alert(localStorage.sport)
  13. // alert(localStorage.fruit)
  14. // localStorage.sport = '乒乓球'
  15. // localStorage.fruit = '榴莲'
  16. const openBtn = document.getElementById('openBtn')
  17. openBtn.addEventListener('click', () => print())
  18. const cancelBtn = document.getElementById('cancelBtn')
  19. cancelBtn.addEventListener('click', () => clearInterval(timerId))
  20. const span = document.getElementById('countdown')
  21. var counter = 5
  22. var timerId = setInterval(function () {
  23. counter -= 1
  24. if (counter == 0) {
  25. // location对象代表了浏览器的地址栏
  26. location.href = 'http://www.baidu.com'
  27. } else {
  28. span.textContent = counter
  29. }
  30. }, 1000)
  31. </script>
  32. </body>
  33. </html>