3.window.html 1.4 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344
  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. </head>
  8. <body>
  9. <button class="btn1">这是一个开始按钮</button>
  10. <button class="btn2">这是一个结束按钮</button>
  11. <button id="btn3">这是一个新标签</button>
  12. <button id="btn4">这是一个旧标签</button>
  13. <script>
  14. // window.alert("你好") 警告框
  15. // window.prompt("请输入") 提示框
  16. // window.confirm("你好") 确认框
  17. // 通过css样式获取元素标签
  18. var timer;
  19. var btn1 = document.querySelector(".btn1")
  20. var btn2 = document.querySelector(".btn2")
  21. btn1.onclick = function() {
  22. // 定时器 规定时间内执行的函数
  23. timer = setInterval(function() {
  24. console.log("开始了")
  25. },1000)
  26. }
  27. btn2.onclick = function() {
  28. clearInterval(timer)
  29. }
  30. var btn3 = document.getElementById("btn3")
  31. var btn4 = document.getElementById("btn4")
  32. var timer1;
  33. btn3.onclick = function() {
  34. timer1 = // 延时器 延迟一定时间后执行 只执行一次
  35. setTimeout(function(){
  36. console.log("你好")
  37. },4000)
  38. }
  39. btn4.onclick = function() {
  40. clearTimeout(timer1)
  41. }
  42. </script>
  43. </body>
  44. </html>