在网上看到的常用js片段整理

g532439381
g532439381 发布于 2017-02-04 10:39:26 浏览:1612 类型:原创 - 随笔 分类:JavaScript - 网络资源学习 二维码: 作者原创 版权保护
HTML5 DOM 选择器


// querySelector() 返回匹配到的第一个元素
var item = document.querySelector('.item');
console.log(item)

// querySelectorAll() 返回匹配到的所有元素,是一个nodeList集合
var items = document.querySelectorAll('.item');
console.log(items[0]);


阻止默认行为

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


阻止冒泡


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


鼠标滚轮事件

$('body').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');
    } 
});


检测浏览器是否支持canvas

function isSupportCanvas() {
    return document.createElement('canvas').getContext ? true : false;
}

// 测试,打开谷歌浏览器控制台查看结果
console.log(isSupportCanvas());
检测是否是微信浏览器
function isWeiXinClient() {
    var ua = navigator.userAgent.toLowerCase(); 
    return !!(ua.match(/MicroMessenger/i)=="micromessenger" ? 1 : 0); 
}


// 测试
获取鼠标在body上的坐标

$('body').click(function(event){
    //获取鼠标在body上的坐标 
    console.log('X:' + event.offsetX+'\n Y:' + event.offsetY); 

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


发送验证码倒计时代码
<!-- dom -->
<input id="send" type="button" value="发送验证码">

// 原生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);
});


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);
获取元素位置,还可以用它判断元素的显示与隐藏
//它返回一个对象,其中包含了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


js限定字符数(注意:一个汉字算2个字符)
//字符串截取
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;
}

$('input').on('keyup', function () {
    var val = this.value;
    if (val.replace(/[^\x00-\xff]/g, "**").length > 14) {
        this.value = getByteVal(val, 14);
    }
});
z
给个赞 15 人点赞
收藏 57 人收藏
评论 已有 0 条评论;以下用户言论只代表其个人观点,不代表 前端网(QDFuns) 的观点或立场。
登录 以后才能发表评论
最新评论
还没有任何评论呢,赶紧抢先来一发吧!
g532439381 g532439381 作者

作者最新