JavaScript常用工具函數(shù)匯總(瀏覽器環(huán)境)
前端業(yè)務(wù)中比較常用的JavaScript工具函數(shù),瀏覽器環(huán)境常用,可直接拷貝在項目里使用。這里統(tǒng)一整理,方便查閱,本文章會持續(xù)更新。
一、file轉(zhuǎn)為base64
/** * file轉(zhuǎn)為base64 * @param {*} file file對象 * @param {*} callback */ export const fileToDataURL = (file, callback) => { let freader = new FileReader(); freader.readAsDataURL(file); freader.onload = function (e) { callback(e.target.result); } }
二、blob流轉(zhuǎn)換為base64
/** * blob流轉(zhuǎn)換為base64 * @param {*} blob blob對象 * @param {*} callback */ export const blobToDataURL = (blob, callback) => { let freader = new FileReader(); freader.readAsDataURL(blob); freader.onload = function (e) { callback(e.target.result); } }
三、base64轉(zhuǎn)換為blob
/** * base64轉(zhuǎn)換為blob * @param {*} dataurl base64 */ export const dataURLtoBlob = (dataurl) => { let arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1], bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n); while (n--) { u8arr[n] = bstr.charCodeAt(n); } return new Blob([u8arr], { type: mime }); }
四、base64轉(zhuǎn)換為file,IE低版本不兼容
/** * 將base64轉(zhuǎn)換為file,IE低版本不兼容 * @param {*} dataurl base64 * @param {*} filename 文件名 */ export const dataURLtoFile = (dataurl, filename) => { let arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1], bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n); while (n--) { u8arr[n] = bstr.charCodeAt(n); } return new File([u8arr], filename, { type: mime }); }
五、圖片url轉(zhuǎn)化成base64
/** * 圖片url轉(zhuǎn)化成base64 * @param {*} url 圖片url * @param {*} callback * @param {*} outputFormat 圖片格式 */ export const imgUrlToDataURL = (url, callback, outputFormat) => { let canvas = document.createElement('canvas'), ctx = canvas.getContext('2d'), img = new Image; img.crossOrigin = 'Anonymous'; img.src = url + "?timeStamp=" + new Date().getTime(); img.onload = function () { canvas.height = img.height; canvas.width = img.width; // ctx.drawImage(img, 0, 0); ctx.drawImage(this, 0, 0, img.width, img.height); let dataURL = canvas.toDataURL(outputFormat || 'image/png'); // callback.call(this, dataURL); callback && callback(dataURL) canvas = null; }; }
六、獲取窗口尺寸
export function getViewportSize() { let w = 0; let h = 0; if (window.innerWidth) { w = window.innerWidth h = window.innerHeight } else if (document.body && document.body.clientWidth) { w = document.body.clientWidth h = document.body.clientHeight } else if (document.documentElement && document.documentElement.clientWidth) { w = document.documentElement.clientWidth h = document.documentElement.clientHeight } return { w, h } }
七、瀏覽器環(huán)境檢測
const ua = window.navigator.userAgent.toLowerCase() // 是否微信 export const isWx = () => ua.match(/MicroMessenger/i) == 'micromessenger' // 是否ipad export const isIpad = () => ua.indexOf('ipad') > -1 // 是否iphone export const isIphone = () => ua.indexOf('iphone os') > -1 // 是否uc export const isUc = () => ua.indexOf('ucweb') > -1 // 是否windows pc export const isWindows = () => ua.indexOf('windows') > -1 // 是否android export const isAndroid = () => ua.indexOf('android') > -1 || ua.indexOf('adr') > -1 // 是否ios export const isIos = () => /(iphone|ipod|ipad|ios)/i.test(ua) // 是否qq瀏覽器 export const isQq = () => ua.indexOf('mqqbrowser') > -1 && ua.indexOf(' qq') < 0 // 是否qq內(nèi)置瀏覽器 export const isQQInstalled = () => ua.indexOf(' qq') > -1 && ua.indexOf('mqqbrowser') < 0
八、開啟與關(guān)閉全屏
// 開啟全屏 export function launchFullscreen(element) { element = element || document.documentElement if (element.requestFullscreen) { element.requestFullscreen() } else if (element.mozRequestFullScreen) { element.mozRequestFullScreen() } else if (element.msRequestFullscreen) { element.msRequestFullscreen() } else if (element.webkitRequestFullscreen) { element.webkitRequestFullScreen() } } // 關(guān)閉全屏 export 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() } }
九、返回頂部/指定位置,實現(xiàn)滾動動畫
/** * @param {*} number 距離頁面頂部的距離 * @param {*} time 滾動所需時間 單位ms */ const scrolling = (number = 0, time) => { if (!time) { document.body.scrollTop = document.documentElement.scrollTop = number; return number; } // 設(shè)置循環(huán)的間隔時間 值越小消耗性能越高 const spacingTime = 20; // 計算循環(huán)的次數(shù) let spacingInex = time / spacingTime; // 獲取當(dāng)前滾動條位置 let nowTop = document.body.scrollTop + document.documentElement.scrollTop; // 計算每次滑動的距離 let everTop = (number - nowTop) / spacingInex; let scrollTimer = setInterval(() => { if (spacingInex > 0) { spacingInex--; ScrollTop(nowTop += everTop); } else { clearInterval(scrollTimer); // 清除計時器 } }, spacingTime); }; // 滾動到距離頁面頂部500px的位置 動畫時間為300ms // scrolling(500, 300);
十、實現(xiàn)錨點滾動
// 運用了H5的scrollIntoView方法,這是一個實驗中的功能,IE 8以下、Safari 6以下、Safari on iOS 5以下不兼容 const scrollToAnchor = (anchorName) => { if (anchorName) { // 找到錨點 let anchorElement = document.getElementById(anchorName); // 如果對應(yīng)id的錨點存在,就跳轉(zhuǎn)到錨點 if (anchorElement) { anchorElement.scrollIntoView({ behavior: 'auto', // 定義動畫過渡效果, "auto"或 "smooth" 之一。默認為 "auto" block: 'start', // 定義垂直方向的對齊, "start", "center", "end", 或 "nearest"之一。默認為 "start" inline: 'nearest', // 定義水平方向的對齊, "start", "center", "end", 或 "nearest"之一。默認為 "nearest" }); } } }
以上就是JavaScript常用工具函數(shù)匯總(瀏覽器環(huán)境)的詳細內(nèi)容,更多關(guān)于JavaScript 工具函數(shù)的資料請關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
JavaScript繼承學(xué)習(xí)筆記【新手必看】
下面小編就為大家?guī)硪黄狫avaScript繼承學(xué)習(xí)筆記。小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考2016-05-05js浮點數(shù)保留兩位小數(shù)點示例代碼(四舍五入)
本篇文章主要介紹了js浮點數(shù)保留兩位小數(shù)點示例代碼(四舍五入) 需要的朋友可以過來參考下,希望對大家有所幫助2013-12-12js實現(xiàn)3D粒子酷炫動態(tài)旋轉(zhuǎn)特效
這篇文章主要為大家詳細介紹了js實現(xiàn)3D粒子酷炫動態(tài)旋轉(zhuǎn)特效,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下2020-09-09