1、实现全屏
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()2、退出全屏
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()3、页面打印
window.print()4、打印内容款式更改
<style>/* 应用@media print能够调整你须要的打印款式 */@media print { .noprint { display: none; }}</style><div class="print">print</div><div class="noprint">noprint</div>5、阻止敞开事件
//当你须要避免用户刷新或者敞开浏览器，你能够抉择触发 beforeunload 事件，局部浏览器不能自定义文本内容window.onbeforeunload = function(){ return '您确定要来到haorooms博客吗？';};6、屏幕录制
//当你须要将录制以后屏幕，并将录屏上传或下载const streamPromise = navigator.mediaDevices.getDisplayMedia()streamPromise.then(stream => { var recordedChunks = [];// 录制的视频数据 var options = { mimeType: "video/webm; codecs=vp9" };// 设置编码格局 var mediaRecorder = new MediaRecorder(stream, options);// 初始化MediaRecorder实例 mediaRecorder.ondataavailable = handleDataAvailable;// 设置数据可用（录屏完结）时的回调 mediaRecorder.start(); // 视频碎片合并 function handleDataAvailable(event) { if (event.data.size > 0) { recordedChunks.push(event.data);// 增加数据，event.data是一个BLOB对象 download();// 封装成BLOB对象并下载 } } // 文件下载 function download() { var blob = new Blob(recordedChunks, { type: "video/webm" }); // 此处可将视频上传到后端 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); }})7、判断横竖屏
function hengshuping(){ if(window.orientation==180||window.orientation==0){ alert("竖屏状态！") } if(window.orientation==90||window.orientation==-90){ alert("横屏状态！") }}window.addEventListener("onorientationchange" in window ? "orientationchange" : "resize", hengshuping, false);8、横竖屏款式变更
<style>@media all and (orientation : landscape) { body { background-color: #ff0000; }}@media all and (orientation : portrait) { body { background-color: #00ff00; }}</style>9、标签页显隐
//当你须要对标签页显示暗藏进行事件监听时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("以后被暗藏", document[hidden]);};document.addEventListener( visibilityChange, handleVisibilityChange, false);10、本地图片预览
//当你从客户端获取到一张图片但不能立即上传到服务器，却须要预览的时候<div class="test"> <input type="file" name="" id=""> <img src="" alt=""></div><script>const getObjectURL = (file) => { let url = null; if (window.createObjectURL != undefined) { // basic url = window.createObjectURL(file); } else if (window.URL != undefined) { // webkit or chrome url = window.URL.createObjectURL(file); } else if (window.URL != undefined) { // mozilla(firefox) url = window.URL.createObjectURL(file); } return url;}document.querySelector('input').addEventListener('change', (event) => { document.querySelector('img').src = getObjectURL(event.target.files[0])})</script>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'])12、字符串脚本化
//当你须要将一串字符串转换成一个 js 脚本，该办法有 xss 破绽，慎用const obj = eval('({ name: "jack" })')// obj会被转换为对象{ name: "jack" }const v = eval('obj')// v会变成obj这个变量13、递归函数名解耦
//当你须要写一个递归函数的时候，你申明了一个函数名，然而每次批改函数名的时候总会遗记批改外部的函数名。argument 为函数外部对象，蕴含传入函数的所有参数，arguments.callee 代表函数名。// 这是一个最根底的斐波那契数列function fibonacci (n) { const fn = arguments.callee if (n <= 1) return 1 return fn(n - 1) + fn(n - 2)}14、隐显判断
//当你须要对一个 dom 元素进行判断以后是否呈现在页面视图内，你能够尝试用 IntersectionObserver 进行判断<style>.item { height: 350px;}</style><div class="container"> <div class="item" data-id="1">不可见</div> <div class="item" data-id="2">不可见</div> <div class="item" data-id="3">不可见</div></div><script> if (window?.IntersectionObserver) { let items = [...document.getElementsByClassName("item")]; // 解析为真数组，也可用 Array.prototype.slice.call() let io = new IntersectionObserver( (entries) => { entries.forEach((item) => { item.target.innerHTML = item.intersectionRatio === 1 // 元素显示比例，为1时齐全可见，为0时齐全不可见 ? `元素齐全可见` : `元素局部不可见`; }); }, { root: null, rootMargin: "0px 0px", threshold: 1, // 阀值设为1，当只有比例达到1时才触发回调函数 } ); items.forEach((item) => io.observe(item)); }</script>15、元素可编辑
//当你须要在某个 dom 元素进行编辑，让它点击的时候就像一个 textarea<div contenteditable="true">这里是可编辑的内容</div>16、元素属性监听
<div id="test">test</div><button onclick="handleClick()">OK</button><script> const el = document.getElementById("test"); let n = 1; const observe = new MutationObserver((mutations) => { console.log("属性发生变化了", mutations); }) observe.observe(el, { attributes: true }); function handleClick() { el.setAttribute("style", "color: red"); el.setAttribute("data-name", n++); } setTimeout(() => { observe.disconnect(); // 进行监听 }, 5000);</script>17、打印 dom 元素
//当你须要在开发过程中打印 dom 元素时，应用 console.log 往往只会打印出整个 dom 元素，而无奈查看该 dom 元素的外部属性。你能够尝试应用 console.dirconsole.dir(document.body)18、激活利用
//当你在挪动端开发时，须要关上其余利用。以下办法也能够通过 location.href 赋值操作 <a href="tel:12345678910">电话</a> <a href="sms:12345678910,12345678911?body=你好">android短信</a> <a href="sms:/open?addresses=12345678910,12345678911&body=你好">ios短信</a> <a href="wx://">ios短信</a>