1. <!DOCTYPE html>
2. <html>
3. <head>
4. <meta charset="UTF-8">
5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
6. <meta http-equiv="X-UA-Compatible" content="ie=edge">
7. <title>window对象-1</title>
8. <style>
9.
10. </style>
11. </head>
12. <body>
13. <button onclick="stopAf()">停止动画</button>
14. <button onclick="recoverAf()">恢复动画</button>
15. <button onclick="resetAf()">重置动画</button>
16. <div></div>
17. <script>
18. // console.log(window.frames)
19.
20. // window.alert('提示框')
21.
22. // confirm('确认框')
23. // 有两个按钮 点击确定时返回true 点击取消时返回false
24.
25. // prompt('输入提示框','默认文字')
26. // 有两个按钮 点确定时返回的是输入文字
27. // 如果文本是空的 返回当前字符''
28. // 如果点击取消 返回null
29.
30. // alert confirm prompt 这三个框会阻断js执行
31. // 当框弹出时JS会暂停执行 这三个方法都是window对象的方法 window对象的方法可以省略'window'
32. // window.alert() 相当于 alert()
33.
34. // window.showModalDialog('https://www.baidu.com','_blank','width=200px,height=800px')
35. // window.showModalDialog() 已不赞成使用。请使用 window.open() 替代
36.
37. // var time = setTimeout(function(){
38. // alert('3s后执行')
39. // },3000)
40. // 延迟多少秒后执行
41. // 两个参数 第一个参数要执行的函数 第二个参数是间隔时间 单位毫秒
42. // clearTimeout(time)
43. // 可以清除延迟执行
44.
45. // var i = 0
46.
47. // var t = setInterval(function(){
48. // console.log('1s执行一次')
49. // i++
50. // if(i > 5){
51. // clearInterval(t)
52. // // 清除
53. // }
54. // },1000)
55. // 每隔指定的时长执行一次 不断执行 直到你清除它
56. // setInterval()的执行频率最好不要超过每秒60次
57.
58. // var a = 1
59. // var aa
60. // var func = function(){
61. // document.body.innerHTML = a++
62. // aa = requestAnimationFrame(func)
63. // }
64. // requestAnimationFrame(func)
65. // requestAnimationFrame()会将代码的执行和页面渲染在一块 因此特别适合用来做动画
66. // 它的频率等于页面渲染的频率
67. // '更新'或'重绘' 通常是每秒60次
68.
69. // setTimeout(function(){
70. // cancelAnimationFrame(aa)
71. // },5000);
72.
73. var div = document.querySelector('div')
74. var i = 1
75. var af
76. // 累加器
77. var adder = function(){
78. div.innerHTML = i
79. i++
80. af = requestAnimationFrame(adder)
81. // adder的下一次调用 当页面最小化时 不会执行 它会省电
82. }
83. // 这是adder的第一次调用 起到启动的作用
84. requestAnimationFrame(adder)
85.
86. // 停止动画
87. function stopAf(){
88. cancelAnimationFrame(af)
89. }
90. // 恢复动画
91. function recoverAf(){
92. requestAnimationFrame(adder)
93. }
94. // 重置动画
95. function resetAf(){
96. i = 0
97. div.innerHTML = 1
98. }
99. setTimeout(stopAf, 10000);
100. // requestAnimationFrame在现代浏览器中每秒60次
101. // setInterval 和 setTimeout()都是不准确的
102. </script>
103. </body>
104. </html>
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <meta charset="UTF-8">
5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
6. <meta http-equiv="X-UA-Compatible" content="ie=edge">
7. <title>window - 2</title>
8. <style>
9. div{
10. width: 300px;
11. height: 80px;
12. background-color: red;
13. color: white;
14. }
15. </style>
16. </head>
17. <body>
18. <div>点击盒子打开窗口</div>
19. <script>
20. var div = document.querySelector('div')
21. div.addEventListener('click',function(){
22. window.open('https://www.baidu.com','_blank','width=500px,height=400px')
23. })
24.
25. // window.top 最顶级的窗口
26. // window.parent 父窗口
27. // window.close() 关闭窗口 但是不能关闭非脚本打开的窗口
28. </script>
29. </body>
30. </html>