JavaScript basic learning BOM
<!DOCTYPE html>
<html lang="en">
<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>Document</title>
<script>
// window.onload = function() {
// var btn = document.querySelector('button');
// btn.addEventListener('click', function() {
// alert('点击我');
// })
// }
// window.onload = function() {
// alert(22);
// }
// 这样写 第二个弹窗事件会覆盖掉第一个 只会弹出22
window.addEventListener('load', function() {
var btn = document.querySelector('button');
btn.addEventListener('click', function() {
alert('点击我');
})
})
window.addEventListener('load', function() {
alert(22);
})
document.addEventListener('DOMContentLoaded', function() {
alert(33);
})
// load 等页面内容全部加载完毕，包含页面dom元素 图片 flash css 等等
// DOMContentLoaded 是DOM 加载完毕，不包含图片 falsh css 等就可以执行 加载速度比 load更快一些
</script>
</head>
<body>
<!-- 之前的script文件是要在元素下方才能执行的，加了onload事件，页面首先会加载其中的
文件才会去执行body当中的页面元素，我们script文件就能随意放位置 -->
<button>点击</button>
</body>
</html>
window resize event
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=devcie-width,initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
div {
height: 300px;
width: 300px;
background-color: pink;
}
</style>
</head>
<body>
<div>
</div>
<script>
var div = document.querySelector('div');
window.addEventListener('resize', function() {
console.log(window.innerWidth);
if (window.innerWidth <= 1000) {
div.style.display = 'none';
} else {
div.style.display = 'block';
}
})
</script>
</body>
</html>
setTimeout of timer
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=devcie-width,initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div>
</div>
<button>点击停止爆炸</button>
<script>
// window.setTimeout(回调函数,延时的时间) 单位：毫秒 如果不加默认为0
// 当延时时间过去时，才会执行我们这个回调函数
// 1 第一种写法
window.setTimeout(function() {
console.log('one-爆炸了');
}, 2000);
// 2. 第二种写法
function callback() {
console.log('two-爆炸了');
}
setTimeout(callback, 2000);
// 因为一个页面当中可能会有很多计时器，所以我们可以给计时器定义一个标识符
var time1 = setTimeout(callback, 5000);
var time2 = setTimeout(callback, 8000);
// 停止定时器 clearTimeout(timeoutId) 参数为定时器的标识符
var btn = document.querySelector('button');
btn.addEventListener('click', function() {
clearTimeout(time2);
})
</script>
</body>
</html>
setInterval of timer
<!DOCTYPE html>
<html lang="en">
<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>Document</title>
</head>
<body>
<script>
// 1. setInterval
// 语法规范： window.setInterval(调用函数, 延时时间);
setInterval(function() {
console.log('继续输出');
}, 1000);
// 2. setTimeout 延时时间到了，就去调用这个回调函数，只调用一次 就结束了这个定时器
// 3. setInterval 每隔这个延时时间，就去调用这个回调函数，会调用很多次，重复调用这个函数
</script>
</body>
</html>