页面滚动距离
window.addEventListener('scroll',()=>{
document.documentElement.scrollTop = 0; //使html超过window的顶部距离为0；多数使用返回顶部
})
const div = document.querySelector('div');
div.addEventListener('scroll',()={
div.scrollLeft = 0; //使html超过window的左距离为0
})
const backTop = document.querySelector('#backTop')
backTop.addEventListener('click', ()=>{
document.documentElement.scrollTop(0,0); //语法：window.acrollTo(x,y) 指定html超过window的距离
})
页面尺寸宽高
const div = document.querySelector('div');
//宽高= 内容 + padding 主要用来获取页面的宽高
div.clientWidth;
div.clientHeight;
//宽高 = 内容 + padding +border 主要用来获取元素的宽高
div.offsetWidth;
div.offsetHeight;
<style>
div {
position: absolute;
top: 20px;
left: 20px;
}
</style>
<body>
<div></div>
</body>
const div = document.querySelector('div');
console.log(div.offsetLeft); //输出该元素到页面左侧的距离
console.log(div.offsetTop); //输出到该元素到页面顶部的距离
//如果元素进行了绝对定位，则输出绝对定位值；当页面没有相对定位时，则输出该元素到页面的距离
console.log(div.offsetLeft) //输出left值,20
donsole.log(div.offsetTop) //输出top值，20
//获取元素的信息
元素.getBoundingClientRect(); //获取的是该元素的所有距离信息，以对象返回
日期对象
//创建时间对象
//实例化对象 new objName
const date = new Date(); //获取当前时间
const date1 = new Date(arguments); //指定时间，可以传字符串或者数字
console.log(date.toLocaleString()); //将时间转换为本地时间
console.log(date.getFullYear()); //Year
console.log(date.getMonth()); // Month 0-11
console.log(date.getDate()); //一个月内的第几天,月份不同天数不同
console.log(date.getDay()); //一周内的第几天 0-6
console.log(date.getHours());
console.log(date.getMinutes());
console.log(date.getSeconds());
console.log(date.getMiillseconds());
//可以将get改为set，这样是设置
- 时间戳
const date = new Date();
const timestamp = date.getTime(); //获取当前时间的时间戳
//隐式转换
const timestamp = +new Date();
//获取当前时间点的时间戳
const timestamp = Date.now();