伏龙阁资源网

详解javascript常用工具类的封装
站长资源 2024/11/28 佚名
2 0

前言

因为工作中经常用到这些方法，所有便把这些方法进行了总结。

JavaScript 1. type 类型判断

isString (o) { //是否字符串
  return Object.prototype.toString.call(o).slice(8, -1) === 'String'
}
isNumber (o) { //是否数字
  return Object.prototype.toString.call(o).slice(8, -1) === 'Number'
}
isObj (o) { //是否对象
  return Object.prototype.toString.call(o).slice(8, -1) === 'Object'
}
isArray (o) { //是否数组
  return Object.prototype.toString.call(o).slice(8, -1) === 'Array'
}
isDate (o) { //是否时间
  return Object.prototype.toString.call(o).slice(8, -1) === 'Date'
}
isBoolean (o) { //是否boolean
  return Object.prototype.toString.call(o).slice(8, -1) === 'Boolean'
}
isFunction (o) { //是否函数
  return Object.prototype.toString.call(o).slice(8, -1) === 'Function'
}
isNull (o) { //是否为null
  return Object.prototype.toString.call(o).slice(8, -1) === 'Null'
}
isUndefined (o) { //是否undefined
  return Object.prototype.toString.call(o).slice(8, -1) === 'Undefined'
}
isFalse (o) {
  if (o == '' || o == undefined || o == null || o == 'null' || o == 'undefined' || o == 0 || o == false || o == NaN) return true
  return false
}
isTrue (o) {
  return !this.isFalse(o)
}
isIos () {
  var u = navigator.userAgent;
  if (u.indexOf('Android') > -1 || u.indexOf('Linux') > -1) {//安卓手机
    // return "Android";
    return false
  } else if (u.indexOf('iPhone') > -1) {//苹果手机
    // return "iPhone";
    return true
  } else if (u.indexOf('iPad') > -1) {//iPad
    // return "iPad";
    return false
  } else if (u.indexOf('Windows Phone') > -1) {//winphone手机
    // return "Windows Phone";
    return false
  }else{
    return false
  }
}
isPC () { //是否为PC端
  var userAgentInfo = navigator.userAgent;
  var Agents = ["Android", "iPhone",
        "SymbianOS", "Windows Phone",
        "iPad", "iPod"];
  var flag = true;
  for (var v = 0; v < Agents.length; v++) {
    if (userAgentInfo.indexOf(Agents[v]) > 0) {
      flag = false;
      break;
    }
  }
  return flag;
}
browserType(){
  var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串
  var isOpera = userAgent.indexOf("Opera") > -1; //判断是否Opera浏览器
  var isIE = userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1 && !isOpera; //判断是否IE浏览器
  var isEdge = userAgent.indexOf("Edge") > -1; //判断是否IE的Edge浏览器
  var isFF = userAgent.indexOf("Firefox") > -1; //判断是否Firefox浏览器
  var isSafari = userAgent.indexOf("Safari") > -1 && userAgent.indexOf("Chrome") == -1; //判断是否Safari浏览器
  var isChrome = userAgent.indexOf("Chrome") > -1 && userAgent.indexOf("Safari") > -1; //判断Chrome浏览器
  if (isIE) {
    var reIE = new RegExp("MSIE (\\d+\\.\\d+);");
    reIE.test(userAgent);
    var fIEVersion = parseFloat(RegExp["$1"]);
    if(fIEVersion == 7) return "IE7"
    else if(fIEVersion == 8) return "IE8";
    else if(fIEVersion == 9) return "IE9";
    else if(fIEVersion == 10) return "IE10";
    else if(fIEVersion == 11) return "IE11";
    else return "IE7以下"//IE版本过低
  }

  if (isFF) return "FF";
  if (isOpera) return "Opera";
  if (isEdge) return "Edge";
  if (isSafari) return "Safari";
  if (isChrome) return "Chrome";
}
checkStr (str, type) {
  switch (type) {
    case 'phone':  //手机号码
      return /^1[3|4|5|7|8][0-9]{9}$/.test(str);
    case 'tel':   //座机
      return /^(0\d{2,3}-\d{7,8})(-\d{1,4})"[^"]*"|'[^']*'|[^'">])*>/.test(str);
    default:
      return true;
  }
}

2. Date

/**
 * 格式化时间
 * 
 * @param {time} 时间
 * @param {cFormat} 格式
 * @return {String} 字符串
 *
 * @example formatTime('2018-1-29', '{y}/{m}/{d} {h}:{i}:{s}') // -> 2018/01/29 00:00:00
 */
formatTime(time, cFormat) {
  if (arguments.length === 0) return null
  if ((time + '').length === 10) {
    time = +time * 1000
  }
  var format = cFormat || '{y}-{m}-{d} {h}:{i}:{s}', date
  if (typeof time === 'object') {
    date = time
  } else {
    date = new Date(time)
  }
  var formatObj = {
    y: date.getFullYear(),
    m: date.getMonth() + 1,
    d: date.getDate(),
    h: date.getHours(),
    i: date.getMinutes(),
    s: date.getSeconds(),
    a: date.getDay()
  }
  var time_str = format.replace(/{(y|m|d|h|i|s|a)+}/g, (result, key) => {
    var value = formatObj[key]
    if (key === 'a') return ['一', '二', '三', '四', '五', '六', '日'][value - 1]
    if (result.length > 0 && value < 10) {
      value = '0' + value
    }
    return value || 0
  })
  return time_str
}
/**
 * 返回指定长度的月份集合
 * 
 * @param {time} 时间
 * @param {len} 长度
 * @param {direction} 方向： 1: 前几个月; 2: 后几个月; 3:前后几个月 默认 3
 * @return {Array} 数组
 * 
 * @example  getMonths('2018-1-29', 6, 1) // -> ["2018-1", "2017-12", "2017-11", "2017-10", "2017-9", "2017-8", "2017-7"]
 */
getMonths(time, len, direction) {
  var mm = new Date(time).getMonth(),
    yy = new Date(time).getFullYear(),
    direction = isNaN(direction) "2018-1-26", "2018-1-27", "2018-1-28", "2018-1-29", "2018-1-30", "2018-1-31", "2018-2-1"]
 */
getDays(time, len, diretion) {
  var tt = new Date(time)
  var getDay = function(day) {
    var t = new Date(time)
    t.setDate(t.getDate() + day)
    var m = t.getMonth()+1
    return t.getFullYear()+'-'+m+'-'+t.getDate()
  }
  var arr = []
  if (diretion === 1) {
    for (var i = 1; i <= len; i++) {
      arr.unshift(getDay(-i))
    }
  }else if(diretion === 2) {
    for (var i = 1; i <= len; i++) {
      arr.push(getDay(i))
    }
  }else {
    for (var i = 1; i <= len; i++) {
      arr.unshift(getDay(-i))
    }
    arr.push(tt.getFullYear()+'-'+(tt.getMonth()+1)+'-'+tt.getDate())
    for (var i = 1; i <= len; i++) {
      arr.push(getDay(i))
    }
  }
  return diretion === 1 "-01-01 00:00:00";
}
/*获取某年最后一天*/
getLastDayOfYear (time) {
  var year = new Date(time).getFullYear();
  var dateString = year + "-12-01 00:00:00";
  var endDay = this.getMonthOfDay(dateString);
  return year + "-12-" + endDay + " 23:59:59";
}
/*获取某个日期是当年中的第几天*/
getDayOfYear (time) {
  var firstDayYear = this.getFirstDayOfYear(time);
  var numSecond = (new Date(time).getTime() - new Date(firstDayYear).getTime())/1000;
  return Math.ceil(numSecond/(24*3600));
}
/*获取某个日期在这一年的第几周*/
getDayOfYearWeek (time) {
  var numdays = this.getDayOfYear(time);
  return Math.ceil(numdays / 7);
}

3. Array

/*判断一个元素是否在数组中*/
contains (arr, val) {
  return arr.indexOf(val) != -1 "htmlcode">



/**
 * 去除空格
 * @param {str}
 * @param {type} 
 *    type: 1-所有空格 2-前后空格 3-前空格 4-后空格
 * @return {String}
 */
trim (str, type) {
  type = type || 1
  switch (type) {
    case 1:
      return str.replace(/\s+/g, "");
    case 2:
      return str.replace(/(^\s*)|(\s*$)/g, "");
    case 3:
      return str.replace(/(^\s*)/g, "");
    case 4:
      return str.replace(/(\s*$)/g, "");
    default:
      return str;
  }
}

/**
 * @param {str} 
 * @param {type}
 *    type: 1:首字母大写 2：首页母小写 3：大小写转换 4：全部大写 5：全部小写
 * @return {String}
 */
changeCase (str, type) {
  type = type || 4
  switch (type) {
    case 1:
      return str.replace(/\b\w+\b/g, function (word) {
        return word.substring(0, 1).toUpperCase() + word.substring(1).toLowerCase();

      });
    case 2:
      return str.replace(/\b\w+\b/g, function (word) {
        return word.substring(0, 1).toLowerCase() + word.substring(1).toUpperCase();
      });
    case 3:
      return str.split('').map( function(word){
        if (/[a-z]/.test(word)) {
          return word.toUpperCase();
        }else{
          return word.toLowerCase()
        }
      }).join('')
    case 4:
      return str.toUpperCase();
    case 5:
      return str.toLowerCase();
    default:
      return str;
  }
}


/*
  检测密码强度
*/
checkPwd (str) {
  var Lv = 0;
  if (str.length < 6) {
    return Lv
  }
  if (/[0-9]/.test(str)) {
    Lv++
  }
  if (/[a-z]/.test(str)) {
    Lv++
  }
  if (/[A-Z]/.test(str)) {
    Lv++
  }
  if (/[\.|-|_]/.test(str)) {
    Lv++
  }
  return Lv;
}

/*过滤html代码(把<>转换)*/
filterTag (str) {
  str = str.replace(/&/ig, "&amp;");
  str = str.replace(/</ig, "&lt;");
  str = str.replace(/>/ig, "&gt;");
  str = str.replace(" ", "&nbsp;");
  return str;
}





5. Number





/*随机数范围*/
random (min, max) {
  if (arguments.length === 2) {
    return Math.floor(min + Math.random() * ( (max+1) - min ))
  }else{
    return null;
  }
  
}

/*将阿拉伯数字翻译成中文的大写数字*/
numberToChinese (num) {
  var AA = new Array("零", "一", "二", "三", "四", "五", "六", "七", "八", "九", "十");
  var BB = new Array("", "十", "百", "仟", "萬", "億", "点", "");
  var a = ("" + num).replace(/(^0*)/g, "").split("."),
    k = 0,
    re = "";
  for(var i = a[0].length - 1; i >= 0; i--) {
    switch(k) {
      case 0:
        re = BB[7] + re;
        break;
      case 4:
        if(!new RegExp("0{4}//d{" + (a[0].length - i - 1) + "}$")
          .test(a[0]))
          re = BB[4] + re;
        break;
      case 8:
        re = BB[5] + re;
        BB[7] = BB[5];
        k = 0;
        break;
    }
    if(k % 4 == 2 && a[0].charAt(i + 2) != 0 && a[0].charAt(i + 1) == 0)
      re = AA[0] + re;
    if(a[0].charAt(i) != 0)
      re = AA[a[0].charAt(i)] + BB[k % 4] + re;
    k++;
  }

  if(a.length > 1) // 加上小数部分(如果有小数部分)
  {
    re += BB[6];
    for(var i = 0; i < a[1].length; i++)
      re += AA[a[1].charAt(i)];
  }
  if(re == '一十')
    re = "十";
  if(re.match(/^一/) && re.length == 3)
    re = re.replace("一", "");
  return re;
}

/*将数字转换为大写金额*/
changeToChinese (Num) {
    //判断如果传递进来的不是字符的话转换为字符
    if(typeof Num == "number") {
      Num = new String(Num);
    };
    Num = Num.replace(/,/g, "") //替换tomoney()中的“,”
    Num = Num.replace(/ /g, "") //替换tomoney()中的空格
    Num = Num.replace(/￥/g, "") //替换掉可能出现的￥字符
    if(isNaN(Num)) { //验证输入的字符是否为数字
      //alert("请检查小写金额是否正确");
      return "";
    };
    //字符处理完毕后开始转换，采用前后两部分分别转换
    var part = String(Num).split(".");
    var newchar = "";
    //小数点前进行转化
    for(var i = part[0].length - 1; i >= 0; i--) {
      if(part[0].length > 10) {
        return "";
        //若数量超过拾亿单位，提示
      }
      var tmpnewchar = ""
      var perchar = part[0].charAt(i);
      switch(perchar) {
        case "0":
          tmpnewchar = "零" + tmpnewchar;
          break;
        case "1":
          tmpnewchar = "壹" + tmpnewchar;
          break;
        case "2":
          tmpnewchar = "贰" + tmpnewchar;
          break;
        case "3":
          tmpnewchar = "叁" + tmpnewchar;
          break;
        case "4":
          tmpnewchar = "肆" + tmpnewchar;
          break;
        case "5":
          tmpnewchar = "伍" + tmpnewchar;
          break;
        case "6":
          tmpnewchar = "陆" + tmpnewchar;
          break;
        case "7":
          tmpnewchar = "柒" + tmpnewchar;
          break;
        case "8":
          tmpnewchar = "捌" + tmpnewchar;
          break;
        case "9":
          tmpnewchar = "玖" + tmpnewchar;
          break;
      }
      switch(part[0].length - i - 1) {
        case 0:
          tmpnewchar = tmpnewchar + "元";
          break;
        case 1:
          if(perchar != 0) tmpnewchar = tmpnewchar + "拾";
          break;
        case 2:
          if(perchar != 0) tmpnewchar = tmpnewchar + "佰";
          break;
        case 3:
          if(perchar != 0) tmpnewchar = tmpnewchar + "仟";
          break;
        case 4:
          tmpnewchar = tmpnewchar + "万";
          break;
        case 5:
          if(perchar != 0) tmpnewchar = tmpnewchar + "拾";
          break;
        case 6:
          if(perchar != 0) tmpnewchar = tmpnewchar + "佰";
          break;
        case 7:
          if(perchar != 0) tmpnewchar = tmpnewchar + "仟";
          break;
        case 8:
          tmpnewchar = tmpnewchar + "亿";
          break;
        case 9:
          tmpnewchar = tmpnewchar + "拾";
          break;
      }
      var newchar = tmpnewchar + newchar;
    }
    //小数点之后进行转化
    if(Num.indexOf(".") != -1) {
      if(part[1].length > 2) {
        // alert("小数点之后只能保留两位,系统将自动截断");
        part[1] = part[1].substr(0, 2)
      }
      for(i = 0; i < part[1].length; i++) {
        tmpnewchar = ""
        perchar = part[1].charAt(i)
        switch(perchar) {
          case "0":
            tmpnewchar = "零" + tmpnewchar;
            break;
          case "1":
            tmpnewchar = "壹" + tmpnewchar;
            break;
          case "2":
            tmpnewchar = "贰" + tmpnewchar;
            break;
          case "3":
            tmpnewchar = "叁" + tmpnewchar;
            break;
          case "4":
            tmpnewchar = "肆" + tmpnewchar;
            break;
          case "5":
            tmpnewchar = "伍" + tmpnewchar;
            break;
          case "6":
            tmpnewchar = "陆" + tmpnewchar;
            break;
          case "7":
            tmpnewchar = "柒" + tmpnewchar;
            break;
          case "8":
            tmpnewchar = "捌" + tmpnewchar;
            break;
          case "9":
            tmpnewchar = "玖" + tmpnewchar;
            break;
        }
        if(i == 0) tmpnewchar = tmpnewchar + "角";
        if(i == 1) tmpnewchar = tmpnewchar + "分";
        newchar = newchar + tmpnewchar;
      }
    }
    //替换所有无用汉字
    while(newchar.search("零零") != -1)
      newchar = newchar.replace("零零", "零");
    newchar = newchar.replace("零亿", "亿");
    newchar = newchar.replace("亿万", "亿");
    newchar = newchar.replace("零万", "万");
    newchar = newchar.replace("零元", "元");
    newchar = newchar.replace("零角", "");
    newchar = newchar.replace("零分", "");
    if(newchar.charAt(newchar.length - 1) == "元") {
      newchar = newchar + "整"
    }
    return newchar;
  }





6. Http





/**
 * @param {setting}
 */
ajax(setting){
  //设置参数的初始值
  var opts={
    method: (setting.method || "GET").toUpperCase(), //请求方式
    url: setting.url || "", // 请求地址
    async: setting.async || true, // 是否异步
    dataType: setting.dataType || "json", // 解析方式
    data: setting.data || "", // 参数
    success: setting.success || function(){}, // 请求成功回调
    error: setting.error || function(){} // 请求失败回调
  }

  // 参数格式化
  function params_format (obj) {
    var str = ''
    for (var i in obj) {
      str += i + '=' + obj[i] + '&'
    }
    return str.split('').slice(0, -1).join('')
  }

  // 创建ajax对象
  var xhr=new XMLHttpRequest();

  // 连接服务器open(方法GET/POST，请求地址， 异步传输)
  if(opts.method == 'GET'){
    xhr.open(opts.method, opts.url + "" + params_format(opts.data), opts.async);
    xhr.send();
  }else{
    xhr.open(opts.method, opts.url, opts.async);
    xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
    xhr.send(opts.data);
  }
  
  /*
  ** 每当readyState改变时，就会触发onreadystatechange事件
  ** readyState属性存储有XMLHttpRequest的状态信息
  ** 0 ：请求未初始化
  ** 1 ：服务器连接已建立
  ** 2 ：请求已接受
  ** 3 : 请求处理中
  ** 4 ：请求已完成，且相应就绪
  */
  xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && (xhr.status === 200 || xhr.status === 304)) {
      switch(opts.dataType){
        case "json":
          var json = JSON.parse(xhr.responseText);
          opts.success(json);
          break;
        case "xml":
          opts.success(xhr.responseXML);
          break;
        default:
          opts.success(xhr.responseText);
          break;
      }
    }
  }

  xhr.onerror = function(err) {
    opts.error(err);
  }
}

/**
 * @param {url}
 * @param {setting}
 * @return {Promise}
 */
fetch(url, setting) {
  //设置参数的初始值
  let opts={
    method: (setting.method || 'GET').toUpperCase(), //请求方式
    headers : setting.headers || {}, // 请求头设置
    credentials : setting.credentials || true, // 设置cookie是否一起发送
    body: setting.body || {},
    mode : setting.mode || 'no-cors', // 可以设置 cors, no-cors, same-origin
    redirect : setting.redirect || 'follow', // follow, error, manual
    cache : setting.cache || 'default' // 设置 cache 模式 (default, reload, no-cache)
  }
  let dataType = setting.dataType || "json", // 解析方式 
    data = setting.data || "" // 参数

  // 参数格式化
  function params_format (obj) {
    var str = ''
    for (var i in obj) {
      str += `${i}=${obj[i]}&`
    }
    return str.split('').slice(0, -1).join('')
  }

  if (opts.method === 'GET') {
    url = url + (data"htmlcode">



$ (selector){ 
  var type = selector.substring(0, 1);
  if (type === '#') {
    if (document.querySelecotor) return document.querySelector(selector)
      return document.getElementById(selector.substring(1))
    
  }else if (type === '.') {
    if (document.querySelecotorAll) return document.querySelectorAll(selector)
      return document.getElementsByClassName(selector.substring(1))
  }else{
    return document['querySelectorAll' " " + name;
}

/*删除类名*/
removeClass (ele, name) {
  if (this.hasClass(ele, name)) {
    var reg = new RegExp('(\\s|^)' + name + '(\\s|$)');
    ele.className = ele.className.replace(reg, '');
  }
}

/*替换类名*/
replaceClass (ele, newName, oldName) {
  this.removeClass(ele, oldName);
  this.addClass(ele, newName);
}

/*获取兄弟节点*/
siblings (ele) {
  console.log(ele.parentNode)
  var chid = ele.parentNode.children,eleMatch = []; 
  for(var i = 0, len = chid.length; i < len; i ++){ 
    if(chid[i] != ele){ 
      eleMatch.push(chid[i]); 
    } 
  } 
  return eleMatch;
}

/*获取行间样式属性*/
getByStyle (obj,name){
  if(obj.currentStyle){
    return obj.currentStyle[name];
  }else{
    return getComputedStyle(obj,false)[name];
  }
}





8. Storage 储存操作





class StorageFn {
  constructor () {
    this.ls = window.localStorage;
    this.ss = window.sessionStorage;
  }

  /*-----------------cookie---------------------*/
  /*设置cookie*/
  setCookie (name, value, day) {
    var setting = arguments[0];
    if (Object.prototype.toString.call(setting).slice(8, -1) === 'Object'){
      for (var i in setting) {
        var oDate = new Date();
        oDate.setDate(oDate.getDate() + day);
        document.cookie = i + '=' + setting[i] + ';expires=' + oDate;
      }
    }else{
      var oDate = new Date();
      oDate.setDate(oDate.getDate() + day);
      document.cookie = name + '=' + value + ';expires=' + oDate;
    }
    
  }

  /*获取cookie*/
  getCookie (name) {
    var arr = document.cookie.split('; ');
    for (var i = 0; i < arr.length; i++) {
      var arr2 = arr[i].split('=');
      if (arr2[0] == name) {
        return arr2[1];
      }
    }
    return '';
  }

  /*删除cookie*/
  removeCookie (name) {
    this.setCookie(name, 1, -1);
  }


  /*-----------------localStorage---------------------*/
  /*设置localStorage*/
  setLocal(key, val) {
    var setting = arguments[0];
    if (Object.prototype.toString.call(setting).slice(8, -1) === 'Object'){
      for(var i in setting){
        this.ls.setItem(i, JSON.stringify(setting[i]))
      }
    }else{
      this.ls.setItem(key, JSON.stringify(val))
    }
    
  }

  /*获取localStorage*/
  getLocal(key) {
    if (key) return JSON.parse(this.ls.getItem(key))
    return null;
    
  }

  /*移除localStorage*/
  removeLocal(key) {
    this.ls.removeItem(key)
  }

  /*移除所有localStorage*/
  clearLocal() {
    this.ls.clear()
  }


  /*-----------------sessionStorage---------------------*/
  /*设置sessionStorage*/
  setSession(key, val) {
    var setting = arguments[0];
    if (Object.prototype.toString.call(setting).slice(8, -1) === 'Object'){
      for(var i in setting){
        this.ss.setItem(i, JSON.stringify(setting[i]))
      }
    }else{
      this.ss.setItem(key, JSON.stringify(val))
    }
    
  }

  /*获取sessionStorage*/
  getSession(key) {
    if (key) return JSON.parse(this.ss.getItem(key))
    return null;
    
  }

  /*移除sessionStorage*/
  removeSession(key) {
    this.ss.removeItem(key)
  }

  /*移除所有sessionStorage*/
  clearSession() {
    this.ss.clear()
  }

  
}





9. Other 其它操作





/*获取网址参数*/
getURL(name){
  var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
  var r = window.location.search.substr(1).match(reg);
  if(r!=null) return r[2]; return null;
}

/*获取全部url参数,并转换成json对象*/
getUrlAllParams (url) {
  var url = url "&");
    for (var i = 0; i < arr.length; i++) {
      arr[i] = arr[i].split("=");
      obj[arr[i][0]] = arr[i][1];
    };
    delete obj[name];
    var url = baseUrl + JSON.stringify(obj).replace(/[\"\{\}]/g,"").replace(/\:/g,"=").replace(/\,/g,"&");
    return url
  }else{
    return url;
  }
}

/*获取十六进制随机颜色*/
getRandomColor () {
  return '#' + (function(h) {
    return new Array(7 - h.length).join("0") + h;
  })((Math.random() * 0x1000000 << 0).toString(16));
}

/*图片加载*/
imgLoadAll(arr,callback){
  var arrImg = []; 
  for (var i = 0; i < arr.length; i++) {
    var img = new Image();
    img.src = arr[i];
    img.onload = function(){
      arrImg.push(this);
      if (arrImg.length == arr.length) {
        callback && callback();
      }
    }
  }
}

/*音频加载*/
loadAudio(src, callback) {
  var audio = new Audio(src);
  audio.onloadedmetadata = callback;
  audio.src = src;
}

/*DOM转字符串*/
domToStirng(htmlDOM){
  var div= document.createElement("div");
  div.appendChild(htmlDOM);
  return div.innerHTML
}

/*字符串转DOM*/
stringToDom(htmlString){
  var div= document.createElement("div");
  div.innerHTML=htmlString;
  return div.children[0];
}


/**
 * 光标所在位置插入字符，并设置光标位置
 * 
 * @param {dom} 输入框
 * @param {val} 插入的值
 * @param {posLen} 光标位置处在 插入的值的哪个位置
 */
setCursorPosition (dom,val,posLen) {
  var cursorPosition = 0;
  if(dom.selectionStart){
    cursorPosition = dom.selectionStart;
  }
  this.insertAtCursor(dom,val);
  dom.focus();
  console.log(posLen)
  dom.setSelectionRange(dom.value.length,cursorPosition + (posLen || val.length));
}

/*光标所在位置插入字符*/
insertAtCursor(dom, val) {
  if (document.selection){
    dom.focus();
    sel = document.selection.createRange();
    sel.text = val;
    sel.select();
  }else if (dom.selectionStart || dom.selectionStart == '0'){
    let startPos = dom.selectionStart;
    let endPos = dom.selectionEnd;
    let restoreTop = dom.scrollTop;
    dom.value = dom.value.substring(0, startPos) + val + dom.value.substring(endPos, dom.value.length);
    if (restoreTop > 0){
      dom.scrollTop = restoreTop;
    }
    dom.focus();
    dom.selectionStart = startPos + val.length;
    dom.selectionEnd = startPos + val.length;
  } else {
    dom.value += val;
    dom.focus();
  }
}





CSS 1. pc-reset PC样式初始化





/* normalize.css */

html {
 line-height: 1.15;
 /* 1 */
 -ms-text-size-adjust: 100%;
 /* 2 */
 -webkit-text-size-adjust: 100%;
 /* 2 */
}

body {
 margin: 0;
}

article,
aside,
footer,
header,
nav,
section {
 display: block;
}

h1 {
 font-size: 2em;
 margin: 0.67em 0;
}

figcaption,
figure,
main {
 /* 1 */
 display: block;
}

figure {
 margin: 1em 40px;
}

hr {
 box-sizing: content-box;
 /* 1 */
 height: 0;
 /* 1 */
 overflow: visible;
 /* 2 */
}

pre {
 font-family: monospace, monospace;
 /* 1 */
 font-size: 1em;
 /* 2 */
}

a {
 background-color: transparent;
 /* 1 */
 -webkit-text-decoration-skip: objects;
 /* 2 */
}

abbr[title] {
 border-bottom: none;
 /* 1 */
 text-decoration: underline;
 /* 2 */
 text-decoration: underline dotted;
 /* 2 */
}

b,
strong {
 font-weight: inherit;
}

b,
strong {
 font-weight: bolder;
}

code,
kbd,
samp {
 font-family: monospace, monospace;
 /* 1 */
 font-size: 1em;
 /* 2 */
}

dfn {
 font-style: italic;
}

mark {
 background-color: #ff0;
 color: #000;
}

small {
 font-size: 80%;
}

sub,
sup {
 font-size: 75%;
 line-height: 0;
 position: relative;
 vertical-align: baseline;
}

sub {
 bottom: -0.25em;
}

sup {
 top: -0.5em;
}

audio,
video {
 display: inline-block;
}

audio:not([controls]) {
 display: none;
 height: 0;
}

img {
 border-style: none;
}

svg:not(:root) {
 overflow: hidden;
}

button,
input,
optgroup,
select,
textarea {
 font-family: sans-serif;
 /* 1 */
 font-size: 100%;
 /* 1 */
 line-height: 1.15;
 /* 1 */
 margin: 0;
 /* 2 */
}

button,
input {
 /* 1 */
 overflow: visible;
}

button,
select {
 /* 1 */
 text-transform: none;
}

button,
html [type="button"],

/* 1 */

[type="reset"],
[type="submit"] {
 -webkit-appearance: button;
 /* 2 */
}

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
 border-style: none;
 padding: 0;
}

button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
 outline: 1px dotted ButtonText;
}

fieldset {
 padding: 0.35em 0.75em 0.625em;
}

legend {
 box-sizing: border-box;
 /* 1 */
 color: inherit;
 /* 2 */
 display: table;
 /* 1 */
 max-width: 100%;
 /* 1 */
 padding: 0;
 /* 3 */
 white-space: normal;
 /* 1 */
}

progress {
 display: inline-block;
 /* 1 */
 vertical-align: baseline;
 /* 2 */
}

textarea {
 overflow: auto;
}

[type="checkbox"],
[type="radio"] {
 box-sizing: border-box;
 /* 1 */
 padding: 0;
 /* 2 */
}

[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
 height: auto;
}

[type="search"] {
 -webkit-appearance: textfield;
 /* 1 */
 outline-offset: -2px;
 /* 2 */
}

[type="search"]::-webkit-search-cancel-button,
[type="search"]::-webkit-search-decoration {
 -webkit-appearance: none;
}

 ::-webkit-file-upload-button {
 -webkit-appearance: button;
 /* 1 */
 font: inherit;
 /* 2 */
}

details,

/* 1 */

menu {
 display: block;
}

summary {
 display: list-item;
}

canvas {
 display: inline-block;
}

template {
 display: none;
}

[hidden] {
 display: none;
}


/* reset */

html,
body,
h1,
h2,
h3,
h4,
h5,
h6,
div,
dl,
dt,
dd,
ul,
ol,
li,
p,
blockquote,
pre,
hr,
figure,
table,
caption,
th,
td,
form,
fieldset,
legend,
input,
button,
textarea,
menu {
 margin: 0;
 padding: 0;
 box-sizing: border-box;
}






2. Phone-reset





/* normalize.css */

html {
 line-height: 1.15;
 /* 1 */
 -ms-text-size-adjust: 100%;
 /* 2 */
 -webkit-text-size-adjust: 100%;
 /* 2 */
}

body {
 margin: 0;
}

article,
aside,
footer,
header,
nav,
section {
 display: block;
}

h1 {
 font-size: 2em;
 margin: 0.67em 0;
}

figcaption,
figure,
main {
 /* 1 */
 display: block;
}

figure {
 margin: 1em 40px;
}

hr {
 box-sizing: content-box;
 /* 1 */
 height: 0;
 /* 1 */
 overflow: visible;
 /* 2 */
}

pre {
 font-family: monospace, monospace;
 /* 1 */
 font-size: 1em;
 /* 2 */
}

a {
 background-color: transparent;
 /* 1 */
 -webkit-text-decoration-skip: objects;
 /* 2 */
}

abbr[title] {
 border-bottom: none;
 /* 1 */
 text-decoration: underline;
 /* 2 */
 text-decoration: underline dotted;
 /* 2 */
}

b,
strong {
 font-weight: inherit;
}

b,
strong {
 font-weight: bolder;
}

code,
kbd,
samp {
 font-family: monospace, monospace;
 /* 1 */
 font-size: 1em;
 /* 2 */
}

dfn {
 font-style: italic;
}

mark {
 background-color: #ff0;
 color: #000;
}

small {
 font-size: 80%;
}

sub,
sup {
 font-size: 75%;
 line-height: 0;
 position: relative;
 vertical-align: baseline;
}

sub {
 bottom: -0.25em;
}

sup {
 top: -0.5em;
}

audio,
video {
 display: inline-block;
}

audio:not([controls]) {
 display: none;
 height: 0;
}

img {
 border-style: none;
}

svg:not(:root) {
 overflow: hidden;
}

button,
input,
optgroup,
select,
textarea {
 font-family: sans-serif;
 /* 1 */
 font-size: 100%;
 /* 1 */
 line-height: 1.15;
 /* 1 */
 margin: 0;
 /* 2 */
}

button,
input {
 /* 1 */
 overflow: visible;
}

button,
select {
 /* 1 */
 text-transform: none;
}

button,
html [type="button"],

/* 1 */

[type="reset"],
[type="submit"] {
 -webkit-appearance: button;
 /* 2 */
}

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
 border-style: none;
 padding: 0;
}

button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
 outline: 1px dotted ButtonText;
}

fieldset {
 padding: 0.35em 0.75em 0.625em;
}

legend {
 box-sizing: border-box;
 /* 1 */
 color: inherit;
 /* 2 */
 display: table;
 /* 1 */
 max-width: 100%;
 /* 1 */
 padding: 0;
 /* 3 */
 white-space: normal;
 /* 1 */
}

progress {
 display: inline-block;
 /* 1 */
 vertical-align: baseline;
 /* 2 */
}

textarea {
 overflow: auto;
}

[type="checkbox"],
[type="radio"] {
 box-sizing: border-box;
 /* 1 */
 padding: 0;
 /* 2 */
}

[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
 height: auto;
}

[type="search"] {
 -webkit-appearance: textfield;
 /* 1 */
 outline-offset: -2px;
 /* 2 */
}

[type="search"]::-webkit-search-cancel-button,
[type="search"]::-webkit-search-decoration {
 -webkit-appearance: none;
}

 ::-webkit-file-upload-button {
 -webkit-appearance: button;
 /* 1 */
 font: inherit;
 /* 2 */
}

details,

/* 1 */

menu {
 display: block;
}

summary {
 display: list-item;
}

canvas {
 display: inline-block;
}

template {
 display: none;
}

[hidden] {
 display: none;
}


/* reset */

html,
body,
h1,
h2,
h3,
h4,
h5,
h6,
div,
dl,
dt,
dd,
ul,
ol,
li,
p,
blockquote,
pre,
hr,
figure,
table,
caption,
th,
td,
form,
fieldset,
legend,
input,
button,
textarea,
menu {
 margin: 0;
 padding: 0;
 box-sizing: border-box;
}

html,
body {
 /* 禁止选中文本 */
 -webkit-user-select: none;
 user-select: none;
 font: Oswald, 'Open Sans', Helvetica, Arial, sans-serif
}


/* 禁止长按链接与图片弹出菜单 */

a,
img {
 -webkit-touch-callout: none;
}


/*ios android去除自带阴影的样式*/

a,
input {
 -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

input[type="text"] {
 -webkit-appearance: none;
}





3. 公共样式提取





/* 禁止选中文本 */
.usn{
  -webkit-user-select:none;
  -moz-user-select:none;
  -ms-user-select:none;
  -o-user-select:none;
  user-select:none;
}
/* 浮动 */
.fl { float: left; }
.fr { float: right; }
.cf { zoom: 1; }
.cf:after {
  content:".";
  display:block;
  clear:both;
  visibility:hidden;
  height:0;
  overflow:hidden;
}

/* 元素类型 */
.db { display: block; }
.dn { display: none; }
.di { display: inline }
.dib {display: inline-block;}
.transparent { opacity: 0 }


/*文字排版、颜色*/
.f12 { font-size:12px }
.f14 { font-size:14px }
.f16 { font-size:16px }
.f18 { font-size:18px }
.f20 { font-size:20px }
.fb { font-weight:bold }
.fn { font-weight:normal }
.t2 { text-indent:2em }
.red,a.red { color:#cc0031 }
.darkblue,a.darkblue { color:#039 }
.gray,a.gray { color:#878787 }
.lh150 { line-height:150% }
.lh180 { line-height:180% }
.lh200 { line-height:200% }
.unl { text-decoration:underline; }
.no_unl { text-decoration:none; }
.tl { text-align: left; }
.tc { text-align: center; }
.tr { text-align: right; }
.tj { text-align: justify; text-justify: inter-ideograph; }
.wn { /* 强制不换行 */
  word-wrap:normal;
  white-space:nowrap;
}
.wb { /* 强制换行 */
  white-space:normal;
  word-wrap:break-word;
  word-break:break-all;
}
.wp { /* 保持空白序列*/
  overflow:hidden;text-align:left;white-space:pre-wrap;word-wrap:break-word;word-break:break-all;
}
.wes { /* 多出部分用省略号表示 , 用于一行 */
  overflow:hidden;
  word-wrap:normal;
  white-space:nowrap;
  text-overflow:ellipsis;
}
.wes-2 { /* 适用于webkit内核和移动端 */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
} 
.wes-3 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}
.wes-4 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  overflow: hidden;
}

/* 溢出样式 */
.ofh { overflow: hidden; }
.ofs {overflow: scroll; }
.ofa {overflow: auto; }
.ofv {overflow: visible; }

/* 定位方式 */
.ps {position: static; }
.pr {position: relative;zoom:1; }
.pa {position: absolute; }
.pf {position: fixed; }


/* 垂直对齐方式 */
.vt {vertical-align: top; }
.vm {vertical-align: middle; }
.vb {vertical-align: bottom; }


/* 鼠标样式 */
.csd {cursor: default; }
.csp {cursor: pointer; }
.csh {cursor: help; }
.csm {cursor: move; }

/* flex布局 */
.df-sb {
  display:flex;
  align-items: center;
  justify-content: space-between;
}
.df-sa {
  display:flex;
  align-items: center;
  justify-content: space-around;
}

/* 垂直居中 */
.df-c {
  display: flex;
  align-items: center;
  justify-content: center;
}
.tb-c {
  text-align:center;
  display:table-cell;
  vertical-align:middle;
}
.ts-c {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
}
.ts-mc {
  position: absolute;
  left: 0;right: 0;
  bottom: 0; top: 0;
  margin: auto;
}

/* 辅助 */
.mask-fixed-wrapper {
  width: 100%;
  height: 100%;
  position: fixed;
  left:0;top:0;
  background: rgba(0, 0, 0, 0.65);
  z-index: 999;
}
.bg-cover {
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
}
.bg-cover-all {
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center center;
}





以上都是经常用到的方法
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
www.wwsws.com 伏龙阁资源网
39,976影音资源
44,792技术资源
21,817软件资源
651,128站长资源

P70系列延期，华为新旗舰将在下月发布

3月20日消息，近期博主@数码闲聊站 透露，原定三月份发布的华为新旗舰P70系列延期发布，预计4月份上市。

而博主@定焦数码 爆料，华为的P70系列在定位上已经超过了Mate60，成为了重要的旗舰系列之一。它肩负着重返影像领域顶尖的使命。那么这次P70会带来哪些令人惊艳的创新呢？

根据目前爆料的消息来看，华为P70系列将推出三个版本，其中P70和P70 Pro采用了三角形的摄像头模组设计，而P70 Art则采用了与上一代P60 Art相似的不规则形状设计。这样的外观是否好看见仁见智，但辨识度绝对拉满。

更新日志

友情链接

杰晶网络 DDR爱好者之家 桃源资源网 杰网资源 富贵资源网 南强小屋 铁雪资源网 幽灵资源网 万梅资源网 狼山资源网 白云岛资源网 昆仑资源网 相思资源网 明霞山资源网 内蒙古资源网 黑松山资源网 茶园资源网 饿虎岗资源网 大旗谷资源网 常春岛资源网 岱庙资源网 兴国资源网 快活林资源网 蝙蝠岛资源网 帝王谷资源网 白云城资源网 伏龙阁资源网 清风细雨楼 天枫庄资源网 圆月山庄资源网 无争山庄资源网 神水资源网 移花宫资源网 神剑山庄资源网 无为清净楼资源网 金钱帮资源网 丐帮资源网 华山资源网 极乐门资源网 小李飞刀资源网 凤求凰客栈 风云阁资源网 金狮镖局 鸳鸯亭资源网 千金楼资源网 更多链接