前端常用js代码片段
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(); });
鼠标滚轮事件 $('#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'); } });
检测浏览器是否支持svg function isSupportSVG() { var SVG_NS = 'http://www.w3.org/2000/svg'; return !!document.createElementNS &&!!document.createElementNS(SVG_NS, 'svg').createSVGRect; } // 测试 console.log(isSupportSVG());
检测浏览器是否支持canvas function isSupportCanvas() { if(document.createElement('canvas').getContext){ return true; }else{ return false; } } // 测试,打开谷歌浏览器控制台查看结果 console.log(isSupportCanvas());
检测是否是微信浏览器 function isWeiXinClient() { var ua = navigator.userAgent.toLowerCase(); if (ua.match(/MicroMessenger/i)=="micromessenger") { return true; } else { return false; } } // 测试 alert(isWeiXinClient());
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); });
验证码倒计时代码 <!-- 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); });
常用的一些正则表达式 //匹配字母、数字、中文字符 /^([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]/
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));
js限定字符数(注意:一个汉字算2个字符) <input id="txt" type="text"> //字符串截取 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); } });
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('移动端'); }
java 获取当前月 第一天 最后一天
//获取的值 first last 格式都为yyyy-mm-dd 例如:2001-01-01 如果需要转换为date格式可使用parse()方法
SimpleDateFormat format = new SimpleDateFormat("yyyy-MM-dd");
//前台格式化字符串类事件
var date = new Date(Date.parse(dateVal.replace(/-/g,"/")));
//("yyyy-MM-dd hh:mm:ss")与("yyyy-MM-dd HH:mm:ss")区别:小时为hh则是12小时制 HH为24小时制
Calendar c = Calendar.getInstance();
c.add(Calendar.MONTH,0);//0 当前月,-1上一个月,1下一个月
c.set(Calendar.DAY_OF_MONTH,1);//设置为1号,当前日期既为本月第一天
c.add(Calendar.MONTH, -1);//获取当前时间上一个月
String first = format.format(c.getTime());
c.set(Calendar.DAY_OF_MONTH,c.getActualMaximum(Calendar.DAY_OF_MONTH));
String last = format.format(ca.getTime()) + " 23:59:59";
int y=c.get(Calendar.YEAR); //年
int m=c.get(Calendar.MONTH); //月
int d=c.get(Calendar.DATE); //日
int h=c.get(Calendar.HOUR_OF_DAY); //时
int mi=c.get(Calendar.MINUTE); //分
int s=c.get(Calendar.SECOND); //秒
//date格式时间
DateUtils.parseDate(first);
DateUtils.parseDate(last)
//java后台获取方式 "#.00"表示保留的小数后边几位 DecimalFormat df = new DecimalFormat("#.00"); df.format(new BigDecimal(需要格式化的String类型数据)) //前台格式化方式 <td > <script type="text/javascript"> var b="${detailList.chargeSum}"; if(b!=""){ //保留多少位num toFixed(num); document.write(Number(b).toFixed(2)); } </script> </td>
“autocomplete”属性,禁止历史的显示 <input class="" type="text" autocomplete="off"></input>
如果一个元素有多个class可以用下面方法移除其中一个 div.className = div.className.replace(/(^|\s+)fixed(?=$|\s+)/,""); div 为要修改样式的元素 fixed 为要移除的样式
//获取质素(素数)效率最高 function demo(){ var arr = []; for (x = 1; x < 100000; x++) { arr.push(x); } var arr_new = arr.filter(function (num, index, self) { if ( num === 1) { return false ; } if ( num === 2||num === 3) {return num ;} // 不在6的倍数两侧的一定不是质数 if (num % 6 != 1 && num % 6 != 5) {return false;} var sqrt = Math.sqrt(num); for (let i = 5; i <= sqrt; i += 6) { if (num % i == 0 || num % (i + 2) == 0) {return false;} } return true; }); return arr_new; }
//JavaScript获取不重复随机数 var a=100;//取值最大范围 var b=6;//取值个数 var x=[]; for(i = 0; i < a; i++){ x[i] = i; } for(i = 0; i < b; i++){ t = Math.floor(Math.random()*(a-i)+i); console.log(i+"到"+a+"的随机数:"+t); var m=x[t]; x[t]=x[i]; x[i]=m; } console.log(x.slice(0,b));
//js 数组去重 var mycars=new Array("c","d","c","f","g","j") unique(mycars); function unique(array) { console.log("array:"+array); if (!Array.isArray(array)) return; let newArray = []; for(let i=0, len=array.length; i<len; i++) { if (!newArray.includes(array[i])) { newArray.push(array[i]); } } console.log("newArray:"+newArray); }
var mycars1=unique(mycars);
function unique(array) {
if (!Array.isArray(array)) return;
return Array.from(new Set(array)); // [...new Set(array)]
}
console.log("mycars1:"+mycars1); //获取重复的数据 function unique(array) { if (!Array.isArray(array)) return; let newArray = []; for(let i=0, len=array.length; i<len; i++) { let itemAtIndex = array[i]; if (array.indexOf(itemAtIndex) === array.lastIndexOf(itemAtIndex)) { newArray.push(itemAtIndex); } } return newArray; }