template.js

悠悠 2022-04-10 04:51 189阅读 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}$/;  // 手机 + 固话的正则
    }

template.js

发表评论取消回复

还没有评论，来说两句吧...

相关阅读