Fork me on GitHub

收集的一些常用的前端 Javascript 代码片段

字数统计: 2.2k字   |   阅读时长≈ 11分

目录

一、预加载图像

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

1
2
3
4
5
6
$.PreloadImages = function(){
	for(var i=0; i < arguments.length; i++){
		$("<img>").attr("src",arguments[i]);
	}
}
$.PreloadImages("img/image-1.png","img/image-2.png","img/image-3.png");

二、检查图像是否加载

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

1
2
3
$("img").load(function(e) {
    console.log("Image load successful!");
});

三、自动修复破坏的图像

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

1
2
3
4
5
$("img").on("error",function(){
	if(!$(this).hasClass("broken-image")){
		$(this).prop("src","img/broken-image.png").addClass("broken-image");
	}
});

<a id=d”” name=”d”>

四、鼠标滚轮

1
2
3
4
5
6
7
8
9
10
11
$('#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 实现

1
X:<input id="xxx" type="text" /> Y:<input id="yyy" type="text" />
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
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实现

1
2
3
4
5
6
7
$('#ele').click(function(event){
    //获取鼠标在 #ele 上落点的坐标 
    console.log('X：' + event.offsetX+'\n Y:' + event.offsetY); 

    //获取元素相对于页面的坐标 
    console.log('X：'+$(this).offset().left+'\n Y:'+$(this).offset().top);
});

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

1、HTML 实现

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

2、原生 JavaScript 实现

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

七、阻止默认行为

1、原生 JavaScript 实现

1
2
3
4
5
6
7
8
9
10
11
document.getElementById('btn').addEventListener('click', function (event) {
    event = event '' window.event；

    if (event.preventDefault){
        // W3C
        event.preventDefault();
    } else{
        // IE
        event.returnValue = false;
    }
}, false);

2、jQuery 实现

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

八、阻止冒泡

1、原生 JavaScript 实现

1
2
3
4
5
6
7
8
9
10
document.getElementById('btn').addEventListener('click', function (event) {
    event = event '' window.event；
    if (event.stopPropagation){
        // W3C
        event.stopPropagation();
    } else{
        // IE
        event.cancelBubble = true;
    }
}, false);

2、jQuery 实现

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

九、检测浏览器是否支持 svg

1
2
3
4
5
6
function isSupportSVG() { 
    var SVG_NS = 'http://www.w3.org/2000/svg';
    return !!document.createElementNS &&!!document.createElementNS(SVG_NS, 'svg').createSVGRect; 
} 

console.log(isSupportSVG());

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

1
2
3
4
5
6
7
8
9
function isSupportCanvas() {
    if(document.createElement('canvas').getContext){
        return true;
    }else{
        return false;
    }
}

console.log(isSupportCanvas());

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

1
2
3
4
5
6
7
8
9
10
function isWeiXinClient() {
    var ua = navigator.userAgent.toLowerCase(); 
    if (ua.match(/MicroMessenger/i)=="micromessenger") { 
        return true; 
    } else { 
        return false; 
    }
}

alert(isWeiXinClient());

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

1
2
3
4
5
6
7
8
$( window ).on( "orientationchange", function( event ) {
    if (event.orientation=='portrait') {
        $('body').css('transform', 'rotate(90deg)');
    } else {
        $('body').css('transform', 'rotate(0deg)');
    }
});
$( window ).orientationchange();

十三、获得/失去焦点

1、原生 JavaScript 实现

1
<input id="i_input" type="text" value='会员卡号/手机号'/>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
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 实现

1
<input type="text"  class="oldpsw" id="showPwd" value="请输入您的注册密码"/>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
$("#showPwd").focus(function() {
    var text_value=$(this).val();
    if (text_value =='请输入您的注册密码') {
		$(this).val("");
		$(this).attr("type","password");
    }
});
$("#showPwd").blur(function() {
    var text_value = $(this).val();
    if (text_value == "") {
		$(this).val("请输入您的注册密码");
		$(this).attr("type","text");
    }
});

十四、获取上传文件大小

1
<input type="file" id="filePath" onchange="getFileSize(this)"/>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
// 兼容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'; // 无法获取
        }
    }

    filesize = Math.round(filesize/1024*100)/100; //单位：kb
    console.log(filesize);
    return filesize;
}

十五、限制上传文件类型

1、高版本浏览器

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

2、限制图片

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

3、低版本浏览器

1
<input type="file" id="filePath" onchange="limitTypes()"/>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
/* 通过扩展名，检验文件格式。
 * @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 = '';
    }
}

十六、常用的正则表达式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
//验证邮箱 
/^\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]/

十七、限制字符数

1
<input id="txt" type="text">
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
//字符串截取
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);
    }
});

十八、验证码倒计时

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

1、原生 Javascript 实现

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
// 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);
}

2、jQuery 实现

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
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);
});

十九、时间倒计时

1
<p id="_lefttime"></p>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
function countdown() {

    var endtime = new Date("May 2, 2018 21:31:09");
    var nowtime = new Date();

    if (nowtime >= endtime) {
        document.getElementById("_lefttime").innerHTML = "倒计时间结束";
        return;
    }

    var leftsecond = parseInt((endtime.getTime() - nowtime.getTime()) / 1000);
    if (leftsecond < 0) {
        leftsecond = 0;
    }

    __d = parseInt(leftsecond / 3600 / 24);
    __h = parseInt((leftsecond / 3600) % 24);
    __m = parseInt((leftsecond / 60) % 60); 
    __s = parseInt(leftsecond % 60);

    document.getElementById("_lefttime").innerHTML = __d + "天" + __h + "小时" + __m + "分" + __s + "秒";
}

countdown();

setInterval(countdown, 1000);

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
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)); //结果：2015-26-23 11:26:29

二十一、当前日期

1
2
3
4
5
6
7
8
9
10
11
12
var calculateDate = function(){

    var date = new Date();
    var weeks = ["日","一","二","三","四","五","六"];

    return date.getFullYear()+"年"+(date.getMonth()+1)+"月"+
    date.getDate()+"日 星期"+weeks[date.getDay()];
}

$(function(){
    $("#dateSpan").html(calculateDate());
});

二十二、判断某个月份里面哪些天是周六/周日

1
<p id="text"></p>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
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); 
//结果：
//2018年5月份
//周六：5,12,19,26
//周日：6,13,20,27

二十三、AJAX 调用错误处理

1
2
3
$(document).ajaxError(function(event, jqXHR, ajaxOptions, thrownError) {
    console.log(thrownError);
});
赏

谢谢你请我吃糖果

支付宝
微信

扫一扫，分享到微信

tag:

    缺失模块。
    1、请确保node版本大于6.2
    2、在博客根目录（注意不是yilia-plus根目录）执行以下命令：
    npm i hexo-generator-json-content --save

    3、在根目录_config.yml里添加配置： 

      jsonContent:
    meta: false
    pages: false
    posts:
      title: true
      date: true
      path: true
      text: false
      raw: false
      content: false
      slug: false
      updated: false
      comments: false
      link: false
      permalink: false
      excerpt: false
      categories: false
      tags: true

主要技术栈：
Javascript、Html5、Css、Vue、Nodejs、React