日期 Date
时间戳转换为时间
- 默认为当前时间转换结果
- isMs 为时间戳是否为毫秒
function timestampToTime(timestamp = Date.parse(new Date()), isMs = true) {
const date = new Date(timestamp * (isMs ? 1 : 1000));
return `${date.getFullYear()}-${
date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1
}-${date.getDate()} ${date.getHours()}:${date.getMinutes()}:${date.getSeconds()}`;
}
文档对象 DOM
固定滚动条
let scrollTop = 0;
function preventScroll() {
scrollTop = window.scrollY;
document.body.style["overflow-y"] = "hidden";
document.body.style.position = "fixed";
document.body.style.width = "100%";
document.body.style.top = -scrollTop + "px";
}
function recoverScroll() {
document.body.style["overflow-y"] = "auto";
document.body.style.position = "static";
window.scrollTo(0, scrollTop);
}
判断当前位置是否为页面底部
function bottomVisible() {
return (
document.documentElement.clientHeight + window.scrollY >=
(document.documentElement.scrollHeight ||
document.documentElement.clientHeight)
);
}
判断元素是否在可视范围内
- partiallyVisible 为是否为完全可见
function elementIsVisibleInViewport(el, partiallyVisible = false) {
const { top, left, bottom, right } = el.getBoundingClientRect();
return partiallyVisible
? ((top > 0 && top < innerHeight) ||
(bottom > 0 && bottom < innerHeight)) &&
((left > 0 && left < innerWidth) || (right > 0 && right < innerWidth))
: top >= 0 && left >= 0 && bottom <= innerHeight && right <= innerWidth;
}
获取元素 css 样式
function getStyle(el, ruleName) {
return getComputedStyle(el, null).getPropertyValue(ruleName);
}
进入全屏
function launchFullscreen(element) {
if (element.requestFullscreen) {
element.requestFullscreen();
} else if (element.mozRequestFullScreen) {
element.mozRequestFullScreen();
} else if (element.msRequestFullscreen) {
element.msRequestFullscreen();
} else if (element.webkitRequestFullscreen) {
element.webkitRequestFullScreen();
}
}
launchFullscreen(document.documentElement);
launchFullscreen(document.getElementById("id"));
退出全屏
function exitFullscreen() {
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.msExitFullscreen) {
document.msExitFullscreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.webkitExitFullscreen) {
document.webkitExitFullscreen();
}
}
exitFullscreen();
全屏事件
document.addEventListener("fullscreenchange", function (e) {
if (document.fullscreenElement) {
console.log("进入全屏");
} else {
console.log("退出全屏");
}
});
文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/24710.html