JavaScript window对象

黄良钵

分类: 程序开发 116 0

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

作者简介:黄良钵

打赏

博客站长,前端开发工程师

共 0 条评论关于 “JavaScript window对象”

Loading...