zoukankan      html  css  js  c++  java
  • 关于js(二)----------------分享前端开发常用代码片段

    一、预加载图像

    如果你的网页中需要使用大量初始不可见的(例如,悬停的)图像,那么可以预加载这些图像。

    二、检查图像是否加载

    有时为了继续脚本,你可能需要检查图像是否全部加载完毕。

    你也可以使用 ID 或 CLASS 替换<img> 标签来检查某个特定的图像是否被加载。

    三、自动修复破坏的图像

    逐个替换已经破坏的图像链接是非常痛苦的。不过,下面这段简单的代码可以帮助你。

     

    四、悬停切换

    当用户鼠标悬停在可点击的元素上时,可添加类到元素中,反之则移除类。

     

    只需要添加必要的 CSS 即可。更简单的方法是使用 toggleClass() 方法。

     

    五、淡入淡出/显示隐藏

     

    六、鼠标滚轮

    $('#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');

        }

    });

    七、鼠标坐标

     

    1、JavaScript实现

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

    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;

    2、jQuery实现

    $('#ele').click(function(event){

        //获取鼠标在图片上的坐标

        console.log('X:' + event.offsetX+' Y:' + event.offsetY);

        

        //获取元素相对于页面的坐标

        console.log('X:'+$(this).offset().left+' Y:'+$(this).offset().top);

    });

    八、禁止移动端浏览器页面滚动

     

    1、HTML实现

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

    2、JavaScript实现

    document.addEventListener('touchmove', function(event) {

        event.preventDefault();

    });

    九、阻止默认行为

    // 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();

    });

    十、阻止冒泡

    // 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();

    });

    十一、检测浏览器是否支持svg

    function isSupportSVG() {

        var SVG_NS = 'http://www.w3.org/2000/svg';

        return !!document.createElementNS &&!!document.createElementNS(SVG_NS,'svg').createSVGRect;

    }

    console.log(isSupportSVG());

    十二、检测浏览器是否支持canvas

    function isSupportCanvas() {

        if(document.createElement('canvas').getContext){

            return true;

        }else{

            return false;

        }

    }

    console.log(isSupportCanvas());

    十三、检测是否是微信浏览器

    function isWeiXinClient() {

        var ua = navigator.userAgent.toLowerCase();

        if (ua.match(/MicroMessenger/i)=="micromessenger") {

            return true;

        } else {

            return false;

        }

    }

    alert(isWeiXinClient());

    十四、检测是否移动端及浏览器内核

    var browser = {

        versionsfunction() {

            var u = navigator.userAgent;

            return {

                tridentu.indexOf('Trident') > -1, //IE内核

                prestou.indexOf('Presto') > -1, //opera内核

                webKitu.indexOf('AppleWebKit') > -1, //苹果、谷歌内核

                geckou.indexOf('Firefox') > -1, //火狐内核Gecko

                mobile: !!u.match(/AppleWebKit.*Mobile.*/), //是否移动终端

                ios: !!u.match(/(i[^;]+;( U;)? CPU.+Mac OS X/), //ios

                androidu.indexOf('Android') > -1 || u.indexOf('Linux') > -1, //android

                iPhoneu.indexOf('iPhone') > -1 , //iPhone

                iPadu.indexOf('iPad') > -1, //iPad

                webAppu.indexOf('Safari') > -1 //Safari

            };

        }

    }

    if (browser.versions.mobile() || browser.versions.ios() || browser.versions.android() ||browser.versions.iPhone() || browser.versions.iPad()) {

        alert('移动端');

    }

    十五、检测是否电脑端/移动端

    var browser={

        versions:function(){

            var u = navigator.userAgent, app = navigator.appVersion;

            var sUserAgent = navigator.userAgent;

            return {

            tridentu.indexOf('Trident') > -1,

            prestou.indexOf('Presto') > -1,

            isChromeu.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,

            webKitu.indexOf('AppleWebKit') > -1,

            geckou.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1,

            mobile: !!u.match(/AppleWebKit.*Mobile.*/),

            ios: !!u.match(/(i[^;]+;( U;)? CPU.+Mac OS X/),

            androidu.indexOf('Android') > -1 || u.indexOf('Linux') > -1,

            iPhoneu.indexOf('iPhone') > -1,

            iPadu.indexOf('iPad') > -1,

            iWinPhoneu.indexOf('Windows Phone') > -1

            };

        }()

    }

    if(browser.versions.mobile || browser.versions.iWinPhone){

        window.location = "http:/www.baidu.com/m/";

    }

    十六、检测浏览器内核

    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浏览器  

        }    

    }

    十七、强制移动端页面横屏显示

    $( window ).on( "orientationchange", function( event ) {

        if (event.orientation=='portrait') {

            $('body').css('transform', 'rotate(90deg)');

        } else {

            $('body').css('transform', 'rotate(0deg)');

        }

    });

    $( window ).orientationchange();

    十八、电脑端页面全屏显示

    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);

    十九、获得/失去焦点

     

    1、JavaScript实现

    <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";

            }

        };

    }

    2、jQuery实现

    <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();

        }

    });

    二十、获取上传文件大小

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

    // 兼容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;

    }

    二十一、限制上传文件类型

     

    1、高版本浏览器

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

    2、限制图片

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

    3、低版本浏览器

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

    /* 通过扩展名,检验文件格式。

    * @parma filePath{string} 文件路径

    * @parma acceptFormat{Array} 允许的文件类型

    * @result 返回值{Boolen}:true or false

    */

    function checkFormat(filePath,acceptFormat){

        var resultBoolfalse,

            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 = '';

        }

    }

    二十二、正则表达式

    //验证邮箱

    /^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]/

    二十三、限制字符数

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

    //字符串截取

    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; elsebyteValLen += 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);

        }

    });

    二十四、验证码倒计时

    <input id="send" type="button" value="发送验证码">

    // 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);

    }

    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);

    });

    二十五、时间倒计时

    <p id="_lefttime"></p>

    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);

    });

    二十六、倒计时跳转

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

    // 设置倒计时秒数  

    var t = 10;  

    // 显示倒计时秒数  

    function showTime(){  

        t -= 1;  

        document.getElementById('showtimes').innerHTMLt;  

        if(t==0){  

            location.href='error404.asp';  

        }  

        //每秒执行一次 showTime()  

        setTimeout("showTime()",1000);  

    }  

    showTime();

    二十七、时间戳、毫秒格式化

    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));

    二十八、当前日期

    var calculateDate = function(){

        var date = new Date();

        var weeks = ["日","一","二","三","四","五","六"];

        return date.getFullYear()+"年"+(date.getMonth()+1)+"月"+

        date.getDate()+"日 星期"+weeks[date.getDay()];

    }

    $(function(){

        $("#dateSpan").html(calculateDate());

    });

    二十九、判断周六/周日

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

    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);

    三十、AJAX调用错误处理

     

    当 Ajax 调用返回 404 或 500 错误时,就执行错误处理程序。如果没有定义处理程序,其他的 jQuery 代码或会就此罢工。定义一个全局的 Ajax 错误处理程序

    三十一、链式插件调用

    jQuery 允许“链式”插件的方法调用,以减轻反复查询 DOM 并创建多个 jQuery 对象的过程。

    通过使用链式,可以改善

    还有一种方法是在(前缀$)变量中高速缓存元素

    链式和高速缓存的方法都是 jQuery 中可以让代码变得更短和更快的最佳做法。

  • 相关阅读:
    ArrayList用法
    MessageBox
    将文本文件导入Sql数据库
    在桌面和菜单中添加快捷方式
    泡沫排序
    Making use of localized variables in javascript.
    Remove double empty lines in Visual Studio 2012
    Using Operations Manager Connectors
    Clear SharePoint Designer cache
    Programmatically set navigation settings in SharePoint 2013
  • 原文地址:https://www.cnblogs.com/huangqiao/p/9040095.html
Copyright © 2011-2022 走看看