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、打印内容样式改变
当需要打印出当前页面,但又需要修改当前布局时
<style> @media print { .noprint { display: none; } } </style> <div class="print">print</div> <div class="noprint">noprint</div>
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 = []; var options = { mimeType: "video/webm; codecs=vp9" }; var mediaRecorder = new MediaRecorder(stream, options); mediaRecorder.ondataavailable = handleDataAvailable; available (end of screen recording) mediaRecorder.start(); // Video Fragmentation function handleDataAvailable(event) { if (event.data.size > 0) { recordedChunks.push(event.data); download(); } } 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); } })
07、判断横竖屏
当你需要判断手机横屏或竖屏状态时。
function hengshuping(){ if(window.orientation==180||window.orientation==0){ alert("Portrait state!") } if(window.orientation==90||window.orientation==-90){ alert("Landscape state!") } } window.addEventListener("onorientationchange" in window ? "orientationchange" : "resize", hengshuping, false);
08、改变横竖屏的样式
当你需要为横竖屏设置不同的样式时。
<style> @media all and (orientation : landscape) { body { background-color: #ff0000; } } @media all and (orientation : portrait) { body { background-color: #00ff00; } } </style>
09、标签页隐藏
当你需要监听标签显示和隐藏的事件时。
const {hidden, visibilityChange} = (() => { let hidden, visibilityChange; if (typeof document.hidden !== "undefined") { 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、本地图片预览
当你从客户端获取图片但不能立即上传到服务器,需要预览时
<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'])
JavaScript
12、字符串脚本
当需要将一串字符串转成js脚本时,该方法存在xss漏洞,慎用。
const obj = eval('({ name: "jack" })') const v = eval('obj')
13、递归函数名解耦
当你需要写一个递归函数时,你声明了一个函数名,但是每次修改函数名时,你总是忘记修改内部函数名。argument是函数的内部对象,包括传入函数的所有参数,arguments.callee代表函数名。
function fibonacci (n) { const fn = arguments.callee if (n <= 1) return 1 return fn(n - 1) + fn(n - 2) }
DOM 元素
14、隐性判断
当需要判断一个dom元素当前是否出现在page view中时,可以尝试使用IntersectionObserver来判断。
<style> .item { height: 350px; } </style> <div class="container"> <div class="item" data-id="1">Invisible</div> <div class="item" data-id="2">Invisible</div> <div class="item" data-id="3">Invisible</div> </div> <script> if (window?.IntersectionObserver) { let items = [...document.getElementsByClassName("item")]; let io = new IntersectionObserver( (entries) => { entries.forEach((item) => { item.target.innerHTML = item.intersectionRatio === 1 ? `Element is fully visible` : `Element is partially invisible`; }); }, { root: null, rootMargin: "0px 0px", threshold: 1, } ); items.forEach((item) => io.observe(item)); } </script>
15、元素可编辑
当你需要编辑一个dom元素时,让它像textarea一样点击
<div contenteditable="true">here can be edited</div>
16、元素属性监控
<div id="test">test</div> <button οnclick="handleClick()">OK</button> <script> const el = document.getElementById("test"); let n = 1; const observe = new MutationObserver((mutations) => { console.log("attribute is changede", mutations); }) observe.observe(el, { attributes: true }); function handleClick() { el.setAttribute("style", "color: red"); el.setAttribute("data-name", n++); } setTimeout(() => { observe.disconnect(); // stop watch }, 5000); </script>
17、打印dom元素
在开发过程中需要打印dom元素时,使用console.log往往只能打印出整个dom元素,无法查看dom元素的内部属性。您可以尝试使用 console.dir
console.dir(document.body)
其他
18、激活应用
当你在移动端开发时,你需要打开其他应用程序。location.href赋值也可以操作以下方法
<a href="tel:12345678910">phone</a> <a href="sms:12345678910,12345678911?body=hello">android message</a> <a href="sms:/open?addresses=12345678910,12345678911&body=hello">ios message</a> <a href="wx://">ios message</a>
19、树形结构
function toTree(data) { const tree = [] const otherObj = {} data.forEach(item => { item.children = [] otherObj[item.id] = item }) data.forEach(item => { if (item.pid) { otherObj[item.pid].children.push(item) } else { tree.push(item) } }) return tree } toTree(data)