欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

js常用到的代码片段

程序员文章站 2022-03-09 12:57:19
1、阻止默认行为 // 原生js document.getElementById('btn').addEventListener('click', function (event) { event = event || window.event; if (event.preventDefault){ ......

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