1.BOM和DOM
DOM 文档,html的元素
BOM 浏览器,浏览器提供的各种api
2.超时定时器 setTimeout
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// 超时定时器
// setTimeout(回调函数,事件) 时间是毫秒
setTimeout(function () {
console.log('三秒后执行');
}, 3000)
// 给定时器起一个名字
var timeoutId = setTimeout(function () {
console.log('五秒后执行');
}, 5000)
</script>
</body>
</html>
3.清除超时定时器 clearTimeout
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
var timeoutId = setTimeout(function () {
console.log('五秒后执行');
}, 5000)
// 清除超时定时器
clearTimeout(timeoutId);
</script>
</body>
</html>
4.间歇定时器 setInterval
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// 间歇定时器,每隔多长时间执行一次
// setIntervar(回调函数,时间) 时间是毫秒
setInterval(function () {
console.log('每隔三秒执行一次');
}, 3000)
var intervalId = setInterval(function () {
console.log('每隔一秒执行一次');
}, 1000)
</script>
</body>
</html>
5.清除间歇定时器 clearInterval
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
var intervalId = setInterval(function () {
console.log('每隔一秒执行一次');
}, 1000)
// clearsetInterval() 清除间歇定时器
clearInterval(intervalId);
</script>
</body>
</html>
6.同步时间案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div></div>
<script>
// 获取当前时间
// console.log(now);
// //获取国庆时间
// var nat = new Date('2023-10-01 00:00:00');
// console.log(nat);
// // 时间差
// var time = nat.valueOf() - now.getTime();
// console.log(time);
function nowTime() {
var now = new Date();
var year = now.getFullYear();
var month = now.getMonth() + 1;
var day = now.getDate();
var week = now.getDay();
var hour = now.getHours();
var min = now.getMinutes();
var os = now.getSeconds();
var arr = ['日', '一', '二', '三', '四', '五', '六'];
var trueWeek = arr[week];
function fun(a) {
if (a < 10) {
a = '0' + a;
}
return a;
}
hour = fun(hour);
min = fun(min);
os = fun(os);
var time = year + '年' + month + '月' + day + '日' + ' 周' + trueWeek + ' ' + hour + ':' + min + ':' + os;
return time;
}
var box = document.getElementsByTagName('div')[0];
box.innerHTML = nowTime();
// 间歇定时器
var intervalId = setInterval(function () {
box.innerHTML = nowTime();
}, 1000)
</script>
</body>
</html>
7.秒杀案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<input type="botton" value="xxx秒后开抢" disabled>
<script>
// 获取按钮节点
var btn = document.getElementsByTagName('input')[0];
var timeout = 10;
// 间歇定时器
var timeId1 = setInterval(function () {
timeout--;
btn.value = timeout + "秒后开抢";
}, 1000);
// 超时定时器
var timeId2 = setTimeout(function () {
btn.removeAttribute('disabled');
btn.value = '立即开抢';
clearInterval(timeId1);
}, timeout * 1000);
</script>
</body>
</html>
8.同步和异步
js 单线程,从上到下挨个执行
分为同步代码 异步代码
js会先执行同步代码,遇到异步代码,则会放到异步队列当中,等待同步代码全部执行完毕,
再执行异步队列中的代码(在异步队列中,先进入队列的先执行)
9.匀速动画案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.father {
width: 1200px;
height: 800px;
border: 1px solid red;
position: relative;
margin: 0 auto;
}
.son {
width: 150px;
height: 150px;
background-color: pink;
position: absolute;
top: 0px;
left: 0px;
}
</style>
</head>
<body>
<div>
<input type="button" name="" id="" value="向右移动" class="right">
<input type="button" name="" id="" value="向左移动" class="left">
<input type="button" name="" id="" value="向下移动" class="bot">
<input type="button" name="" id="" value="向上移动" class="top">
</div>
<div class="father">
<div class="son"></div>
</div>
<script>
// 获取按钮节点
var right = document.getElementsByClassName('right')[0];
var left = document.getElementsByClassName('left')[0];
var bot = document.getElementsByClassName('bot')[0];
var _top = document.getElementsByClassName('top')[0];
// 获取大盒子节点
var father = document.getElementsByClassName('father')[0];
// 获取小盒子节点
var son = document.getElementsByClassName('son')[0];
var timeM;
right.onclick = function () {
clearInterval(timeM);
timeM = setInterval(function () {
if (son.offsetLeft >= father.clientWidth - son.offsetWidth) {
// son.style.left = father.clientWidth - son.clientWidth;
clearInterval(timeM);
} else {
son.style.left = son.offsetLeft + 10 + 'px';
}
}, 20);
}
left.onclick = function () {
clearInterval(timeM);
timeM = setInterval(function () {
if (son.offsetLeft <= 0) {
clearInterval(timeM);
} else {
son.style.left = son.offsetLeft - 10 + 'px';
}
}, 20)
}
bot.onclick = function () {
clearInterval(timeM);
timeM = setInterval(function () {
if (son.offsetTop >= father.clientHeight - son.clientHeight) {
// son.style.left = father.clientWidth - son.clientWidth;
clearInterval(timeM);
} else {
son.style.top = son.offsetTop + 10 + 'px';
}
}, 20);
}
_top.onclick = function () {
clearInterval(timeM);
timeM = setInterval(function () {
if (son.offsetTop <= 0) {
clearInterval(timeM);
} else {
son.style.top = son.offsetTop - 10 + 'px';
}
}, 20)
}
</script>
</body>
</html>