前端技巧——js篇

復制操作

copy () {let url = this.code;let oInput = document.createElement('input');oInput.value = url;document.body.appendChild(oInput);oInput.select(); // 選擇對象console.log(oINput.value);document.execCommand('Cooy'); // 執行瀏覽器復制命令alert('復制成功');oInput.remove(); }

出生日期轉年齡【正則】

function getAge(str) {var r = str.match(/^(\d{1,4})(-|\/)(\d{1,2})\2(\d{1,2})$/);r === null ? return false : '' ;var d = new Date(r[1], r[3]-1, r[4]);if (d.getFullYear() == r[1] && (d.getMonth() + 1) == r[3] && d.getDate == r[4]) {var Y = new Date().getFullYear();return (Y - r[1]);}return '輸入有誤,請檢查格式'; }

隨即打亂順序

var arr = [1,2,3,4,5,6,7,8,9,0]; arr.sort(() => {return (0.5 - Math.random()); })

截取url參數

function getParams () {var obj = {};var url = window.location.search; // 截取'?'及之后的字符串var str = url.string(1, url.length); // 刪除'?'var arr = str.split('&'); // 分割數組for (var i = 0; i < arr.length; i ++) {obj[arr[i].split('=')[0]] = unescape(arr[i].split('=')[1]);} }

字體自適應

// 根元素 var win = window, doc = document; function setFontSize() {var winWidth = $(window).width();// 設計稿比如為750 可自定義var size = (winWidth / 750) * 100;doc.documentElement.style.fontSize = (size < 100 ? size : 100) + 'px'; }; // 頁面初始化 setTimeout(function() { 　　setFontSize(); }, 100);

隨機數

var n = parseInt(10 * Math.random()); // 0~10之間隨機整數 console.log(n);

n個元素圓形布局

<style> .container{position: relative;width: 600px;height: 600px;margin: 0 auto;border: 1px solid #f00; } .box{position: absolute;width: 50px;height: 50px;background: #eee;transform: translate(-50%, -50%); } </style><div class="container"><div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div> </div><script>// 注，此方法的box可為n個$(function () {// 中心點橫坐標var ow = $('.container').width() / 2;// 中心點縱坐標var ot = $('.container').height() / 2;// 起始角度var start = 0;// 半徑var radius = 300;// 每一個box對應的角度var avd = 360 / $('.box').length;// 每一個box對應的弧度var ahd = avd * Math.PI / 180;// 設置每一個元素的位置$(.box).each(function (index, element) {$(this).css({'left': Math.sin(ahd * index) * radius + ow,'top': Math.cos(ahd * index) * radius + oh})})}) </script>

桌面彈窗【原生】

// 判斷瀏覽器是否支持“WebNotifications API” function justify_notifyAPI () {if (window.Notification) {// 支持console.log('支持：WebNotifications API');} else {console.log('不支持：WebNotifications API');} } // 瀏覽器是否支持彈出實例 function justify_showMsg () {if (window.Notification && Notification.permission !== 'undefined') {Notification.requestPermission(function (status) {if (status === 'granted') {var n = New Notification('收到消息:-O', {body: '這是通知內容',icon: 'imgUrl'})} else {var n = new Notification('baby, i'll leave u');}})} } // 實例展示彈出內容 function otification_construct () {var notification = new Notification('收到新郵件', {body: '您有一封來自馬來西亞??的新郵件',dir: 'auto',lang: 'zh-CN',tag: 'a1',icon: 'imgUrl'});console.log(notification.title); // 收到新郵件console.log(notification.body); // 您有一封... } // Notifications API的相關事件 function otification_event () {var MM = new Notification('新消息', {body: '一條來自越南??的留言',icon: 'imgUrl'});// 查看信息MM.onshow = function () {window.open('index.html'); // 打開首頁MM.close(); // 關閉桌面彈窗};// 報錯處理MM.onerror = function () {console.log('Notification have be click');MM.close();} }

jQuery阻止重復加載

$('#btn').off('click').on('click', function () {// ... }) jQuery平緩滑動至頂部// 點擊返回頂部按鈕平緩滑到頂部 $('#top').on('click',function () {$('html, body').animate({scrollTop: 0,},{duration: 500,easing: 'swing'});return false })// 綁定頁面滾動事件 $(window).bind('scroll', function () {var t = $(this).scrollTop();if(t > 100) {$('#top').fadeIn(1000);} else {$('#top').fadeOut(1000);} })

jQuery平緩滑倒自定義位置

$('.box').on('click', '.link', function () {var linkAdd = $(this).attr('data');$('html, body').animate({scrollTop: $(`#${linkAdd}`).offset().top - 71 + 'px'},{duration: 500, easing: 'swing'};)return false })

全屏/取消全屏【原生】

<div style="margin:0;height: 100vh;width:100vw; background:#900;overflow: hidden;"><button id="btn">js控制頁面的全屏展示和退出全屏顯示</button><div id="content" style="width: 100%;height: 100%;background-color: #00ee00;"><div>這個div的父級下是可以全屏顯示的內容</div><button onclick="exitFull()">js控制頁面的退出全屏顯示</button></div> </div><script language="JavaScript"> document.getElementById("btn").onclick=function(){var elem = document.getElementById("content");requestFullScreen(elem);// 某個頁面元素//requestFullScreen(document.documentElement);// 整個網頁 };function requestFullScreen(element) {// 判斷各種瀏覽器，找到正確的方法var requestMethod = element.requestFullScreen || //W3Celement.webkitRequestFullScreen || //Chrome等element.mozRequestFullScreen || //FireFoxelement.msRequestFullScreen; //IE11if (requestMethod) {requestMethod.call(element);}else if (typeof window.ActiveXObject !== "undefined") {//for Internet Explorervar wscript = new ActiveXObject("WScript.Shell");if (wscript !== null) {wscript.SendKeys("{F11}");}} }//退出全屏 判斷瀏覽器種類 function exitFull() {// 判斷各種瀏覽器，找到正確的方法var exitMethod = document.exitFullscreen || //W3Cdocument.mozCancelFullScreen || //Chrome等document.webkitExitFullscreen || //FireFoxdocument.webkitExitFullscreen; //IE11if (exitMethod) {exitMethod.call(document);}else if (typeof window.ActiveXObject !== "undefined") {//for Internet Explorervar wscript = new ActiveXObject("WScript.Shell");if (wscript !== null) {wscript.SendKeys("{F11}");}} } </script>

總結

以上是生活随笔為你收集整理的前端技巧——js篇的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。