01、实现全屏当您需要将当前屏幕显示为全屏时
function fullScreen() {
const el = document.documentElement
const rfs =
el.requestFullScreen ||
el.webkitRequestFullScreen ||
el.mozRequestFullScreen ||
el.msRequestFullscreen
if(typeof rfs != "undefined" && rfs) {
rfs.call(el)
}
}
fullScreen()
02、退出全屏
当您需要退出全屏时
function exitScreen() {
if (document.exitFullscreen) {
document.exitFullscreen()
}
else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen()
}
else if (document.webkitCancelFullScreen) {
document.webkitCancelFullScreen()
}
else if (document.msExitFullscreen) {
document.msExitFullscreen()
}
if(typeof cfs != "undefined" && cfs) {
cfs.call(el)
}
}
exitScreen()
03、页面打印
当您需要打印当前页面时
window.print()
04、打印内容风格变更
当需要打印出当前页面,但需要修改当前布局时
print
05、阻止关闭事件
当需要阻止用户刷新或关闭浏览器时,可以选择触发beforeunload事件,有些浏览器无法自定义文本内容
window.onbeforeunload = function(){
return 'Are you sure you want to leave the haorooms blog?';
};
06、屏幕录制
当您需要录制当前屏幕并上传或下载屏幕录制时
const streamPromise = navigator.mediaDevices.getDisplayMedia()
streamPromise.then(stream => {
var recordedChunks = [];// recorded video data
var options = { mimeType: "video/webm; codecs=vp9" };// Set the encoding format
var mediaRecorder = new MediaRecorder(stream, options);// Initialize the MediaRecorder instance
mediaRecorder.ondataavailable = handleDataAvailable;// Set the callback when data is available (end of screen recording)
mediaRecorder.start();
// Video Fragmentation
function handleDataAvailable(event) {
if (event.data.size > 0) {
recordedChunks.push(event.data);// Add data, event.data is a BLOB object
download();// Encapsulate into a BLOB object and download
}
}
// file download
function download() {
var blob = new Blob(recordedChunks, {
type: "video/webm"
});
// Videos can be uploaded to the backend here
var url = URL.createObjectURL(blob);
var a = document.createElement("a");
document.body.appendChild(a);
a.style = "display: none";
a.href = url;
a.download = "test.webm";
a.click();
window.URL.revokeObjectURL(url);
}
})
07、判断横屏和竖屏
当您需要判断手机横屏或竖屏状态时
const streamPromise = navigator.mediaDevices.getDisplayMedia()
streamPromise.then(stream => {
var recordedChunks = [];// recorded video data
var options = { mimeType: "video/webm; codecs=vp9" };// Set the encoding format
var mediaRecorder = new MediaRecorder(stream, options);// Initialize the MediaRecorder instance
mediaRecorder.ondataavailable = handleDataAvailable;// Set the callback when data is available (end of screen recording)
mediaRecorder.start();
// Video Fragmentation
function handleDataAvailable(event) {
if (event.data.size > 0) {
recordedChunks.push(event.data);// Add data, event.data is a BLOB object
download();// Encapsulate into a BLOB object and download
}
}
// file download
function download() {
var blob = new Blob(recordedChunks, {
type: "video/webm"
});
// Videos can be uploaded to the backend here
var url = URL.createObjectURL(blob);
var a = document.createElement("a");
document.body.appendChild(a);
a.style = "display: none";
a.href = url;
a.download = "test.webm";
a.click();
window.URL.revokeObjectURL(url);
}
})
08、改变横竖屏样式
当你需要为横竖屏设置不同的样式时
09、标签页隐藏
当需要监听tab显示和隐藏事件时
const {hidden, visibilityChange} = (() => {
let hidden, visibilityChange;
if (typeof document.hidden !== "undefined") {
// Opera 12.10 and Firefox 18 and later support
hidden = "hidden";
visibilityChange = "visibilitychange";
} else if (typeof document.msHidden !== "undefined") {
hidden = "msHidden";
visibilityChange = "msvisibilitychange";
} else if (typeof document.webkitHidden !== "undefined") {
hidden = "webkitHidden";
visibilityChange = "webkitvisibilitychange";
}
return {
hidden,
visibilityChange
}
})();
const handleVisibilityChange = () => {
console.log("currently hidden", document[hidden]);
};
document.addEventListener(
visibilityChange,
handleVisibilityChange,
false
);
图片
10、本地图片预览
当您从客户端获取图片但无法立即上传到服务器,但需要预览时
11、图片预加载
当图片较多时,需要预加载图片以避免白屏
const images = []
function preloader(args) {
for (let i = 0, len = args.length; i < len; i++) {
images[i] = new Image()
images[i].src = args[i]
}
}
preloader(['1.png', '2.jpg'])
JavaScript
12、字符串脚本
当需要将一串字符串转换为JavaScript脚本时,该方法存在xss漏洞,请谨慎使用
const obj = eval('({ name: "jack" })')
// obj will be converted to object{ name: "jack" }
const v = eval('obj')
// v will become the variable obj
13、递归函数名解耦
当需要编写递归函数时,声明了函数名,但是每次修改函数名时,总是忘记修改内部函数名。argument是函数的内部对象,包括传入函数的所有参数,arguments.callee代表函数名。
// This is a basic Fibonacci sequence
function fibonacci (n) {
const fn = arguments.callee
if (n <= 1) return 1
return fn(n - 1) + fn(n - 2)
}
DOM 元素
14、隐性判断
当需要判断某个dom元素当前是否出现在页面视图中时,可以尝试使用IntersectionObserver来判断。
Invisible
Invisible
Invisible
15、元素可编辑
当你需要编辑一个dom元素时,让它像文本区域一样点击。
here can be edited
16、元素属性监控
test
17、打印 dom 元素
当开发过程中需要打印dom元素时,使用console.log往往只能打印出整个dom元素,而无法查看dom元素的内部属性。你可以尝试使用 console.dir
console.dir(document.body)
其他
18、激活应用程序
当你在移动端开发时,你需要打开其他应用程序。还可以通过location.href赋值来操作以下方法
总结
以上就是我今天想与你分享的全部内容,希望对你有所帮助,最后,感谢你的阅读,祝编程愉快!