分享前端開發經常使用代碼片斷

時間 2019-11-12

標籤分享前端開發經常使用代碼片斷简体版

原文原文鏈接

1、預加載圖像css

若是你的網頁中須要使用大量初始不可見的（例如，懸停的）圖像，那麼能夠預加載這些圖像。html

2、檢查圖像是否加載android

有時爲了繼續腳本，你可能須要檢查圖像是否所有加載完畢。ios

你也可使用 ID 或 CLASS 替換<img> 標籤來檢查某個特定的圖像是否被加載。web

3、自動修復破壞的圖像正則表達式

逐個替換已經破壞的圖像連接是很是痛苦的。不過，下面這段簡單的代碼能夠幫助你。chrome

4、懸停切換canvas

當用戶鼠標懸停在可點擊的元素上時，可添加類到元素中，反之則移除類。瀏覽器

只須要添加必要的 CSS 便可。更簡單的方法是使用 toggleClass() 方法。緩存

5、淡入淡出/顯示隱藏

6、鼠標滾輪

$('#content').on("mousewheel DOMMouseScroll", function (event) {
    // chrome & ie || // firefox
    var delta = (event.originalEvent.wheelDelta && (event.originalEvent.wheelDelta > 0 ? 1 : -1)) ||
        (event.originalEvent.detail && (event.originalEvent.detail > 0 ? -1 : 1));  
    
    if (delta > 0) {
        console.log('mousewheel top');
    } else if (delta < 0) {
        console.log('mousewheel bottom');
    }
});

7、鼠標座標

一、JavaScript實現

// HTML部分

X:<input id="xxx" type="text" /> Y:<input id="yyy" type="text" />

// JavaScript部分

function mousePosition(ev){
    if(ev.pageX || ev.pageY){
        return {x:ev.pageX, y:ev.pageY};
    }
    return {
        x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,
        y:ev.clientY + document.body.scrollTop - document.body.clientTop
    };
}
 
function mouseMove(ev){
    ev = ev || window.event;
    
    var mousePos = mousePosition(ev);
    
    document.getElementById('xxx').value = mousePos.x;
    document.getElementById('yyy').value = mousePos.y;
}
document.onmousemove = mouseMove;

二、jQuery實現

$('#ele').click(function(event){
    //獲取鼠標在圖片上的座標
    console.log('X：' + event.offsetX+'\n Y:' + event.offsetY);
    
    //獲取元素相對於頁面的座標
    console.log('X：'+$(this).offset().left+'\n Y:'+$(this).offset().top);
});

8、禁止移動端瀏覽器頁面滾動

一、HTML實現

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

二、JavaScript實現

document.addEventListener('touchmove', function(event) {
    event.preventDefault();
});

9、阻止默認行爲

一、JavaScript實現

document.getElementById('btn').addEventListener('click', function (event) {
    event = event || window.event；
 
    if (event.preventDefault){
        // W3C
        event.preventDefault();
    } else{
        // IE
        event.returnValue = false;
    }
}, false);

二、jQuery實現

$('#btn').on('click', function (event) {
    event.preventDefault();
});

10、阻止冒泡

一、JavaScript實現

document.getElementById('btn').addEventListener('click', function (event) {
    event = event || window.event；
 
    if (event.stopPropagation){
        // W3C
        event.stopPropagation();
    } else{
        // IE
        event.cancelBubble = true;
    }
}, false);

二、jQuery實現

$('#btn').on('click', function (event) {
    event.stopPropagation();
});

11、檢測瀏覽器是否支持svg

function isSupportSVG() {
    var SVG_NS = 'http://www.w3.org/2000/svg';
    return !!document.createElementNS &&!!document.createElementNS(SVG_NS, 'svg').createSVGRect;
}
 
console.log(isSupportSVG());

12、檢測瀏覽器是否支持canvas

function isSupportCanvas() {
    if(document.createElement('canvas').getContext){
        return true;
    }else{
        return false;
    }
}
 
console.log(isSupportCanvas());

十3、檢測是不是微信瀏覽器

function isWeiXinClient() {
    var ua = navigator.userAgent.toLowerCase();
    if (ua.match(/MicroMessenger/i)=="micromessenger") {
        return true;
    } else {
        return false;
    }
}
 
alert(isWeiXinClient());

十4、檢測是否移動端及瀏覽器內核

var browser = {
    versions: function() {
        var u = navigator.userAgent;
        return {
            trident: u.indexOf('Trident') > -1, //IE內核
            presto: u.indexOf('Presto') > -1, //opera內核
            webKit: u.indexOf('AppleWebKit') > -1, //蘋果、谷歌內核
            gecko: u.indexOf('Firefox') > -1, //火狐內核Gecko
            mobile: !!u.match(/AppleWebKit.*Mobile.*/), //是否移動終端
            ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios
            android: u.indexOf('Android') > -1 || u.indexOf('Linux') > -1, //android
            iPhone: u.indexOf('iPhone') > -1 , //iPhone
            iPad: u.indexOf('iPad') > -1, //iPad
            webApp: u.indexOf('Safari') > -1 //Safari
        };
    }
}
 
if (browser.versions().mobile || browser.versions().ios || browser.versions().android || browser.versions().iPhone || browser.versions().iPad) {
    alert('移動端');
}

十5、檢測是否電腦端/移動端

var browser={
    versions:function(){
        var u = navigator.userAgent, app = navigator.appVersion;
        var sUserAgent = navigator.userAgent;
        return {
        trident: u.indexOf('Trident') > -1,
        presto: u.indexOf('Presto') > -1,
        isChrome: u.indexOf("chrome") > -1,
        isSafari: !u.indexOf("chrome") > -1 && (/webkit|khtml/).test(u),
        isSafari3: !u.indexOf("chrome") > -1 && (/webkit|khtml/).test(u) && u.indexOf('webkit/5') != -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
        };
    }()
}
if(browser.versions.mobile || browser.versions.iWinPhone){
    window.location = "http:/www.baidu.com/m/";
}

十6、檢測瀏覽器內核

function getInternet(){    
    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瀏覽器  
    }    
}

十7、強制移動端頁面橫屏顯示

$( window ).on( "orientationchange", function( event ) {
    if (event.orientation=='portrait') {
        $('body').css('transform', 'rotate(90deg)');
    } else {
        $('body').css('transform', 'rotate(0deg)');
    }
});
$( window ).orientationchange();

十8、電腦端頁面全屏顯示

function fullscreen(element) {
    if (element.requestFullscreen) {
        element.requestFullscreen();
    } else if (element.mozRequestFullScreen) {
        element.mozRequestFullScreen();
    } else if (element.webkitRequestFullscreen) {
        element.webkitRequestFullscreen();
    } else if (element.msRequestFullscreen) {
        element.msRequestFullscreen();
    }
}
 
fullscreen(document.documentElement);

十9、得到/失去焦點

一、JavaScript實現

// HTML部分

<input id="i_input" type="text" value="會員卡號/手機號"/>

// JavaScript部分

window.onload = function(){
    var oIpt = document.getElementById("i_input");
 
    if(oIpt.value == "會員卡號/手機號"){
        oIpt.style.color = "#888";
    }else{
        oIpt.style.color = "#000";
    };
 
    oIpt.onfocus = function(){
        if(this.value == "會員卡號/手機號"){
            this.value="";
            this.style.color = "#000";
            this.type = "password";
        }else{
            this.style.color = "#000";
        }
    };
    
    oIpt.onblur = function(){
        if(this.value == ""){
            this.value="會員卡號/手機號";
            this.style.color = "#888";
            this.type = "text";
        }
    };
}

二、jQuery實現

// HTML部分

<input type="text" class="oldpsw" id="showPwd" value="請輸入您的註冊密碼"/>
<input type="password" name="psw" class="oldpsw" id="password" value="" style="display:none;"/>

// jQuery部分

$("#showPwd").focus(function() {
    var text_value=$(this).val();
    if (text_value =='請輸入您的註冊密碼') {
        $("#showPwd").hide();
        $("#password").show().focus();
    }
});
$("#password").blur(function() {
    var text_value = $(this).val();
    if (text_value == "") {
        $("#showPwd").show();
        $("#password").hide();
    }
});

二10、獲取上傳文件大小

// HTML部分

<input type="file" id="filePath" onchange="getFileSize(this)"/>

// JavaScript部分  兼容IE9低版本
function getFileSize(obj){
    var filesize;
    
    if(obj.files){
        filesize = obj.files[0].size;
    }else{
        try{
            var path,fso;
            path = document.getElementById('filePath').value;
            fso = new ActiveXObject("Scripting.FileSystemObject");
            filesize = fso.GetFile(path).size;
        }
        catch(e){
            // 在IE9及低版本瀏覽器，若是不允許ActiveX控件與頁面交互，點擊了否，就沒法獲取size
            console.log(e.message); // Automation 服務器不能建立對象
            filesize = 'error'; // 沒法獲取
        }
    }
    return filesize;
}

二11、限制上傳文件類型

一、高版本瀏覽器

<input type="file" name="filePath" accept=".jpg,.jpeg,.doc,.docxs,.pdf"/>

二、限制圖片

<input type="file" class="file" value="上傳" accept="image/*">

三、低版本瀏覽器

// HTML部分

<input type="file" id="filePath" onchange="limitTypes()">

// JavaScript部分

/* 經過擴展名，檢驗文件格式。
* @parma filePath{string} 文件路徑
* @parma acceptFormat{Array} 容許的文件類型
* @result 返回值{Boolen}：true or false
*/
 
function checkFormat(filePath,acceptFormat){
    var resultBool= false,
        ex = filePath.substring(filePath.lastIndexOf('.') + 1);
        ex = ex.toLowerCase();
        
    for(var i = 0; i < acceptFormat.length; i++){
    　　if(acceptFormat[i] == ex){
            resultBool = true;
            break;
    　　}
    }
    return resultBool;
};
        
function limitTypes(){
    var obj = document.getElementById('filePath');
    var path = obj.value;
    var result = checkFormat(path,['bmp','jpg','jpeg','png']);
    
    if(!result){
        alert('上傳類型錯誤，請從新上傳');
        obj.value = '';
    }
}

二12、正則表達式

//驗證郵箱
/^\w+@([0-9a-zA-Z]+[.])+[a-z]{2,4}$/
 
//驗證手機號
/^1[3|5|8|7]\d{9}$/
 
//驗證URL
/^http:\/\/.+\./
 
//驗證身份證號碼
/(^\d{15}$)|(^\d{17}([0-9]|X|x)$)/
 
//匹配字母、數字、中文字符
/^([A-Za-z0-9]|[\u4e00-\u9fa5])*$/
 
//匹配中文字符
/[\u4e00-\u9fa5]/
 
//匹配雙字節字符(包括漢字)
/[^\x00-\xff]/

二十3、限制字符數

// HTML部分

<input id="txt" type="text">

// JavaScript部分

//字符串截取
function getByteVal(val, max) {
    var returnValue = '';
    var byteValLen = 0;
    for (var i = 0; i < val.length; i++) { if (val[i].match(/[^\x00-\xff]/ig) != null) byteValLen += 2; else byteValLen += 1; if (byteValLen > max) break;
        returnValue += val[i];
    }
    return returnValue;
}
 
$('#txt').on('keyup', function () {
    var val = this.value;
    if (val.replace(/[^\x00-\xff]/g, "**").length > 14) {
        this.value = getByteVal(val, 14);
    }
});

二十4、驗證碼倒計時

// HTML部分

<input id="send" type="button" value="發送驗證碼">

一、JavaScript實現

// JavaScript部分
var times = 60, // 時間設置60秒
  timer = null;
 
document.getElementById('send').onclick = function () {
  // 計時開始
  timer = setInterval(function () {
  times--;
     if (times <= 0) {
        send.value = '發送驗證碼';
        clearInterval(timer);
        send.disabled = false;
        times = 60;
     } else {
        send.value = times + '秒後重試';
        send.disabled = true;
     }
  }, 1000);
}

二、jQuery實現

var times = 60,
    timer = null;
 
$('#send').on('click', function () {
    var $this = $(this);
    
    // 計時開始
    timer = setInterval(function () {
        times--;
        
        if (times <= 0) {
            $this.val('發送驗證碼');
            clearInterval(timer);
            $this.attr('disabled', false);
            times = 60;
        } else {
            $this.val(times + '秒後重試');
            $this.attr('disabled', true);
        }
    }, 1000);
});

二十5、時間倒計時

var times = 60,
    timer = null;
 
$('#send').on('click', function () {
    var $this = $(this);
    
    // 計時開始
    timer = setInterval(function () {
        times--;
        
        if (times <= 0) {
            $this.val('發送驗證碼');
            clearInterval(timer);
            $this.attr('disabled', false);
            times = 60;
        } else {
            $this.val(times + '秒後重試');
            $this.attr('disabled', true);
        }
    }, 1000);
});

二十6、倒計時跳轉

// HTML部分

<div id="showtimes"></div>

// JavaScript部分

// 設置倒計時秒數  
var t = 10;  
 
// 顯示倒計時秒數  
function showTime(){  
    t -= 1;  
    document.getElementById('showtimes').innerHTML= t;  
 
    if(t==0){  
        location.href='error404.asp';  
    }  
 
    //每秒執行一次 showTime()  
    setTimeout("showTime()",1000);  
}  
 
showTime();

二十7、時間戳、毫秒格式化

function formatDate(now) {
    var y = now.getFullYear();
    var m = now.getMonth() + 1; // 注意 JavaScript 月份+1
    var d = now.getDate();
    var h = now.getHours();
    var m = now.getMinutes();
    var s = now.getSeconds();
    
    return y + "-" + m + "-" + d + " " + h + ":" + m + ":" + s;
}
 
var nowDate = new Date(1442978789184);
 
alert(formatDate(nowDate));

二十8、當前日期

var calculateDate = function(){
 
    var date = new Date();
    var weeks = ["日","一","二","三","四","五","六"];
 
    return date.getFullYear()+"年"+(date.getMonth()+1)+"月"+
    date.getDate()+"日 星期"+weeks[date.getDay()];
}
 
$(function(){
    $("#dateSpan").html(calculateDate());
});

二十9、判斷週六/週日

// HTML部分

<p id="text"></p>

// JavaScript部分

function time(y,m){
    var tempTime = new Date(y,m,0);
    var time = new Date();
    var saturday = new Array();
    var sunday = new Array();
    
    for(var i=1;i<=tempTime.getDate();i++){
        time.setFullYear(y,m-1,i);
        
        var day = time.getDay();
        
        if(day == 6){
            saturday.push(i);
        }else if(day == 0){
            sunday.push(i);
        }
    }
    
    var text = y+"年"+m+"月份"+"<br />"
                +"週六："+saturday.toString()+"<br />"
                +"週日："+sunday.toString();
                
    document.getElementById("text").innerHTML = text;
}
time(2018,5);