好用的浏览器原生方法汇总

• dom设置或移除className

let bodyElement = document.getElementsByTagName('body')[0];
bodyElement.classList.add('myClass1'); // body元素添加calss:myClass1
bodyElement.classList.add('myClass2'); // body元素添加calss:myClass2
bodyElement.classList.remove('myClass2'); // body元素移除calss:myClass2

• 修正时差，返回北京时间

/**
 * @returns {Date} 修正时差，返回北京时间
 * 注：协调世界时，又称世界统一时间，世界标准时间，国际协调时间，简称UTC（Universal Coordinated Time）。UTC 时间即是 GMT（格林尼治） 时间。
 */
function getBeiJingDate() {
    let date = new Date(); // 获取客户端时区的时间，这个在设备上可以更改
    let zoneOffsetMinutes = date.getTimezoneOffset(); // 返回格林威治时间和本地时间之间的时差，以分钟为单位(如果时区为 GMT+2, 将返回-120)
    let GMTTime = date.getTime() + zoneOffsetMinutes * 60 * 1000; // 获取格林威治时间
    let BeiJingTime = GMTTime + 8 * 60 * 60 * 1000; // 获取北京时间，也就是东8区时间
    return new Date(BeiJingTime);
}

• 删除父dom节点下的所有子节点

let parentElement = document.getElementById('parent');
parentElement.innerHTML = '';

• 页面关闭前发送数据

参考：https://developer.mozilla.org/zh-CN/docs/Web/API/Navigator/sendBeacon

navigator.sendBeacon(url, data);

• 告诉浏览器希望执行一个动画，要求浏览器在下次重绘之前调用指定的回调函数更新动画

参考：https://developer.mozilla.org/zh-CN/docs/Web/API/Window/requestAnimationFrame

window​.request​Animation​Frame(callback)

• 新一代前端路由的实现方法

参考：https://www.cnblogs.com/dashnowords/p/9671213.html、https://developer.mozilla.org/zh-CN/docs/Web/API/History_API

let stateObj = { foo: "bar" };

history.pushState(stateObj, "page 2", "bar.html"); // 第三个参数是新URL，注意：不能跨域！！！

• 元素滚动到页面展示出来

 

/**
 * 看参考文档、注意浏览器支持！！！
 */
Element​.scroll​Into​View(true); // 强行滚动，参数控制滚动的位置动画效果等
Element.scrollIntoViewIfNeeded(true); // 需要的时候滚动，参数控制滚动位置

• 跟随浏览器的刷新频率调用 requestAnimationFrame

具体用法参考：https://blog.youkuaiyun.com/qq_39524670/article/details/84594462

• element是一个dom元素，可以获得元素距离页面的绝对距离

 

element.getBoundingClientRect()

参考：https://developer.mozilla.org/zh-CN/docs/Web/API/Element/scrollIntoView、https://developer.mozilla.org/zh-CN/docs/Web/API/Element/scrollIntoViewIfNeeded