前端技巧——js篇

復(fù)制操作

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

出生日期轉(zhuǎn)年齡【正則】

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 '輸入有誤,請(qǐng)檢查格式'; }

隨即打亂順序

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

截取url參數(shù)

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

字體自適應(yīng)

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

隨機(jī)數(shù)

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

n個(gè)元素圓形布局

<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個(gè)$(function () {// 中心點(diǎn)橫坐標(biāo)var ow = $('.container').width() / 2;// 中心點(diǎn)縱坐標(biāo)var ot = $('.container').height() / 2;// 起始角度var start = 0;// 半徑var radius = 300;// 每一個(gè)box對(duì)應(yīng)的角度var avd = 360 / $('.box').length;// 每一個(gè)box對(duì)應(yīng)的弧度var ahd = avd * Math.PI / 180;// 設(shè)置每一個(gè)元素的位置$(.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');} } // 瀏覽器是否支持彈出實(shí)例 function justify_showMsg () {if (window.Notification && Notification.permission !== 'undefined') {Notification.requestPermission(function (status) {if (status === 'granted') {var n = New Notification('收到消息:-O', {body: '這是通知內(nèi)容',icon: 'imgUrl'})} else {var n = new Notification('baby, i'll leave u');}})} } // 實(shí)例展示彈出內(nèi)容 function otification_construct () {var notification = new Notification('收到新郵件', {body: '您有一封來(lái)自馬來(lái)西亞??的新郵件',dir: 'auto',lang: 'zh-CN',tag: 'a1',icon: 'imgUrl'});console.log(notification.title); // 收到新郵件console.log(notification.body); // 您有一封... } // Notifications API的相關(guān)事件 function otification_event () {var MM = new Notification('新消息', {body: '一條來(lái)自越南??的留言',icon: 'imgUrl'});// 查看信息MM.onshow = function () {window.open('index.html'); // 打開首頁(yè)MM.close(); // 關(guān)閉桌面彈窗};// 報(bào)錯(cuò)處理MM.onerror = function () {console.log('Notification have be click');MM.close();} }

jQuery阻止重復(fù)加載

$('#btn').off('click').on('click', function () {// ... }) jQuery平緩滑動(dòng)至頂部// 點(diǎn)擊返回頂部按鈕平緩滑到頂部 $('#top').on('click',function () {$('html, body').animate({scrollTop: 0,},{duration: 500,easing: 'swing'});return false })// 綁定頁(yè)面滾動(dòng)事件 $(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控制頁(yè)面的全屏展示和退出全屏顯示</button><div id="content" style="width: 100%;height: 100%;background-color: #00ee00;"><div>這個(gè)div的父級(jí)下是可以全屏顯示的內(nèi)容</div><button onclick="exitFull()">js控制頁(yè)面的退出全屏顯示</button></div> </div><script language="JavaScript"> document.getElementById("btn").onclick=function(){var elem = document.getElementById("content");requestFullScreen(elem);// 某個(gè)頁(yè)面元素//requestFullScreen(document.documentElement);// 整個(gè)網(wǎng)頁(yè) };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>

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。