定时器setInterval
每隔一段时间执行某个操作一次
setInterval()
方法可按照指定的周期(以毫秒计)来调用函数- 执行无数次,直到 停止计时器 或 关闭页面
- 语法:
let timerID = setInterval( 被执行的函数 ,间隔毫秒数 )
- 声明
- 1.匿名函数的方式
setInterval(
function () {
console.log('去哪');
}, 1000
// 1000是毫秒,也就是1秒钟
)
2.利用封装函数的方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button id="love">你爱我吗?</button>
<script>
// 定时器:每隔一段时间执行某个操作一次:闹钟
let loveBtn = document.getElementById('love');
let timeID;
loveBtn.onclick = function () {
// 声明定时器
// 1.利用匿名函数的方式来声明
setInterval(
function () {
console.log('去哪');
}, 1000
// 1000是毫秒,也就是1秒钟
)
// 2.利用封装函数的方法
// timeID 是定时器的编码
// 如果不想定时器加速,匿名每次设置定时器之前,先清空定时器编码
clearInterval(timeID);
timeID = setInterval(love, 1000);
}
function love() {
alert('弹出');
}
</script>
</body>
</html>
- timeID:就是启动计算器的id
- 启动:let 定时器id = setTimeout( 被执行的函数 ,倒数毫秒数 )
- clearInterval(timeID):关闭定时器
倒计时计时器setTimeout
<body>
<button id="boom">
开始
</button>
<div>60</div>
<script>
let boom = document.getElementById('boom');
let timeID;
let time = document.getElementsByTagName('div')[0];
let index = 60;
boom.onclick = function () {
// 1.用匿名函数
// timeID =setTimeout(
// function(){
// console.log('爆炸');
// },3000
// )
clearTimeout(timeID);
timeID = setTimeout(boomEgg, 60000);
time.innerHTML = index;
}
function boomEgg() {
console.log('炸');
index--;
}
</script>
</body>
offset家族
- style.height 和 style.width 获取的是
行内样式表中
的 宽和高,行内没有获得的是undefined - 真实的 宽度和 高度
offsetHeigth/offsetWidth
- offsetHeigth = heigth + pading * 2 + border * 2
- offsetWidth = width + pading * 2 + border * 2
- 真实的 left 和 top :
offsetLeft / offsetTop
- 元素左上角 原点 距离 父容器 左上角原点的 真实距离
- 定位父元素
offsetParent
- 获取的是 最近的定位 父元素
- 特点:
- 不带单位
- 数值类型
- 只能读取,不能修改 – 如果要修改 就用 行内 样式表 修改 dom.style
案例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#box {
width: 120px;
height: 120px;
background-color: red;
position: absolute;
left: 10px;
}
</style>
</head>
<body>
<button id="to400">到400位置</button>
<button id="to800">到800位置</button>
<button id="to0">到0</button>
<hr>
<div id="box"></div>
<script>
// 1.获得需要的元素
let to400 = document.getElementById('to400');
let to800 = document.getElementById('to800');
let box = document.getElementById('box');
let to0 = document.getElementById('to0');
to0.onclick = function () {
moveAnimation(box, 0);
}
to400.onclick = function () {
moveAnimation(box, 400);
}
to800.onclick = function () {
moveAnimation(box, 800);
}
// 2.封装动画函数
function moveAnimation(elm, target) {
// 3.清空定时器
clearInterval(elm.timeID);
// 4.获得当前元素的位置
let elmLeft = elm.offsetLeft;
// 5.设置步长
// 如果是往右走,那么步长为正数
// 如果是往左走,那么步长为负数
// 还没有到终点,那就继续走,就是正数
// 如果已经超过终点,那就需要回头,就是负数
// 目标 当前
// target - elmLeft > 0,代表你还没到终点,继续走,正数
// target - elmLeft < 0,代表你已经超过终点,往回走,负数
let step = (target - elmLeft) > 0 ? 2 : -2;
// 6.设置定时器
elm.timeID = setInterval(function () {
elmLeft += step;
// 7.判断盒子需不需要继续移动
// 如果剩余距离大于步长,那么继续走
// 如果剩余距离小于步长,那么写死终点,并停止定时器
// 剩余距离:目标:-当前-->Math.abs(step)(target-elmLeft)
if (Math.abs(target - elmLeft) > Math.abs(step)) {
elm.style.left = elmLeft + 'px';
} else {
// 如果剩余距离小于步长,那么写死终点,并停止定时器
elm.style.left = target + 'px';
clearInterval(elm.timeID);
}
}, 5);
}
</script>
</body>
</html>