JavaScript window对象 - 会coding的HAM

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>window对象-1</title>
<style>
</style>
</head>
<body>
<button onclick="stopAf()">停止动画</button>
<button onclick="recoverAf()">恢复动画</button>
<button onclick="resetAf()">重置动画</button>
<div></div>
<script>
// console.log(window.frames)
// window.alert('提示框')
// confirm('确认框')
// 有两个按钮点击确定时返回true 点击取消时返回false
// prompt('输入提示框','默认文字')
// 有两个按钮点确定时返回的是输入文字
// 如果文本是空的返回当前字符''
// 如果点击取消返回null
// alert confirm prompt 这三个框会阻断js执行
// 当框弹出时JS会暂停执行这三个方法都是window对象的方法 window对象的方法可以省略'window'
// window.alert() 相当于 alert()
// window.showModalDialog('https://www.baidu.com','_blank','width=200px,height=800px')
// window.showModalDialog() 已不赞成使用。请使用 window.open() 替代
// var time = setTimeout(function(){
// alert('3s后执行')
// },3000)
// 延迟多少秒后执行
// 两个参数第一个参数要执行的函数第二个参数是间隔时间单位毫秒
// clearTimeout(time)
// 可以清除延迟执行
// var i = 0
// var t = setInterval(function(){
// console.log('1s执行一次')
// i++
// if(i > 5){
// clearInterval(t)
// // 清除
// }
// },1000)
// 每隔指定的时长执行一次不断执行直到你清除它
// setInterval()的执行频率最好不要超过每秒60次
// var a = 1
// var aa
// var func = function(){
// document.body.innerHTML = a++
// aa = requestAnimationFrame(func)
// }
// requestAnimationFrame(func)
// requestAnimationFrame()会将代码的执行和页面渲染在一块因此特别适合用来做动画
// 它的频率等于页面渲染的频率
// '更新'或'重绘' 通常是每秒60次
// setTimeout(function(){
// cancelAnimationFrame(aa)
// },5000);
var div = document.querySelector('div')
var i = 1
var af
// 累加器
var adder = function(){
div.innerHTML = i
i++
af = requestAnimationFrame(adder)
// adder的下一次调用当页面最小化时不会执行它会省电
}
// 这是adder的第一次调用起到启动的作用
requestAnimationFrame(adder)
// 停止动画
function stopAf(){
cancelAnimationFrame(af)
}
// 恢复动画
function recoverAf(){
requestAnimationFrame(adder)
}
// 重置动画
function resetAf(){
i = 0
div.innerHTML = 1
}
setTimeout(stopAf, 10000);
// requestAnimationFrame在现代浏览器中每秒60次
// setInterval 和 setTimeout()都是不准确的
</script>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>window - 2</title>
<style>
div{
width: 300px;
height: 80px;
background-color: red;
color: white;
}
</style>
</head>
<body>
<div>点击盒子打开窗口</div>
<script>
var div = document.querySelector('div')
div.addEventListener('click',function(){
window.open('https://www.baidu.com','_blank','width=500px,height=400px')
})
// window.top 最顶级的窗口
// window.parent 父窗口
// window.close() 关闭窗口但是不能关闭非脚本打开的窗口
</script>
</body>
</html>

发送评论编辑评论

发送评论 编辑评论

推荐文章

发送评论编辑评论