HTML5 DOM 选择器
// querySelector() 返回匹配到的第一个元素
var item = document.querySelector('.item');
console.log(item);
// querySelectorAll() 返回匹配到的所有元素,是一个nodeList集合
var items = document.querySelectorAll('.item');
console.log(items[0]);
阻止默认行为
document.getElementById('btn').addEventListener('click', function (event) {
event = event || window.event;
if (event.preventDefault){
event.preventDefault();
} else{
event.returnValue = false;
}
}, false);
$('#btn').on('click', function (event) {
event.preventDefault();
});
阻止冒泡
document.getElementById('btn').addEventListener('click', function (event) {
event = event || window.event;
if (event.stopPropagation){
event.stopPropagation();
} else{
event.cancelBubble = true;
}
}, false);
$('#btn').on('click', function (event) {
event.stopPropagation();
});
鼠标滚轮事件
$('body').on("mousewheel DOMMouseScroll", function (event) {
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);
}
console.log(isWeiXinClient());
获取鼠标在body上的坐标
$('body').click(function(event){
console.log('X:' + event.offsetX+'\n Y:' + event.offsetY);
console.log('X:'+$(this).offset().left+'\n Y:'+$(this).offset().top);
});
发送验证码倒计时代码
<input id="send" type="button" value="发送验证码">
var times = 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);
}
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);
});
ps:鉴于个人经验有限,所有观点,如有异议,请直接回复讨论(请勿发表攻击言论)。
加入QQ群209952809(需回答问题,答案为csdn);群聊更快解决问题,更happy。