template.js 悠悠 2022-04-10 04:51 200阅读 0赞 `\s` 空白字符,包括: <table> <thead> <tr> <th>\b</th> <th>space character</th> <th>空格符</th> </tr> </thead> <tbody> <tr> <td>\n</td> <td>new line character</td> <td>换行符</td> </tr> <tr> <td>\v</td> <td>vertical tab character</td> <td>垂直换行符</td> </tr> <tr> <td>\r</td> <td>回车符</td> <td>carriage return character</td> </tr> <tr> <td>\t</td> <td>tab character</td> <td>制表符</td> </tr> <tr> <td>\b</td> <td>backspace character</td> <td>空格符</td> </tr> <tr> <td>\f</td> <td>form feed character</td> <td>换页符</td> </tr> </tbody> </table> -------------------- ### 浏览器 ### /**打开新的浏览器窗口*/ // 1 window.location.href = ''; //一般都是用这种方法打开新的页面,即从一个页面跳到另一个页面 // 2 window.open(); //打开新窗口 // 3 location.assign(); //加载新的文档 // 4, // Cannot set property 'location' of null,可能是用户设置了阻止窗口弹出。 var telUrl = '/yunweiyun/hwxtFault.htm?postel=' + stoUserTel + '&compId=' + stoCompId + '&kfTelType=' + stoKfTelType + "&znkf=" + znkf; var tempwindow = window.open('_blank'); tempwindow.location = telUrl; // 函数:window.open打开的浏览器窗口,检测是否被屏蔽 var blocked = false; try{ var wroWin = window.open('http://www.wrox.com', '_blanck'); if (wroWin == null) { blocked = true; } } catch (ex) { blocked = true; } if (blocked) { alert('the popup was blocked'); } /**浏览器窗口的内部高度(不包括工具栏/滚动条)*/ var w = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth; var h = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight; /**屏幕的宽度和高度*/ var y = screen.availWidth; var z = screen.availHeight; /**返回上一页*/ //①<a href="javascript:history.go(-1)"></a> /**阻止默认的链接的跳转*/ $('a').click(function (e) { e.preventDefault(); }); // 从url获取指定属性name的值 function getstr(name) { var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i"); var r = window.location.search.substr(1).match(reg); if (r != null) return decodeURIComponent(r[2]); return null; } /** *解析url参数 * @example ?id=123456&a=b * @return Object {id:12345,a:b} */ export function urlParse() { let url = window.location.search; let obj = {}; let reg = /[?&][^?&]+=[^?&]+/g; let arr = url.match(reg); // 返回一个数组 // ['?id=12345', '&a=b'] if (arr) { arr.forEach((item) => { let tempArr = item.substring(1).split('='); let key = decodeURIComponent(tempArr[0]); let val = decodeURIComponent(tempArr[1]); obj[key] = val; }); } return obj; }; /**关闭浏览器窗口*/ var browser = { versions: function () { var u = navigator.userAgent, app = navigator.appVersion; return { // 移动终端浏览器版本信息 trident: !!u.match('Trident'), // IE内核 presto: !!u.match('Presto'), // opera内核 webKit: !!u.match('AppleWebKit'), // 苹果、谷歌内核 gecko: !!u.match('Gecko') && !u.match('KHTML'), // 火狐内核 mobile: !!u.match(/AppleWebKit.*Mobile.*/), // 是否为移动终端 ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), // ios终端 android: !!u.match('Android') || !!u.match('Linux') , //android终端或uc浏览器 iPhone: !!u.match('iPhone'), // 是否为iPhone或者QQHD浏览器 iPad: !!u.match('iPad'), // 是否iPad webApp: !u.match('Safari') // 是否web应该程序,没有头部与底部 }; }() } function closeWeb() { if (browser.versions.mobile) { // 判断是否是移动设备打开 var ua = navigator.userAgent.toLowerCase(); // 获取判断用的对象 if (ua.match(/MicroMessenger/i) == "micromessenger") { // 在微信中打开 WeixinJSBridge.call('closeWindow'); return false; } else if (ua.match(/WeiBo/i) == "weibo") { // 在新浪微博客户端打开 alert("weibo"); } else if (ua.match(/QQ/i) == "qq") { // qq alert("QQ"); } else if (!!ua.match(/aplipay/)) { // 支付宝 document.addEventListener('AlipayJSBridgeReady',function(){ AlipayJSBridge.call('closeWebview'); // 关闭窗口 AlipayJSBridge.call('exitApp'); // 退出当前H5应用 AlipayJSBridge.call('popWindow',{ // 关闭窗口,可传递参数 data: { } }); }); } else if (!!ua.match(/baidu/)) { // 百度钱包 BLightApp.closeWindow(); } else if (!!ua.match(/DingTalk/ig)) { // 钉钉 var div = '<script src="http://g.alicdn.com/dingding/open-develop/1.9.0/dingtalk.js" type="text/javascript"><\/script>'; $('body').append(div); dd.biz.navigation.close({ onSuccess: function (result) { }, onFail: function (err) { } }) } if (browser.versions.ios || browser.versions.iPhone || browser.versions.iPad) { alert("苹果浏览器打开"); //是否在IOS浏览器打开 } else if (browser.versions.android) { alert("安卓浏览器打开") //是否在安卓浏览器打开 } } else { alert("PC"); } closeWebPage(); } // 关闭浏览器 function closeWebPage() { var userAgent = navigator.userAgent; if (userAgent.indexOf("Firefox") != -1 || userAgent.indexOf("Chrome") != -1) { window.location.href = "about:blank"; window.opener = null; window.close(); } else if (userAgent.indexOf('Android') > -1 || userAgent.indexOf('Linux') > -1) { window.opener = null; window.open('about:blank', '_self', '').close(); } else { window.opener = null; window.open("about:blank", "_self"); window.close(); } } //如果是微信浏览器,关闭窗口时清空sesseionStorage if (isWeiXin()) { WeixinJSBridge.invoke('closeWindow', {}, function (res) {//微信关闭窗口时 sessionStorage.removeItem(storageSign); }); } -------------------- ### 鼠标事件 ### /**想点击body某个地方出现div,点击body中除了某个div以外的地方,该div会消失,这个时候就需要用到阻止事件的冒泡*/ e ? e.stopPropagation() : event.cancelBubble = true; /**判断是鼠标的哪个键点击了网页*/ function whichButton(event) { var btnNum = event.button; if (btnNum == 2) { alert("您点击了鼠标右键!") } else if (btnNum == 0) { alert("您点击了鼠标左键!") } else if (btnNum == 1) { alert("您点击了鼠标中键!"); } else { alert("您点击了" + btnNum + "号键,我不能确定它的名称。"); } } /**判断键盘按键的keycode*/ function whichButton(event) { alert(event.keyCode); } /**鼠标指针的x,y坐标*/ function show_coords(event) { var x = event.clientX; var y = event.clientY; alert("X coords: " + x + ", Y coords: " + y); } /**鼠标指针相对于屏幕的坐标*/ function coordinates(event) { x = event.screenX; y = event.screenY; alert("X=" + x + " Y=" + y) } /**pageX() 属性是鼠标指针的位置,相对于文档的左边缘。*/ var pageX = e.pageX; var pageY = e.pageY; /**当前postition:relative||absolute||fixed的元素的left,和top的值 *offset() 方法设置或返回被选元素相对于文档的偏移坐标。它返回一个带有两个属性(以像素为单位的 top 和 left 位置)的对象。 */ var posX = $(this).offset().left; var posY = $(this).offset().top; /**判断点击的标签的名称*/ function whichElement(e) { var targ; if (!e) { var e = window.event; } if (e.target) { targ = e.target; } else if (e.srcElement) { targ = e.srcElement; } if (targ.nodeType == 3) { // defeat Safari bug targ = targ.parentNode; } var tname; tname = targ.tagName; alert("You clicked on a " + tname + " element."); } /*触发的事件类型*/ function getEventType(event) { alert(event.type); } -------------------- ajax /* ajax请求替换文字 */ // responseText function loadXMLDoc() { var xmlhttp; if (window.XMLHttpRequest) { // IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码 xmlhttp = new XMLHttpRequest(); } else { // IE6, IE5 浏览器执行代码 xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.onreadystatechange = function () { if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { document.getElementById("myDiv").innerHTML = xmlhttp.responseText; } }; xmlhttp.open("GET", "/try/ajax/demo_get.php?t=" + Math.random(), true); xmlhttp.send(); } // responseXML function loadXMLDoc() { var xmlhttp; var txt, x, i; if (window.XMLHttpRequest) { // IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码 xmlhttp = new XMLHttpRequest(); } else { // IE6, IE5 浏览器执行代码 xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.onreadystatechange = function () { if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { xmlDoc = xmlhttp.responseXML; txt = ""; x = xmlDoc.getElementsByTagName("ARTIST"); for (i = 0; i < x.length; i++) { txt = txt + x[i].childNodes[0].nodeValue + "<br>"; } document.getElementById("myDiv").innerHTML = txt; } } xmlhttp.open("GET", "cd_catalog.xml", true); xmlhttp.send(); } /**设置各景点(class名为area)的大小和位置*/ $.ajaxSetup({ type: 'POST', dataType: 'json', error: function(jqXHR, textStatus, errorThrown) { ajaxLoadingHide(); console.log('jqXHR:', jqXHR, '\ntextStatus:' + textStatus + '\nerrorThrown:' + errorThrown); // alert(1); oneBtnShow('警告', '服务器错误!'); } }); $(document).ajaxError(function (event, xhr, options, exc) { // alert('服务器错误-错误地址:' + options.url); }); /**点击不同的button,出现的遮罩一样,里面的内容不一样*/ var jsonObj = [ { 'name': '钟楼', 'des': '句践命范蠡在浙江南路山巅筑西城抗吴,其陵固可守。固陵闻钟。' }, { 'name': '越王祠', 'des': '展出卧薪尝胆、筑城抗吴、东南称霸等越国复兴的历史。' }, { 'name': '望湖亭', 'des': '越王城山之巔有望湖亭,可眺钱塘江,俯视湘湖。' }, { 'name': '洗马池', 'des': '位于湘湖越王城内紧靠马门处,西有放生池和句践祠,呈长方形。周无垒石,为越王句践屯兵拒吴取“嘉鱼”之处。' }, { 'name': '古越亭', 'des': '位于城山古道上,将古道分上下两层,供游人小憩观景。' }, { 'name': '点将台', 'des': '范蠡点将台位于城山景区内,是景区主要景点之一。在范蠡点将台前可追忆范蠡、西施的爱情故事。' }, { 'name': '龙井双涌', 'des': '龙井双涌为清•乾隆时期湘湖八景之一,龙井为越王城山东南麓的两口水潭,此为双涌龙井之一,另一龙井在孙氏宗祠旁。' }, { 'name': '城山广场', 'des': '湘湖边上,依城山而建,是越王城的遗址,玩了广场,还可以上山玩玩,山上,湘湖一览无遗。' }, { 'name': '临水祖道', 'des': '公元前492年,越王句践离开固陵入臣于吴,群臣敬酒践行之地。' } ]; $area.each(function (index) { $(this).click(function () { $('.cover .scenicName').html(jsonObj[index].name); $('.cover .scenicDes').html(jsonObj[index].des); $('.cover').fadeIn(600); }); }); -------------------- ### 浏览器缓存 ### /**缓存*/ // cookie function checkCookie() { //检查cookies是否可用 if (navigator.cookieEnabled == true) { alert('cookies are enabled'); } else { alert('cookies are not enabled'); } } /*web存储: *①sessionStorage: sessionStorage方法针对一个 session 进行数据存储。当用户关闭浏览器窗口后,数据会被删除。 *②localStorage:localStorage 对象存储的数据没有时间限制。第二天、第二周或下一年之后,数据依然可用。 *不管是 localStorage,还是 sessionStorage,可使用的API都相同,常用的有如下几个(以localStorage为例): 保存数据:localStorage.setItem(key,value); 读取数据:localStorage.getItem(key); 删除单个数据:localStorage.removeItem(key); 删除所有数据:localStorage.clear(); 得到某个索引的key:localStorage.key(index); */ //如果是sessionStorage,则localStorage全部换成sessionStorage function clickCounter() { if (typeof(Storage) !== "undefined") { if (localStorage.flag) { localStorage.flag = Number(localStorage.flag) + 1; } else { localStorage.flag = 1; } if (localStorage.flag == 1) { alert('第一次进入'); } else { alert('不是第一次进入'); } document.getElementById("result").innerHTML = " 你已经点击了按钮 " + localStorage.flag + " 次 "; } else { document.getElementById("result").innerHTML = "对不起,您的浏览器不支持 web 存储。"; } } $(function () { clickCounter(); }); -------------------- ### 表单 ### /**表单*/ /*找到值为空字符串的所有元素*/ var emptyInput = $('.answer').filter(function () { return $.trim($(this).val()) == ''; }); /**trim:去除两边的空格*/ function trim(str) { var reg = /(^\s+)|(\s+$)/g; return str.replace(reg, '') } //去除左边的空格 var ltrim = function (str) { var reg = /^\s+/; returnstr.replaceI(reg, ""); }; //去除右边的空格 var rtrim = function (str) { var reg = /\s+$/; returnstr.replaceI(reg, ""); }; /**isEmpty*/ function isEmpty(str) { if (str === undefined) { return true; } else if (str == null) { return true; } else { var reg = /^\s*$/; return reg.test(str); } } while (true) { var input = prompt("输入"); if (!isEmpty(input)) { document.write(input); break; } else { alert("输入不能为空"); } } -------------------- ### 自适应 ### /*淘宝的自适应rem.js*/ (function (win, lib) { var doc = win.document; var docEl = doc.documentElement; var metaEl = doc.querySelector('meta[name="viewport"]'); var flexibleEl = doc.querySelector('meta[name="flexible"]'); var dpr = 0; var scale = 0; var tid; var flexible = lib.flexible || (lib.flexible = {}); //设置了viewport meta if (metaEl) { console.warn('将根据已有的meta标签来设置缩放比例'); var match = metaEl.getAttribute('content').match(/initial\-scale=([\d\.]+)/); if (match) { scale = parseFloat(match[1]); dpr = parseInt(1 / scale); } } else if (flexibleEl) {//设置了flexible meta var content = flexibleEl.getAttribute('content'); if (content) { var initialDpr = content.match(/initial\-dpr=([\d\.]+)/); var maximumDpr = content.match(/maximum\-dpr=([\d\.]+)/); if (initialDpr) { dpr = parseFloat(initialDpr[1]); scale = parseFloat((1 / dpr).toFixed(2)); } if (maximumDpr) { dpr = parseFloat(maximumDpr[1]); scale = parseFloat((1 / dpr).toFixed(2)); } } } //viewport或flexible //meta均未设置 if (!dpr && !scale) { var isAndroid = win.navigator.appVersion.match(/android/gi); var isIPhone = win.navigator.appVersion.match(/iphone/gi); var devicePixelRatio = win.devicePixelRatio; if (isIPhone) { // iOS下,对于2和3的屏,用2倍的方案,其余的用1倍方案 if (devicePixelRatio >= 3 && (!dpr || dpr >= 3)) { dpr = 3; } else if (devicePixelRatio >= 2 && (!dpr || dpr >= 2)) { dpr = 2; } else { dpr = 1; } } else { // 其他设备下,仍旧使用1倍的方案 dpr = 1; } scale = 1 / dpr; } docEl.setAttribute('data-dpr', dpr); //插入viewport meta if (!metaEl) { metaEl = doc.createElement('meta'); metaEl.setAttribute('name', 'viewport'); metaEl.setAttribute('content', 'initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no'); if (docEl.firstElementChild) { docEl.firstElementChild.appendChild(metaEl); } else { var wrap = doc.createElement('div'); wrap.appendChild(metaEl); doc.write(wrap.innerHTML); } } function refreshRem() { var width = docEl.getBoundingClientRect().width; if (width / dpr > 540) { width = 540 * dpr; } // var rem = width / 10; var rem = 100 * (width / 375); docEl.style.fontSize = rem + 'px'; flexible.rem = win.rem = rem; } //调整窗口时重置 win.addEventListener('resize', function () { clearTimeout(tid); tid = setTimeout(refreshRem, 300); }, false); // orientationchange 时也需要重算下吧 win.addEventListener("orientationchange", function () { clearTimeout(timer); timer = setTimeout(setFontSize, 300); }, false); //keyword:倒退,缓存相关 win.addEventListener('pageshow', function (e) { if (e.persisted) { clearTimeout(tid); tid = setTimeout(refreshRem, 300); } }, false); //设置基准字体 // if (doc.readyState === 'complete') { // doc.body.style.fontSize = 12 * dpr + 'px'; // } else { // doc.addEventListener('DOMContentLoaded', function(e) { // doc.body.style.fontSize = 12 * dpr + 'px'; // }, false); // } refreshRem(); flexible.dpr = win.dpr = dpr; flexible.refreshRem = refreshRem; flexible.rem2px = function (d) { var val = parseFloat(d) * this.rem; if (typeof d === 'string' && d.match(/rem$/)) { val += 'px'; } return val; } flexible.px2rem = function (d) { var val = parseFloat(d) / this.rem; if (typeof d === 'string' && d.match(/px$/)) { val += 'rem'; } return val; } })(window, window['lib'] || (window['lib'] = {})); -------------------- ### js基础 ### /**手机移动端alert出现如127.0.0.1星遥地理...的标题,以下方法是把这个标题除去*/ window.alert = function (name) { var iframe = document.createElement("IFRAME"); iframe.style.display = "none"; iframe.setAttribute("src", 'data:text/plain,'); document.documentElement.appendChild(iframe); window.frames[0].window.alert(name); iframe.parentNode.removeChild(iframe); } /** js获取字体的背景颜色 */ function getColor(elem) { var e = window.getComputedStyle ? window.getComputedStyle(elem, null) : elem.currentStyle; return e.backgroundColor; } /**日期格式*/ // 日期格式化 export function formatDate(date, fmt) { if (/(y+)/.test(fmt)) { fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length)); } let o = { 'M+': date.getMonth() + 1, 'd+': date.getDate(), 'h+': date.getHours(), 'm+': date.getMinutes(), 's+': date.getSeconds() }; for (let k in o) { if (new RegExp(`(${k})`).test(fmt)) { let str = o[k] + ''; fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? str : padLeftZero(str)); } } return fmt; } function padLeftZero(str) { return ('00' + str).substr(str.length); } // 函数:获取当前的日期时间 格式“yyyy-MM-dd HH:MM:SS” function getNowFormatDate() { var date = new Date(); var seperator1 = "-"; var seperator2 = ":"; var month = date.getMonth() + 1; var strDate = date.getDate(); if (month >= 1 && month <= 9) { month = "0" + month; } if (strDate >= 0 && strDate <= 9) { strDate = "0" + strDate; } var currentdate = date.getFullYear() + seperator1 + month + seperator1 + strDate + " " + date.getHours() + seperator2 + date.getMinutes() + seperator2 + date.getSeconds(); return currentdate; } { var reg = /^(\(\d{3,4}\)|\d{3,4}-|\s)?\d{7,14}$/; // 手机 + 固话的正则 }
还没有评论,来说两句吧...