一、计时器 setInterval
一旦开启,永久执行。
除非关闭程序,或者主动关闭计时器
setInterval( function() {
},1000)
第一个参数 计时器所执行的函数
第二个参数 计时器间隔时间
计时器的返回值:
通常叫它:计时器的id
大多数浏览器的计时器的id,都是从 1 开始自增
火狐等小部分浏览器,计时器的id 是从 2 开始自增
会随着页面中,计时器的数量,而自增
二、清除计时器 clearInterval(id)
根据计时器的id来清除指定计时器
小练习:一个盒子无限变大,点击盒子计时器停止
var w = 5;
var set1=setInterval (function () {
w++;
box.style.width = `${w}px`;
box.style.height = `${w}px`;
},100);
box.onclick = function () {
clearInterval(set1);
}
三、client 和 offset
1.client 元素内容区域的宽高
clientWidth;
clientHeight
元素 width/height +padding
注意!!!
client 不算 border 和 margin 大小
2.offset元素 所占位置 大小
offsetWidth
offsetHeight
元素 width/height + padding +border
注意!!!
offset 不算 margin距离
offsetTop;
offsetLeft;
在 定位的情况下
获取盒子距离 其做了相对定位的参照物的距离
上边 和 左边 的距离
获取屏幕宽度 window.innderWidth;
四、定时器
定时器
规定时间之后 执行 只执行一次
<script>
基本语法格式:
setTimeout(function () {
console.log(1);
}, 1000);
</script>