常用JS-Web前端开发代码资源整理

web前端开发标准源代码|前端开发代码|前端开发轮播代码

HTML5 DOM 选择器

javascript 代码

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

阻止默认行为

javascript 代码

// 原生js
document.getElementById(‘btn’).addEventListener(‘click’, function (event) {
    event = event || window.event;
    if (event.preventDefault) {
        // w3c方法 阻止默认行为
        event.preventDefault();
    } else {
        // ie 阻止默认行为
        event.returnValue = false;
    }
}, false);
$(‘#btn’).on(‘click’, function (event) {
    event.preventDefault();
});

阻止冒泡

javascript 代码

// 原生js
document.getElementById(‘btn’).addEventListener(‘click’, function (event) {
    event = event || window.event;
    if (event.stopPropagation) {
        // w3c方法 阻止冒泡
        event.stopPropagation();
    } else {
        // ie 阻止冒泡
        event.cancelBubble = true;
    }
}, false);
$(‘#btn’).on(‘click’, function (event) {
    event.stopPropagation();
});

鼠标滚轮事件

javascript 代码

$(‘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

javascript 代码

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上的坐标

javascript 代码

$(‘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 –>
html 代码

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

javascript 代码

// 原生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全屏

javascript 代码

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个字符)
javascript 代码

//字符串截取
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);
    }
});
web前端开发博客代码编辑器|前端开发中的代码优化|前端开发写代码之前的准备
» 本文来自:前端开发者 » 《常用JS-Web前端开发代码资源整理》
» 本文链接地址:https://www.rokub.com/3902.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!