js常用到的代码片段

1、阻止默认行为

// 原生js

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

});

 

2、阻止冒泡

// 原生js

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

});

 

3、鼠标滚轮事件

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

    } 

});

 

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

function issupportsvg() { 

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

    return !!document.createelementns &&!!document.createelementns(svg_ns, 'svg').createsvgrect; 

}

// 测试

console.log(issupportsvg());

 

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

function issupportcanvas() {

    if(document.createelement('canvas').getcontext){

        return true;

    }else{

        return false;

    }

}

// 测试，打开谷歌浏览器控制台查看结果

console.log(issupportcanvas());

 

6、检测是否是微信浏览器

function isweixinclient() {

    var ua = navigator.useragent.tolowercase(); 

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

        return true; 

    } else { 

        return false; 

    }

}

// 测试

alert(isweixinclient());

 

7、jquery 获取鼠标在图片上的坐标

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

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

 

js

// 原生js版本

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

});

 

9、常用的一些正则表达式

//匹配字母、数字、中文字符 

/^([a-za-z0-9]|[\u4e00-\u9fa5])*$/ 

//验证邮箱 

/^\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)$)/ 

//匹配中文字符的正则表达式 

/[\u4e00-\u9fa5]/ 

//匹配双字节字符(包括汉字在内) 

/[^\x00-\xff]/

 

10、js时间戳、毫秒格式化

function formatdate(now) { 

    var y = now.getfullyear();

    var m = now.getmonth() + 1; // 注意js里的月要加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(2016, 5, 13, 19, 18, 30, 20);

console.log(nowdate.gettime()); // 获得当前毫秒数: 1465816710020

console.log(formatdate(nowdate));

 

11、js限定字符数（注意：一个汉字算2个字符）

html

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

 

js

//字符串截取

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

    }

});

 

 

12、js判断是否移动端及浏览器内核

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('移动端'); 

}

 

13、getboundingclientrect() 获取元素位置

//它返回一个对象，其中包含了left、right、top、bottom四个属性

var mydiv = document.getelementbyid('mydiv');

var x = mydiv.getboundingclientrect().left; 

var y = mydiv.getboundingclientrect().top; 

// 相当于jquery的： $(this).offset().left、$(this).offset().top // js的：this.offsetleft、this.offsettop

 

14、html5全屏

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

 

15、html5 dom 选择器

// queryselector() 返回匹配到的第一个元素

var item = document.queryselector('.item');

console.log(item);

// queryselectorall() 返回匹配到的所有元素，是一个nodelist集合

var items = document.queryselectorall('.item');

console.log(items[0]);