js之我工作中所使用的工具方法大全_js getquery 工具方法-CSDN博客

本文链接：https://blog.csdn.net/qq_38698753/article/details/104291692

获取url地址参数

getQueryVariable(variable) {
	var query = window.location.search.substring(1);
	var vars = query.split("&");
	for(var i = 0; i < vars.length; i++) {
		var pair = vars[i].split("=");
		if(pair[0] == variable) {
			return pair[1];
		}
	}
	return(false);
},
//调用
this.getQueryVariable('encodeStoreCode')

vue动态修改元素宽度

 :style="{width:`${kpiArr[0].target}%`}"

es6 数组对象去重

let obj = {};
let peon = storageArr.reduce((cur, next) => {
	obj[next.id] ? "" : obj[next.id] = true && cur.push(next);
	return cur;
}, [])

vue 实现30分钟倒计时

//方法
NUtil.handleMinTime = function (minTime) {
  //如果时间格式是正确的，那下面这一步转化时间格式就可以不用了
  var dateDiff = minTime // 时间差的毫秒数
  var dayDiff = Math.floor(dateDiff / (24 * 3600 * 1000));//计算出相差天数
  var leave1=dateDiff%(24*3600*1000)    //计算天数后剩余的毫秒数
  var hours=Math.floor(leave1/(3600*1000))//计算出小时数
  //计算相差分钟数
  var leave2=leave1%(3600*1000)    //计算小时数后剩余的毫秒数
  var minutes=Math.floor(leave2/(60*1000))//计算相差分钟数
  //计算相差秒数
  var leave3=leave2%(60*1000)      //计算分钟数后剩余的毫秒数
  var seconds=Math.round(leave3/1000)
  var leave4=leave3%(60*1000)      //计算分钟数后剩余的毫秒数
  var minseconds=Math.round(leave4/1000)
  return {dayDiff, hours, minutes, seconds, minseconds}
}
//调用处
startCount() {
	this.timer = setInterval(res => {
		this.timeObj={
			m: 0,
			s: 0
		}
		var m30 = 30 * 60 * 1000
		var sysDate = new Date().getTime()
		var orderDate = new Date(this.orderInfo.createTime).getTime()
		var differDate = (orderDate+m30)-sysDate
		var obj = this.$NUtil.handleMinTime(differDate)
		this.timeObj.m = this.add0(obj.minutes)
		this.timeObj.s = this.add0(obj.seconds)
		if(this.timeObj.m=='00'&&this.timeObj.s=='00'){
			delOrder(this.orderInfo.id).then(res => {
				this.getOrderInfo()
			})
		}
	}, 1000)
},

js获取指定日期时间

timeForMat(count) {
	let time1 = new Date()
	time1.setTime(time1.getTime() - (24 * 60 * 60 * 1000))
	let Y1 = time1.getFullYear()
	let M1 = ((time1.getMonth() + 1) > 10 ? (time1.getMonth() + 1) : '0' + (time1.getMonth() + 1))
	let D1 = (time1.getDate() > 10 ? time1.getDate() : '0' + time1.getDate())
	let timer1 = Y1 + '-' + M1 + '-' + D1 // 当前时间
	let time2 = new Date()
	time2.setTime(time2.getTime() - (24 * 60 * 60 * 1000 * count))
	let Y2 = time2.getFullYear()
	let M2 = ((time2.getMonth() + 1) > 9 ? (time2.getMonth() + 1) : '0' + (time2.getMonth() + 1))
	let D2 = (time2.getDate() > 9 ? time2.getDate() : '0' + time2.getDate())
	return Y2 + '-' + M2 + '-' + D2 + ' 00:00:00';
},

#vue h5 点击下载图片

savePic () {
      this.downloadIamge(this.imgSrc, 'img')
    },
    downloadIamge: function (imgsrc, name) {
      let image = new Image()
      image.setAttribute('crossOrigin', 'anonymous')
      image.onload = function () {
        let canvas = document.createElement('canvas')
        canvas.width = image.width
        canvas.height = image.height
        let context = canvas.getContext('2d')
        context.drawImage(image, 0, 0, image.width, image.height)
        let url = canvas.toDataURL('image/png') // 得到图片的base64编码数据
        let a = document.createElement('a') // 生成一个a元素
        let event = new MouseEvent('click') // 创建一个单击事件
        a.download = name || '海报' // 设置图片名称没有设置则为默认
        a.href = url // 将生成的URL设置为a.href属性
        a.dispatchEvent(event) // 触发a的单击事件
      }
      image.src = imgsrc
    }

纯css实现下图效果

<!doctype html>
<html lang="zh">
<head>
	<meta charSet="utf-8"/>
	<title data-react-helmet="true"></title>
	<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1"/>
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
	<style>
	* {
		margin: 0;
		padding: 0;
	}
	.rect {
		width: 100%;
		height: 400px;
		position: relative;
		z-index: -1;
		overflow: hidden;
	}
	.rect::after {
		content: '';
		display: block;
		width: 200%;
		height: 400px;
		position: absolute;
		left: -50%;
		bottom: 0;
		z-index: -1;
		border-radius: 0 0 50% 50%;
		background-image: url(https://nplus-activity.oss-cn-hangzhou.aliyuncs.com/static/front-end/timfan/test/tool-back-1.png);
		background-repeat: no-repeat;
		background-position: center top;
		background-size: 50% 100%;
		border-bottom: 3px solid red;
		box-sizing: border-box;
	}

	</style>
</head>
<body>

<div class="rect">

</div>

</body>
</html>

js返回当前日期星期几

function getCurrentDate () {
  var myDate = new Date()
  var year = myDate.getFullYear() // 年
  var month = myDate.getMonth() + 1 // 月
  var day = myDate.getDate() // 日
  var days = myDate.getDay()
  switch (days) {
    case 1:
      days = '星期一'
      break
    case 2:
      days = '星期二'
      break
    case 3:
      days = '星期三'
      break
    case 4:
      days = '星期四'
      break
    case 5:
      days = '星期五'
      break
    case 6:
      days = '星期六'
      break
    case 0:
      days = '星期日'
      break
  }
  var str = year + '年' + month + '月' + day + '日  ' + days
  return str
}

获取url中参数的值

/**
 * 获取URL中参数的的值
 * @param  {[String]} key 参数名称
 * @return {[String]}     参数值
 */
NUtil.getParameter = function (key) {
  let url = location.href
  let paraString = url.substring(url.indexOf('?') + 1, url.length).split('&')
  let paraObj = {}
  for (let i = 0, len = paraString.length; i < len; i++) {
    let j = paraString[i]
    paraObj[j.substring(0, j.indexOf('=')).toLowerCase()] = j.substring(j.indexOf('=') + 1, j.length)
  }
  let returnValue = paraObj[key.toLowerCase()]
  if (typeof (returnValue) === 'undefined') {
    return ''
  } else {
    return returnValue
  }
}

返回文件名后缀

/**
 * 根据文件名获取文件后缀。例：'xxxxx.jpg.EXE' 返回 'exe'
 * @param  {String} fileName 文件名
 * @return {String}          小写形式的后缀名
 */
NUtil.getFileSuffix = function (fileName) {
  let suffix = ''
  let index = fileName.lastIndexOf('.')
  if (index > -1) {
    suffix = fileName.substring(index + 1).toLowerCase()
  }
  return suffix
}

隐藏手机和身份证中间数字，只显示前3和后4位数字，中间星号

/**
 * 隐藏手机和身份证中间数字，只显示前3和后4位数字，中间星号
 * @param  {[String]}  value 待处理的号码
 * @return {[String]}  处理好的号码
 */
NUtil.doHide = function (value) {
  let v = value.replace(/\s+/g, '').replace(/\r\n/g, '').replace(/\n/g, '')
  let reg = /^(\d{3})(\d+)(\d{4}|\d{3}(x|X))$/
  return v.replace(reg, '$1****$3')
}