分享前端开发常用代码片段

た入场券 2022-05-25 13:14 181阅读 0赞

一、预加载图像

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

![clipboard.png][]

二、检查图像是否加载

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

![clipboard.png][clipboard.png 1]

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

三、自动修复破坏的图像

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

![clipboard.png][clipboard.png 2]

四、悬停切换

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

![clipboard.png][clipboard.png 3]

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

![clipboard.png][clipboard.png 3]

五、淡入淡出/显示隐藏

![clipboard.png][clipboard.png 4]

六、鼠标滚轮

$('#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实现

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

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

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

十六、检测浏览器内核

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

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

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

十九、获得/失去焦点

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、高版本浏览器

2、限制图片

3、低版本浏览器

<input type="file" id="filePath" onchange="limitTypes()"> /* 通过扩展名，检验文件格式。 * @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 = ''; } }

二十二、正则表达式

//验证邮箱
    
    /^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; 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);
    
        }
    
    });

二十四、验证码倒计时

<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').innerHTML= t; 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 错误处理程序

![clipboard.png][clipboard.png 5]

三十一、链式插件调用

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

![clipboard.png][clipboard.png 6]

通过使用链式，可以改善

![clipboard.png][clipboard.png 7]

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

![clipboard.png][clipboard.png 8]

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

[Fundebug][]提供JavaScript监控，支持所有主流前端框架，微信小程序监控，微信小游戏监控，后端Node.js监控。

![1386816-20180502112633892-1858746955.png][]

您可能感兴趣的

1.  [详解1000+项目数据分析出来的10大JavaScript错误][1000_10_JavaScript]  
    
2.  [10个用Console来Debug的高级技巧][10_Console_Debug]  
    
3.  [Fundebug支持区分Source Map版本][Fundebug_Source Map]  
    
4.  [Debug前端HTML/CSS][Debug_HTML_CSS]

原文链接：https://segmentfault.com/a/1190000014861862?utm\_source=index-hottest

[clipboard.png]: /images/20220525/36ad7b4e2f3945ab9600ded2096b5086.png
[clipboard.png 1]: /images/20220525/6e0610b9a2b34a698a12aabcb076752c.png
[clipboard.png 2]: /images/20220525/b73fabc81b3f41b2abe323ef44138115.png
[clipboard.png 3]: /images/20220525/9b42c4a559d54bdbb09bb6aaf5f4e49f.png
[clipboard.png 4]: /images/20220525/d95608976f3e4133bd77e601dd5fd29d.png
[clipboard.png 5]: /images/20220525/5e99533da9024e608955a5105604dc40.png
[clipboard.png 6]: /images/20220525/549b5b3c338648edbc1fa9580f74132a.png
[clipboard.png 7]: /images/20220525/99e1d268f9a7426eac91811dbbc5d5d1.png
[clipboard.png 8]: /images/20220525/0833bd5c251c44d7a4d7e7b4f08c7901.png
[Fundebug]: https://www.fundebug.com
[1386816-20180502112633892-1858746955.png]: /images/20220525/d7d4ddf5fdcc4a50b1899d5df60ee9c8.png
[1000_10_JavaScript]: https://blog.fundebug.com/2018/03/12/top-10-javascript-errors-from-1000-projects/
[10_Console_Debug]: https://blog.fundebug.com/2018/03/19/10-tips-for-debugging-with-console/
[Fundebug_Source Map]: https://blog.fundebug.com/2017/12/26/fundebug-can-distinguish-sourcemap-version/
[Debug_HTML_CSS]: https://blog.fundebug.com/2018/01/02/how-to-debug-frontend-html-css/