总结:常用js方法

陈发良 等级 620 2 2
标签: Javascript
函数注释
/**
 * 获取页面缓存
 * @method getSession  函数名
 * @param 参数名  字符串类型,需要获取的key名
 * @return 变量名 对象类型
 */


img.onload定义和用法
onload 事件在图片加载完成后立即执行。


判断设备
const userAgent = navigator.userAgent.toLowerCase()
const isMobile = /mobile/i.test(userAgent)
const isAndroid = /android/i.test(userAgent)
const isIOS = /iphone|ipad|ipod/i.test(userAgent)
const isWX = /MicroMessenger/i.test(userAgent)

判断是否手机号码
const isPhoneNum = num => {
  return /^1\d{10}$/.test(num)
}

对Session缓存的获取,保存,删除
const getSession = key => {
  let value = sessionStorage.getItem(key)
  if (value !== '' && value !== null) {
    return JSON.parse(value)
  }
  return {}
}
const saveSession = (key, value) => sessionStorage.setItem(key, JSON.stringify(value))
const removeSession = key => sessionStorage.removeItem(key)

对localStorage缓存的获取,保存,删除
  getLocal: key => {
    let value = localStorage.getItem(key)
    if (value !== '' && value !== null) {
      return JSON.parse(value)
    }
    return {}
  },
  saveLocal: (key, value) => localStorage.setItem(key, JSON.stringify(value)),
  removeLocal: key => localStorage.removeItem(key)


js精确计算
formatNum = function(f, digit) { 
    var m = Math.pow(10, digit); 
    return parseInt(f * m, 10) / m; 
}

生成随机32位字符
const uuid = () => {
  const S4 = () => (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1)
  return S4() + S4() + '-' + S4() + '-' + S4() + '-' + S4() + '-' + S4() + S4() + S4()
}

解析url地址
~(function (str) {
  str.queryURLParameter = function () {
    var obj = {},
      reg = /([^?=&#]+)(?:=([^?&#]+)?)/g
    this.replace(reg, function () {
      var key = arguments[1],
        value = arguments[2] || null
      obj[key] = value
    })
    return obj
  }
}(String.prototype))

 let str = window.location.search
 return str.queryURLParameter()

提高眼界:解析url地址
~function (pro) {
    pro.queryURLParameter = function () {
        var obj = {},
            reg = /([^?=&#]+)(?:=([^?=&#]+)?)/g;
        this.replace(reg, function () {
            var key = arguments[1],
                value = arguments[2] || null;
            obj[key] = value;
        });
        return obj;
    }
}(String.prototype);

var str = 'http://www.zhufengpeixun.cn/stu/?lx=1&name=&sex=#teacher';
console.log(str.queryURLParameter());


动态生成标签,如script,iframe标签等
function inject (container, src, tag = 'iframe') {
  let context = document.createElement(tag)
  context.id = 'i-' + new Date().getTime()
  if (tag === 'link') {
    context.href = src
    context.rel = 'stylesheet'
  } else {
    context.src = src
  }
  document.querySelectorAll(container)[0].appendChild(context)
  return new Promise((resolve, reject) => {
    if (context.readyState) {
      context.onreadystatechange = () => {
        if (this.readyState == 'loaded' || this.readyState == 'complete') {
          this.onreadystatechange = null
          resolve(context)
        }
      }
    } else {
      context.onload = () => resolve(context)
    }
  })
}

提示语:
function showMsg (txt = '', Autoclose = true) {
  if (txt == '') {
    return false // 为空则不弹出
  }
  let msg = document.createElement('div')
  msg.innerHTML = `
        <div className="msg" style="
        position: fixed;
        left:50%;
        top:50%;
        transform: translate(-50%,-30%);
        font-size: 0.28rem;
        padding: 0.2rem 0.3rem;
        border-radius: 0.08rem;
        background: rgba(0, 0, 0, 0.8);
        line-height: 1.5;
        max-width: 4rem;
        color: #fff;
        word-break:break-all;
        max-height:4rem;
        overflow-x:auto;
        z-index:9999999";
        id="show_tip">
            ${txt}
        </div>
    `
  document.body.appendChild(msg)
  if (Autoclose) {
    setTimeout(() => {
      document.body.removeChild(msg)
    }, 3000)
  } else {
    document.getElementById('show_tip').parentNode.onclick = function () {
      document.body.removeChild(msg)
    }
  }
}

等待的显示和隐藏
function loadingCom () {
  let loadingElent = document.createElement('div')
  let att = loadingElent.setAttribute('class', 'loading')
  let attId = loadingElent.setAttribute('id', 'loading')
  loadingElent.innerHTML =
    `
    <div class="params" style="width:100%;height:100%;position: fixed;background:rgab(0,0,0,.3);">
    <div class="loading-com" style="
    width:1.25rem;
    height:1.25rem;
    top:50%;
    left: 50%;
    margin-left:-.625rem;
    margin-top:-.605rem;
    position: absolute;">
      <img src="https://h5game.gowan8.com/static/img/loading.gif" width="100%">
    </div>
  </div>
  `
  document.body.appendChild(loadingElent)
}

function removeLoading () {
  var loading = document.getElementById('loading')
  document.body.removeChild(loading)
}


// 合并对象方法
const assign = Object.assign || function (t) {
  // 合并参数
  let n = arguments.length, s
  for (let i = 1; i < n; i++) {
    s = arguments[i]
    for (var p in s) {
      if (Object.prototype.hasOwnProperty.call(s, p)) {
        t[p] = s[p]
      }
    }
  }
  return t
}

// 判断是否是空对象
function isEmptyObject (obj) {
  var name
  for (name in obj) {
    return false
  }
  return true
}


//设置cookie
function setCookie(name,value){
    if(!name||!value) return;
    var Days = 30;//默认30天
    var exp  = new Date();
    exp.setTime(exp.getTime() + Days*24*60*60*1000);
    document.cookie = name + "="+ encodeURIComponent(value) +";expires="+ exp.toUTCString();
}

//获取cookie
function getCookie(name){
    var arr = document.cookie.match(new RegExp("(^| )"+name+"=([^;]*)(;|$)"));
    if(arr != null) return decodeURIComponent(arr[2]);
    return null;
}

//删除cookie
function delCookie(name){
    var exp = new Date();
    exp.setTime(exp.getTime() - 1);
    var cval=getCookie(name);
    if(!cval) document.cookie=name +"="+cval+";expires="+exp.toUTCString();
}



jQuery中对cookie的操作
jQuery.cookie = function (name, value, options) {
  if (typeof value != 'undefined') { // name and value given, set cookie //2个参数设置cookie 
      options = options || {};
      if (value === null) {
          value = '';
          options.expires = -1;
      }
      var expires = '';
      if (options.expires && (typeof options.expires == 'number' || options.expires.toUTCString)) {
          var date;
          if (typeof options.expires == 'number') {
              date = new Date();
              date.setTime(date.getTime() + (options.expires * 24 * 60 * 60 * 1000));
          } else {
              date = options.expires;
          }
          expires = '; expires=' + date.toUTCString(); // use expires attribute, max-age is not supported by IE
      }

      var path = options.path ? '; path=' + (options.path) : '';
      var domain = options.domain ? '; domain=' + (options.domain) : '';
      var secure = options.secure ? '; secure' : '';
      document.cookie = [name, '=', encodeURIComponent(value), expires, path, domain, secure].join('');
  } else { // only name given, get cookie  //一个参数,读取cookie  
      var cookieValue = null;
      if (document.cookie && document.cookie != '') {
          var cookies = document.cookie.split(';');
          for (var i = 0; i < cookies.length; i++) {
              var cookie = cookies[i].trim();
              // Does this cookie string begin with the name we want?
              if (cookie.substring(0, name.length + 1) == (name + '=')) {
                  cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                  break;
              }
          }
      }
      return cookieValue;
  }
}




switch case 用法
switch (op_type) {
                    case 0:
                      that._customerService(paycbData, callback)
                      break;
                    case 1:
                      that._requestMidasPayment(dataFormidashi, paycbData, callback)
                      break;
                    case 2:
                      that._requestMidasPayment(dataFormidashi, paycbData, callback)
                      break;
                    case 3:
                      break;
                    case 4:
                      break;
                    case 5:
                      that._payCallback(paycbData, callback) //直接回调
                      break;
                  }




全局配置url方法根据不同域名设置不同的模式,请求不同的地址
let ENV = 'local'
if (/gowanme/.test(location.hostname)) ENV = 'test'
if (/demo/.test(location.hostname)) ENV = 'dev'
if (/gowan8\.com/.test(location.hostname)) ENV = 'prod'
const __gowanpayDomain = {
  local: 'pay.gowanme.com',
  dev: 'pay.gowanme.com',
  test: 'pay.gowanme.com',
  prod: 'pay.gowan8.com',
  get () {
    return `//${__gowanpayDomain[ENV]}/`
  }
}


 微信内部H5支付(得到后台给的参数,发起支付即可)
      function wxpay (config) {
        FN.log('wxpay:', config)
        let {
          appId,
          timeStamp,
          nonceStr,
          signType,
          paySign,
          redirectUrl
        } = config
        WeixinJSBridge.invoke(
          'getBrandWCPayRequest',
          {
            appId, // 公众号名称,由商户传入
            timeStamp, // 时间戳,自1970年以来的秒数
            nonceStr, // 随机串
            package: config.package,
            signType, // 微信签名方式:
            paySign // 微信签名
          },
          function (res) {
            if (res.err_msg === 'get_brand_wcpay_request:ok') {
              FN.log('执行微信支付成功', res)
            }
          }
        )
      }


第三方浏览器直接打开app。
安卓:
var state = null;
try {
    if (scheme != '') {
        openIframe.src = '【scheme】://【host】/【openwith】';
    }
} catch (e) { }
if (state) {
    window.close();
} else {
    location.href='下载地址';   
}

苹果:
if (scheme != '') {
    window.location.href = '【scheme】://';
}


判断是不是一个函数
typeof (this.confirmModalOptions.btnSubmitFunction) === 'function'

抛出异常
 throw Error('err:show不存在')


技巧
当某些值需要进行传递是,可以将值挂载在window上,然后再另外一个地方,通过window进行获取


正则匹配数组或者使用任意符号包裹起来的内容
   const str2 = strs
   const reg = /\[(.+?)\]/g
   str2.match(reg)
例如:
正则匹配指定<>括号内的内容,并进行删除
// 对model进行处理
function handlerModel(str=''){
  const reg = /\<(.+?)\>/g
  if (str.match(reg)){
    let delStr = s.match(reg)[0]
    return s.replace(delStr, '')
  }
}



js删除节点
var theParent = document.getElementById("bq_ly");  
theParent.parentNode.removeChild(theParent);







/**
 * 验证是否有空格
 *
 * @param {}
 *            source
 */
function checkSpace(source) {
    var regex = /\s/g;
    return regex.test(source);
}


/**
 * 随机数UUID
 * @return
 */
function makeUUID() {
    var S4 = function () {
        return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1);
    };
    return (S4() + S4() + S4() + S4() + S4() + S4() + S4() + S4());
}





获取对象的键名,返回值是一个数组
Object.keys(obj)

获取对象的值,返回值是一个数组
Object.values(obj)

从一个对象中获取选中的键和值,返回一个新对象
Object.select(obj, ['name', 'phone'])
第一个参数obj,是需要选取的目标对象,第二个参数是一个数组。是具体需要获取的值

把一个对象中,所有属性的值都清空
object.clear(obj)

发布订阅
先订阅,再发布
window.__subscribe = {}
window.__subscribe['make_order'] = function () {
   _this._makeOrder(token, args)
 }
在需要发布的地方发布,订阅案例
if (window.__subscribe['make_order']) {
   window.__subscribe['make_order']()
   delete window.__subscribe['make_order']
 }

理解:就是给window的__subscribe对象绑定一个方法,在需要用到的地方,执行该方法,
执行完成后,再删除该方法

额外理解,
1 就是当执行某个方法的时候,能执行里面所有的方法
2 里面所有的方法是一个数组,遍历得到这个数组,并进行执行
3 数组里面的方法来自一个对象,这个对象可以生成很多个数组方法,可以参考用工厂模式



工厂模式:
所谓的工厂模式,就是一个方法,通过传入不同的参数,返回不同的方法, 或者对象,这个模式称为工厂模式,出来的产品都是一样的,所以是工厂模式
例子:
function(a,b,){
if(a=='xxx'){
return obja
}
if(b=='xxx){
return objb
}
}


 js调用App 方法
假设方法名为  JAMS__mark
android 系统:
  window.android.JAMS__mark(params)   // @params为传入的参数, app内可以收到
ios 系统:  
         window.webkit.messageHandlers.JAMS__mark.postMessage(params)   // @params为传入的参数, app内可以收到

封装后为:
export function JAMS__mark() {
    if (/android/i.test(navigator.userAgent)) {
        try {
            window.android.JAMS__mark(params)
        } catch (e) {
            console.log(e)
        }
    } else if (/ios|iphone|ipod|pad/i.test(navigator.userAgent)) {
        try {
            window.webkit.messageHandlers.JAMS__mark.postMessage(params)
        } catch (e) {
            console.log(e)
        }
    }
}


App调用js方法
App调用js 方法需要js将方法挂载在window下,这样App才能调用到方法,
假设方法名叫    JAMS__success
window.JAMS__success = function () {
  // do some thing
  // if need some params ,you can alse return it
  return params;
}


解决正则 /g 全局匹配替换问题
我要用 JS 替换一个多行文本的关键字
正常,没有变量的时候应该是这样:
把 a 替换成 b:
string.replace("a","b");
以上只能替换第一个匹配的,要全文匹配应该用正则表达式:
string.replace(/a/g,"b");
正则加个参数 g ,表示全文匹配。

但现在,我要替换的不是 a 这个字符了,而是从外面传进来的一个变量:
var key;
我可以这么写:
string.replace(key,"b");
这只能替换第一个匹配的,要全文匹配就遇到难题了:
string.replace(/key/g,"b");
这样写是不行的,变量 key 传不到正则里面去。。。头疼啊

解决方法:
string.replace(new RegExp(key,'g'),"b");

例子
var text = "饿~,23333。饿~,测试yongde"
    var word = "饿~"
    var newWorld = "额~~eeeee"
    // text = text.replace(word, newWorld)// 只能替换第一个
    text = text.replace(new RegExp(word, 'g'), newWorld); // 全局替换
    console.log(text,'我是text')


正则判断是否存在某个特定字符串的方法
var handleBaseApi = function() {
  var host = location.host
  var regDev = RegExp(/gowanme/)
  var regPro = RegExp(/gowan8/)
  if (regDev.test(host)) {
    baseApi = 'http://game.gowanme.com/'
  } else if (regPro.test(host)) {
    baseApi = 'http://game.gowan8.com/'
  }
}
handleBaseApi()



vue 传值赋值
 this.$router.push({name: 'vipDetails', query: {data: JSON.stringify(obj)}})
 this.imgSrc = JSON.parse(this.$route.query.data).detailsSrc

路由跳转有r,获取连接参数没有r

微信跳转问题
微信下不能用window.open('....');
能用location.href = ''; 




/**
 * 封装ajax请求
 * @param {} option字段 
 * url
 * data
 * method
 * success
 * error
 */
var requestApi = function (option = {}) {

  var defaults = {
    method: 'POST',
    data: {},
    success: function (data) {

    },
    error: function (status) {

    },
    dataType: 'json',
    async: true
  }
  var option = __assign(defaults, option);
  option.method = option.method.toUpperCase()
  var formData = []
  for (var key in option.data) {
    formData.push(''.concat(key, '=', option.data[key]))
  }
  option.data = formData.join('&')

  var xhr = new XMLHttpRequest()
  xhr.onreadystatechange = function () {
    if (xhr.readyState === 4 && xhr.status === 200) {
      let data = xhr.responseText
      try {
        if (option.dataType == 'json') {
          data = JSON.parse(data)
        }
        option.success(data)
      } catch (e) {
        console.log(logObj(e), '===>ajax错误信息')
        option.error(xhr.status)
      }
    } else {
      option.error(xhr.status)
    }
  }
  xhr.open(option.method, option.url, option.async)
  if (option.method === 'POST') {
    xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded;charset=utf-8')
  } else {
    option.url = option.url + (option.url.indexOf('?') >= 0 ? "&" : "?") + option.data
  }
  xhr.send(option.method === 'POST' ? option.data : null)
}



//封装jsonp请求
function jsonp(obj) {

  var defaults = {
    data: {},
    success: function (data) {},
    error: function () {},
    timeout: 10000
  }
  obj.data = obj.data || '';
  if (typeof obj.data == 'object') {
    var arr = new Array();
    for (var key in obj.data) {
      arr.push(key + '=' + obj.data[key])
    }
    obj.data = arr.join('&');
  }
  let clearJsonp = function (id) {
    window[id] = undefined;
  }
  let removeScript = function (id) {
    document.body.removeChild(document.getElementById(id));
  }
  var obj = __assign(defaults, obj);
  //写入url地址中的函数名称,动态创建
  var id = 'jsonp_' + Date.now() + Math.random().toString().substr(2, 5);

  //创建一个script标签
  var script = document.createElement("script");
  script.id = id;

  //设置标签的请求路径
  //像这样:http://localhost:3000/api?callback=jsonp_callback_153498520409635392&id=1
  script.src = obj.url + (/\?/.test(obj.url) ? '&' : '?') + 'callback=' + id + '&' + obj.data;

  var timeoutId = setTimeout(function () {
    clearJsonp(id);
    removeScript(id);
    obj.error();
  }, obj.timeout);

  //将创建好的带请求的script标签添加到html的body中
  document.body.appendChild(script);

  //这里必须这样写window[callbackName];
  //如果写window.callbackName会报错没有定义
  window[id] = function (res) {
    obj.success(res);
    //删除的时候可以这样写
    //由于请求一次会创建一个script标签和一个函数,所以每次获取到结果后就删除
    clearTimeout(timeoutId);
    clearJsonp(id);
    removeScript(id);
  }
}


用法:
jsonp({
url:'xx',
data:{},
success:function(res){
console.log(res,'后端的返回值')
}
})









/**
 * 分割IP地址
 *
 * @param {}
 *            ipAddress
 */
function getIpNum(ipAddress) {
    var ip = ipAddress.split(".");
    var a = parseInt(ip[0]);
    var b = parseInt(ip[1]);
    var c = parseInt(ip[2]);
    var d = parseInt(ip[3]);
    var ipNum = a * 256 * 256 * 256 + b * 256 * 256 + c * 256 + d;
    return ipNum;
}

/**
 * 判断IP大小
 */
function decideIp(startIp, endIp) {
    var ip1 = getIpNum(startIp);
    var ip2 = getIpNum(endIp);
    return (ip2 > ip1) ? true : false;
}


/*******************************************************************************
 * openWindow(url)函数:弹出窗口 * url:路径 * left:左边的距离 * top:上边的距离 * width:窗口宽度 *
 * height:窗口高度 * resize:yes时可调整窗口大小,no则不可调 *
 ******************************************************************************/
function openWindow(url,width, height, resize) {
    var mleft = (screen.width - width) / 2;
    var mtop = (screen.height - height) / 2;
    window.open(url,"","height=" + height + ",width=" + width
        + ",location=no,menubar=no,resizable=" + resize
        + ",scrollbars=yes,status=no,toolbar=no,left=" + mleft
        + ",top=" + mtop + "");
}

function openWindow(url,width, height, resize,scrollbars) {
    var mleft = (screen.width - width) / 2;
    var mtop = (screen.height - height) / 2;
    window.open(url,"","height=" + height + ",width=" + width
        + ",location=no,menubar=no,resizable=" + resize
        + ",scrollbars="+scrollbars+",status=no,toolbar=no,left=" + mleft
        + ",top=" + mtop + "");
}
/**
 *
 * @param {} url
 * @param {} width
 * @param {} height
 */
function showNewWind(url,width,height){
    //alert(url);
    var showresult = window.showModalDialog(url,window,"dialogWidth="+width+"px;dialogHeight="+height+"px;location=no;status=no;scroll=yes");
    return showresult;
}

/**
 *
 * @param {} url
 * @param {} width
 * @param {} height
 */
function showNewLessWind(url,width,height){
    //alert(url);
    var showresult = window.showModelessDialog(url,window,"dialogWidth:"+width+"px;location=no;status:no;dialogHeight:"+height+"px");
    return showresult;
}

function decideLeve(source){
    var regex=/^[a-zA-Z]{1}$/g;
    return regex.test(source);
}

function openBlankWindow(url){
    openWindow(url,"650","400","yes");
}


/**
 验证身份证号是否正确
 **/
function isCardNo(num){
    if(isNaN(num)){
        alert("输入的身份证号不是数字!");
        return false;
    }
    var len = num.length;
    if(len<15 || len>18){
        alert("输入的身份证号码长度不正确定!应为15位或18位");
        return false;
    }
    var re15 = /^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$/;
    var re18 = /^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{4}$/;
    var res = (re15.test(num) || re18.test(num));
    if(res==false){
        alert("输入的身份证号格式不正确!");
        return false;
    }
    return res;
}






/**
 生成指定位数的随机整数
 **/
function getRandomNum(count){
    var arr = new Array;
    var reNum = "";
    for(var i=0;i<count;i++){
        arr[i] = parseInt(Math.random()*10);
        reNum += String(arr[i]);
    }
    return reNum;
}
function random(min,max){
    return Math.floor(min+Math.random()*(max-min));
}


/*
 *判断包含关系
 *string:原始字符串
 *substr:子字符串
 *isIgnoreCase:忽略大小写
 */
function jsContains(string,substr,isIgnoreCase)
{
    if(isIgnoreCase)
    {
        string=string.toLowerCase();
        substr=substr.toLowerCase();
    }
    var startChar=substr.substring(0,1);
    var strLen=substr.length;
    for(var j=0;j<string.length-strLen+1;j++)
    {
        if(string.charAt(j)==startChar)//如果匹配起始字符,开始查找
        {
            if(string.substring(j,j+strLen)==substr)//如果从j开始的字符与str匹配,那ok
            {
                return true;
            }
        }
    }
    return false;
}

/**
 * 随机数UUID
 * @return
 */
function makeUUID() {
    var S4 = function () {
        return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1);
    };
    //return (S4() + S4() + "-" + S4() + "-" + S4() + "-" + S4() + "-" + S4() + S4() + S4());
    return (S4() + S4() + S4() + S4() + S4() + S4() + S4() + S4());
}






/**
 *  显示提示信息
 * @param {Object} msg
 */
function showInfoMessage(msg) {
    Ext.MessageBox.show({
        width:320,
        buttons:Ext.Msg.OK,
        msg:msg,
        icon:Ext.MessageBox.INFO,
        title:"系统提示"
    });
}

/**
 * 给URL追加参数
 * @param {} url
 * @param {} parameter 参数名
 * @param {} value  参数值
 */
function urlAddParmert(url,parameter,value){
    var buf = new StringBuffer();
    if(!isEmpty(url)){
        buf.append(url);
        if(url.indexOf("?") > -1){  //已经有参数
            buf.append("&");
        }else{
            buf.append("?");
        }
        buf.append(parameter);
        buf.append("=");
        buf.append(value);
    }
    return buf.toString();
}

/**
 * 得到文件的扩展名
 * @param {} filename
 */
function getFileExt(filename){
    var d=/\.[^\.]+$/.exec(filename);
    var ext = new String(d);
    var s = ext.toLowerCase();
    return s;
}


//字符串编码
function strEncode(source){
    return encodeURIComponent(source);
}

//字符串解码
function strDencode(source){
    return decodeURIComponent(source);
}








监控路由
 watch: {
    $route: function(to, from) {
      // 拿到目标参数 to.query.id 去再次请求数据接口
      // console.log(to, from, 'from')
      this.proData.article_type = to.query.article_type
      this.proData.article_id = to.query.article_id
      this.get()
    }
  },



 // 基于服务器时间的倒计时--
注意 1 nowtime需要设置为全局变量,2 isGetTime 表示是否得到了服务器时间
  // 处理服务器时间
  handletime(time) {
    if (this.data.isGetTime) {
      return this.data.nowtime += 1000
    } else {
      this.data.nowtime = new Date(time).getTime()
      this.data.isGetTime = true
      return this.data.nowtime
    }
  },

  // 倒计时
  countdown: function () {
    var nowtime = this.handletime("2020/10/8"),
      endtime = new Date("2020/10/28"); //定义结束时间

    var lefttime = endtime.getTime() - nowtime, //距离结束时间的毫秒数
      leftd = Math.floor(lefttime / (1000 * 60 * 60 * 24)), //计算天数
      lefth = Math.floor(lefttime / (1000 * 60 * 60) % 24), //计算小时数
      leftm = Math.floor(lefttime / (1000 * 60) % 60), //计算分钟数
      lefts = Math.floor(lefttime / 1000 % 60); //计算秒数
    leftd = leftd < 10 ? '0' + leftd : leftd
    lefth = lefth < 10 ? '0' + lefth : lefth
    leftm = leftm < 10 ? '0' + leftm : leftm
    lefts = lefts < 10 ? '0' + lefts : lefts
    return {
      leftd,
      lefth,
      leftm,
      lefts
    }
  },


setInterval(() => {
      var time = this.countdown()
      this.setData({
        timeObj: time
      })
    }, 1000)



基于本地时间的倒计时
var showtime = function () {
   var nowtime = new Date(),  //获取当前时间
       endtime = new Date("2020/8/8");  //定义结束时间
   var lefttime = endtime.getTime() - nowtime.getTime(),  //距离结束时间的毫秒数
      leftd = Math.floor(lefttime/(1000*60*60*24)),  //计算天数
       lefth = Math.floor(lefttime/(1000*60*60)%24),  //计算小时数
        leftm = Math.floor(lefttime/(1000*60)%60),  //计算分钟数
        lefts = Math.floor(lefttime/1000%60);  //计算秒数
    return leftd + "天" + lefth + ":" + leftm + ":" + lefts;  //返回倒计时的字符串
}

var div = document.getElementById("showtime");
setInterval (function () {
   div.innerHTML = showtime();
}, 1000);  //反复执行函数本身



验证码倒计时的实现
dom:
 <span  v-show="show" @click="getCode" class="code-txt">获取验证码</span>
          <span  v-show="!show" class="code-txt count">{{count}} 秒</span>

data:
 show: true,
      count: '',
      timer: ''

methods:
 // 获取验证码
    getCode () {
      const TIME_COUNT = 60
      if (!this.timer) {
        this.count = TIME_COUNT
        this.show = false
        this.timer = setInterval(() => {
          if (this.count > 0 && this.count <= TIME_COUNT) {
            this.count--
          } else {
            this.show = true
            clearInterval(this.timer)
            this.timer = null
          }
        }, 1000)
      }
    },


数组map方法

 map() 方法返回一个由原数组中的每个元素调用一个指定方法后的返回值组成的新数组。



// 原生js实现复制内容到剪切板,兼容pc、移动端(支持Safari浏览器)
    copyText () {
      if (typeof document.execCommand !== 'function') {
        FN.showMsg('复制失败')
        return
      }
      if (!document.createRange) {
        // pc,安卓
        var dom = document.getElementById('copy-qq')
        dom.select()
        var result = document.execCommand('copy')
        if (result) {
          FN.showMsg('复制成功')
        }
      } else {
        // 苹果端
        var range = document.createRange()
        var idom = document.getElementById('copy-qq')
        range.selectNode(idom)
        const selection = window.getSelection()
        if (selection.rangeCount > 0) {
          selection.removeAllRanges()
        }
        selection.addRange(range)
        document.execCommand('copy')
        FN.showMsg('复制成功')
      }
    }


提取字符串中的数字
var s ="价格4500元";
var num= s.replace(/[^0-9]/ig,"");
alert(num);//4500


vue中需要给element的函数,添加参数时,可以使用bind进行绑定添加



收藏
评论区

相关推荐

JS排序算法
引子 有句话怎么说来着: 雷锋推倒雷峰塔,Java implements JavaScript. 当年,想凭借抱Java大腿火一把而不惜把自己名字给改了的JavaScript(原名LiveScript),如今早已光芒万丈。node JS的出现更是让JavaScript可以前后端通吃。虽然Java依然制霸企业级软件开发领域(C/C 的大神们不要打
web性能优化的15条实用技巧
javascript在浏览器中运行的性能,可以认为是开发者所面临的最严重的可用性问题。这个问题因为javascript的阻塞性而变得复杂,事实上,多数浏览器使用单一进程来处理用户界面和js脚本执行,所以同一时刻只能做一件事。js执行过程耗时越久,浏览器等待响应的时间越长。 加载和执行 1.提高加载性能 1.IE8,FF,3.5,Safari 4和
JavaScript基础加ES6语法
JavaScript 一、什么是JavaScript 当下最流行的脚本语言,在世界上的所有浏览器中都有js的身影,是一门脚本语言,可以用于我们与web站点和web应用程序的交互,还可以用于后台服务器的编写,例如node.js 二、语法特点 基于对象和事件驱动的松散型,解释型语言 单线程异步 三、JavaScript作用 页面的交
js 惰性载入函数( 能力检测 )
今天在做项目时,需要对地址栏参数做处理,于是便作了如下处理 javascript getUrlParam() { let params {}; const url window.location.href.replace(/\//g,'').replace(/\?/g,'&'); url.replace(/?&(^&)
前端面试题自检 JS CSS 部分
JS类型 JavaScript的简单数据类型Number , String , Boolean , Undefined , Null , Symbol typeof 操作符的返回值 number string boolean undefined object function
js-Answers一
JavaScript的组成 JavaScript 由以下三部分组成: 1. ECMAScript(核心):JavaScript 语言基础 2. DOM(文档对象模型):规定了访问HTML和XML的接口 3. BOM(浏览器对象模型):提供了浏览器窗口之间进行交互的对象和方法 JS的基本数据类型和引用数据类型
「组件」返回顶部按钮
样式如图1:在components文件夹下新建BackTop.vue js<template <div class"backTopBtn" <a href"javascript:;" <div vif"btnFlag" class"btn" @click"backTop"TOP</div
js去除字符串
js去除字符串js<DOCTYPE html<html<head <title</title</head<body</body<script type"text/javascript" function delHtmlTag(str){   return str.replace(/<^/g,""); } var s
js删除表格中的某一行
点击表格中的内容,删除某一行正文js代码如下 function removeTd(obj) { obj.parentNode.parentNode.remove();}
只听说过CSS in JS,怎么还有JS in CSS?
CSS in JS是一种解决css问题想法的集合,而不是一个指定的库。从CSS in JS的字面意思可以看出,它是将css样式写在JavaScript文件中,而不需要独立出.css、.less之类的文件。将css放在js中使我们更方便的使用js的变量、模块化、treeshaking。还解决了css中的一些问题,譬如:更方便解决基于状态的样式,更容易追溯依赖关
React - Fiber原理
浏览器渲染 屏幕刷新率(FPS) 浏览器的正常绘制频率是60次/秒,小于这个值时,用户会感觉到卡顿 绘制一次的称为一帧,平均每帧16.6ms 帧 每个帧的开头包括样式计算、布局和绘制 js的执行是单线程,js引擎和页面渲染引擎都占用主线程,GUI渲染和Javascript执行两者是互斥的 如果某个js任务执行时间过长,浏览器会推迟渲染,每
面试官:JavaScript的数据类型你了解多少?
前言作为JavaScript的入门知识点,Js数据类型在整个JavaScript的学习过程中其实尤为重要。最常见的是边界数据类型条件判断问题。我们将通过这几个方面来了解数据类型: 概念 检测方法 转换方法 概念undefined、Null、Boolean、String、Number、Symbol、BigInt为基础类型;Ob
从 生成器 到 promise+async
本文主要讲解js中关于生成器的相关概念和作用,以及到后面结合 promise 实现 es7中的 async 原理,你将学习到js中异步流程控制相关知识 1、认识生成器思考如下代码:javascript let x 1 function foo() x++ bar() console.log(x) // 3 function bar(
一篇文章带你了解JavaScript作用域
在JavaScript中,对象和函数也是变量。在JavaScript中,作用域是你可以访问的变量、对象和函数的集合。JavaScript 有函数作用域: 这个作用域在函数内变化。一、本地JavaScript变量一个变量声明在JavaScript函数内部,成为函数的局部变量。局部变量有局部作用域: 它们只能在函数中访问。JS://code here can n
javascript实践教程-02-javascript入门
本节目标1. 掌握如何编写javascript代码。2. 掌握javascript的3个弹框。3. 掌握javascript的注释。4. 掌握浏览器的调试工具控制台。 内容摘要本篇介绍了如何在网页上编写js代码,如何引入外部js代码文件,js的3个弹框、注释语法,还有浏览器调试工具的控制台使用。阅读时间1520分钟。 script标签如果我们需要在网页中编写