template.js_template.js csdn-CSDN博客

本文链接：https://blog.csdn.net/aSuncat/article/details/85287637

\s 空白字符，包括：

\b	space character	空格符
\n	new line character	换行符
\v	vertical tab character	垂直换行符
\r	回车符	carriage return character
\t	tab character	制表符
\b	backspace character	空格符
\f	form feed character	换页符

浏览器

/**打开新的浏览器窗口*/
// 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}$/;  // 手机 + 固话的正则
}