前言
在学习HTML的时候,我整理了一些常用的JS极简代码,看了觉得很有用,自己摘录下来分享给大家!
HTML5选择器
//参数均接收一个合法的css选择器
element = document.querySelector('.foo,.bar');//返回带有foo或者bar样式类的首个元素
elements = document.querySelectorAll('div.foo');//返回所有带foo类样式的nodeList集合
鼠标滚轮事件
$('#showPic').on("mousewheel DOMMouseScroll", function (e) {
var delta = (e.originalEvent.wheelDelta && (e.originalEvent.wheelDelta > 0 ? 1 : -1)) || // chrome & ie
(e.originalEvent.detail && (e.originalEvent.detail > 0 ? -1 : 1)); // firefox
if (delta > 0) {
// 向上滚
} else if (delta < 0) {
// 向下滚
}
});
阻止冒泡
//js方法
function stopPropagation(e) {
e = e || window.event;
if(e.stopPropagation) { //W3C阻止冒泡方法
e.stopPropagation();
} else {
e.cancelBubble = true; //IE阻止冒泡方法
}
}
document.getElementById('need_hide').onclick = function(e) {
stopPropagation(e);
}
//jQuery方法
$('.btn').click(function(){
return false //直接在方法里 return false 即可
})
阻止默认行为
e.preventDefault;//阻止默认行为
说明:该方法将通知 Web 浏览器不要执行与事件关联的默认动作(如果存在这样的动作)。例如,如果 type 属性是 “submit”,在事件传播的任意阶段可以调用任意的事件句柄,通过调用该方法,可以阻止提交表单。注意,如果 Event 对象的 cancelable 属性是 fasle,那么就没有默认动作,或者不能阻止默认动作。无论哪种情况,调用该方法都没有作用。
检测浏览器是否支持svg
function hasSVG(){
SVG_NS = 'http://www.w3.org/2000/svg';
return !!document.createElementNS &&!!document.createElementNS(SVG_NS, 'svg').createSVGRect;
}
alert(hasSVG())
检测是否是微信浏览器
function is_weixin(){
var ua = navigator.userAgent.toLowerCase();
if(ua.match(/MicroMessenger/i)=="micromessenger") {
return true;
} else {
return false;
}
}
alert(is_weixin())
JQuery获取鼠标在图片上的坐标
$('#imgtest').click(function(e){
//获取鼠标在图片上的坐标
alert('X:'+e.offsetX+'\n Y:'+e.offsetY);
//获取元素相对于页面的坐标
alert('X:'+$(this).offset().left+'\n Y:'+$(this).offset().top)
});
JS获取验证码倒计时效果
function getCode(obj,n){
var t=obj.value;
(function(){
if(n>0){
obj.disabled=true
obj.value='倒计时'+(n--)+'秒';
setTimeout(arguments.callee,1000);
}else{
obj.disabled=false;
obj.value=t;
}
})();
}
Jquery类似模块加载器的方法
$.getScript("ajax/test.js", function() {
alert("Load was performed.");
});
JS检测浏览器是否支持Canvas
if(!document.createElement('canvas').getContext){
alert('您的浏览器弱爆了')
}else{
alert('您的浏览器很棒')
}
常用正则表达式
//匹配字母、数字、中文字符
/^([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]/
正则表达式我已经发过更详细的文章了,这里就不一一列举出代码了,感兴趣可以去看看我的往期文章:
[post cid=”184″ /]
JS时间戳格式化,毫秒格式化
function formatDate(now) {
var y=now.getFullYear();
var m=now.getMonth()+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 d=new Date(1442978789184);
alert(formatDate(d));
JS字符限定,一个汉字算两个字符
<input type="text" id="txt">
//字符串截取
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').bind('keyup',function(){
var val=this.value;
if(val.replace(/[^\x00-\xff]/g,"**").length>14){
this.value=getByteVal(val,14)
}
})
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('移动端');
};
document.write(navigator.userAgent+'<br><br>')
document.write(browser.versions.trident+'<span>//ie</span> <br>')
document.write(browser.versions.presto+'<span>//opera</span> <br>')
document.write(browser.versions.webKit+'<span>//苹果、谷歌内核</span> <br>')
document.write(browser.versions.gecko+'<span>//火狐内核</span> <br>')
document.write(browser.versions.mobile+'<span>//是否为移动终端</span> <br>')
document.write(browser.versions.ios+'<span>//ios</span> <br>')
document.write(browser.versions.android+'<span>//android</span> <br>')
document.write(browser.versions.iPhone+'<span>//iPhone</span> <br>')
document.write(browser.versions.iPad+'<span>//iPad</span> <br>')
document.write(browser.versions.webApp+'<span>//Safari</span> <br>')
getBoundingClientRect() 获取元素位置
//它返回一个对象,其中包含了left、right、top、bottom四个属性
var X= this.getBoundingClientRect().left;
var Y =this.getBoundingClientRect().top;
//相当于
//jquery的: this.offset().left、this.offset().top
//js的:this.offsetLeft、this.offsetTop
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)
复制文本
// 复制文本到剪切板
const copyToClipboard = (text) => navigator.clipboard.writeText(text);
copyToClipboard('XueMy.CN');
第几天
// 获取某个日期位于当前的第几天
const dayOfYear = (date) => Math.floor((date - new Date(date.getFullYear(),0,0)) / 1000 / 60 / 60 /24);
console.log(dayOfYear(new Date(2022,12,24)));//332
解析 URL 参数
// 解析 URL 中的参数
const parseQuery = (url) => {q = {};
url.replace(/([^?&=]+)=([^&]+)/g,
(_,k,v) => (q[k]) = v
);
return q;
};
console.log(parseQuery('https://www.xuemy.cn/search/js'));
console.log(parseQuery('search/js'));
对象属性筛选
// 筛选对象属性
const pick = (obj,...props) => Object.fromEntries(Object.entries(obj).filter(([k]) => props.includes(k))
);
console.log(pick({a:1,b:2,c:3},'a','c'));
随机颜色
// 随机 HEX 颜色方法一
const randomColor = () => '#' + Math.floor(Math.random() * 0xffffff).toString(16).padEnd(6,'0');
console.log(randomColor());
// 随机 HEX 颜色方法二
const randomColor = () => `#${Math.random().toString(16).substr(2, 6)}`;
console.log(randomColor());
//rgb 颜色随机
function rgb(){var r = Math.floor(Math.random()*256);
var g = Math.floor(Math.random()*256);
var b = Math.floor(Math.random()*256);
var rgb = '('+r+','+g+','+b+')';
return rgb;
}
console.log(rgb());
随机字符串
// 生成指定长度的随机字符串
const randomString = n => {
let str = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
let temp = '';
for(let i=0;i<n;i++){temp += str.charAt(Math.random()*35);
}
return temp;
}
console.log(randomString(8))
移除标记
// 移除字符串中的元素标记
const removeTag = (fragment) => new DOMParser().parseFromString(fragment,'text/html').body.textContent || '';
console.log(removeTag('<div>XueMy.CN</div>'));
© 版权声明
THE END
暂无评论内容