WEB前端常用JavaScript代碼整理_ZenDei技術網路在線

WEB前端常用JavaScript代碼整理

-Advertisement-

文章目錄 html代碼用JS動態載入進頁面 JS判斷用戶訪問的是PC還是mobile或者微信瀏覽器判斷瀏覽器的簡單有效方法點擊某個div區域之外，隱藏該div 如何在手機上禁止瀏覽器的網頁滾動改變type=file預設樣式，"瀏覽"等字體 js使用console.time列印代碼執行時間 js ...

文章目錄

html代碼用JS動態載入進頁面

<script type="text/html" id="T-pcList"> //這裡面是你要放的html代碼，例如放一個div的內容 </script>

把上面的js動態加入到頁面中

$(function(){ var s=$("#T-pcList").html();//獲得js的html內容 $(".picScroll-left .bd").html(s);//把s的內容放到class為bd內 thisstyle();//執行某個函數 });

JS判斷用戶訪問的是PC還是mobile或者微信瀏覽器

var browser = { versions:function(){ var u = navigator.userAgent.toLowerCase(); return { trident: u.indexOf('trident') > -1, presto: u.indexOf('presto') > -1, isChrome: u.indexOf("chrome") > -1 && u.indexOf("safari") > -1 && !(u.indexOf("qqbrowser") > -1), qqbrowser: u.indexOf("qqbrowser") > -1, isFirefox: u.indexOf('firefox') > -1, isSafari: !(u.indexOf("chrome") > -1) && (/webkit|khtml/).test(u) && u.indexOf('safari') > -1, webKit: u.indexOf('applewebkit') > -1, gecko: u.indexOf('gecko') > -1 && u.indexOf('khtml') == -1, mobile: !!u.match(/applewebkit.*mobile.*/), ios: !!u.match(/\(i[^;]+;( u;)? cpu.+mac os x/), android: u.indexOf('android') > -1 || u.indexOf('linux') > -1, iPhone: u.indexOf('iphone') > -1, iPad: u.indexOf('ipad') > -1, iWinPhone: u.indexOf('windows phone') > -1, isWeiXin:!!u.match(/MicroMessenger/i) } } } if(browser.versions.mobile || browser.versions.iWinPhone){ console.log('手機'); }else{ console.log('pc'); }

判斷瀏覽器的簡單有效方法

functiongetInternet(){ if(navigator.userAgent.indexOf("MSIE")>0) { return"MSIE"; //IE瀏覽器   } if(isFirefox=navigator.userAgent.indexOf("Firefox")>0){ return"Firefox"; //Firefox瀏覽器   } if(isSafari=navigator.userAgent.indexOf("Safari")>0) { return"Safari"; //Safan瀏覽器   } if(isCamino=navigator.userAgent.indexOf("Camino")>0){ return"Camino"; //Camino瀏覽器   } if(isMozilla=navigator.userAgent.indexOf("Gecko/")>0){ return"Gecko"; //Gecko瀏覽器   } }

點擊某個div區域之外，隱藏該div

$(document).bind("click",function(e){ var target = $(e.target); if(target.closest(".city_box,#city_select a.selected").length == 0){ $(".city_box").hide(); } })

更全的方式：

$(document).click(function(e){ var _con = $(' 目標區域 '); // 設置目標區域 if(!_con.is(e.target) && _con.has(e.target).length === 0){ // Mark 1 some code... // 功能代碼  } }); /* Mark 1 的原理： 判斷點擊事件發生在區域外的條件是： 1. 點擊事件的對象不是目標區域本身 2. 事件對象同時也不是目標區域的子元素 */

如何在手機上禁止瀏覽器的網頁滾動

方法一：

<body ontouchmove="event.preventDefault()" >

方法二：

 <script type="text/javascript"> document.addEventListener('touchmove', function(event) { event.preventDefault(); }) </script>

改變type=file預設樣式，"瀏覽"等字體

<input type="file" id="browsefile" style="visibility:hidden" onchange="filepath.value=this.value"> <input type="button" id="filebutton" value="" onclick="browsefile.click()"> <input type="textfield" id="filepath">

js使用console.`time`列印代碼執行時間

用console.time和console.timeEnd中間代碼執行時長來測試間隔時間。

console.time('console'); console.log('test'); console.timeEnd('console');

js判斷變數是否未定義的代碼

一般如果變數通過var聲明，但是並未初始化的時候，變數的值為undefined，而未定義的變數則需要通過 "typeof 變數"的形式來判斷，否則會發生錯誤。
實際應用：
variable有的頁面我們不定義,但有的頁面定義了，就可以需要這樣的判斷方法，沒有定義的就不執行。

if("undefined" != typeof variable){ if(variable=="abc"){ console.log('成功'); } }

js動態創建css樣式添加到head內

function addCSS(cssText){ var style = document.createElement('style'); var head = document.head || document.getElementsByTagName('head')[0]; style.type = 'text/css'; if(style.styleSheet){ //IE var func = function(){ try{ //防止IE中stylesheet數量超過限制而發生錯誤 style.styleSheet.cssText = cssText; }catch(e){ } } //如果當前styleSheet還不能用，則放到非同步中則行 if(style.styleSheet.disabled){ setTimeout(func,10); }

您的分享是我們最大的動力!

-Advertisement-