记录常用的一些工具函数 - vue版(持续更新)

最新推荐文章于 2024-07-31 20:34:26 发布

置顶 zyhzyh1120

最新推荐文章于 2024-07-31 20:34:26 发布

阅读量479

点赞数 1

分类专栏： vue 文章标签： javascript vue.js es6 前端

本文链接：https://blog.csdn.net/zyhzyh1120/article/details/108678785

版权

vue 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

记录常用的一些工具函数 - vue版

表单检验类
- - 邮箱校验
关于时间处理
关于字符串操作
- - 隐藏部分字符的操作
关于数组的处理
- - 获取数组最大值
  - 数组去重
随笔

表单检验类

邮箱校验

const strRegex = /^(\w-*\.*)+@(\w-?)+(\.\w{2,})+$/;
if(!strRegex.test(this.form.email)){
	console.log('Email format error');
	return	
}

关于时间处理

1) 如果格式是: yyyy/mm/dd hh:mm:ss 可以直接转换。

// 1) 如果格式是: yyyy/mm/dd hh:mm:ss 可以直接转换。
	var oldTime = (new Date("2018/07/09 14:13:11")).getTime(); //得到毫秒数 
	console.log("yyyy/mm/dd hh:mm:ss格式:" + oldTime );

2) 如果日期格式是: yyyy-mm-dd hh:mm:ss 需要转化格式

// 2) 如果日期格式是: yyyy-mm-dd hh:mm:ss 需要转化格式
 	var startDate ='2018-07-09 14:13:11';
 	startDate= startDate.replace(new RegExp("-","gm"),"/");
 	var startDateM = (new Date(startDate)).getTime(); //得到毫秒数
 	console.log("yyyy-mm-dd hh:mm:ss格式转化而得:" + startDateM );

3) 日期转化为毫秒的第二种方法：

// 3) 日期转化为毫秒的第二种方法：
	var str = '2018-07-09 14:13:11';
	var arr = str.split(/[- : \/]/);
	var startDate = Date.parse(new Date(arr[0], arr[1]-1, arr[2], arr[3], arr[4], arr[5]));
	console.log("第二种方法yyyy-mm-dd hh:mm:ss格式转化而得:" + startDate );

4）毫秒数转化为浏览器时间格式(没啥用)

// 4）毫秒数转化为浏览器时间格式(没啥用)
	var endDate = (new Date("2018/02/09 14:13:11")).getTime(); //得到毫秒数  
	var newDate = new Date(endDate ); //得到普通的时间了 
	console.log("毫秒数转化为时间格式:" + newDate );

5) 应用: 判断是否在规定的范围内

// 5) 应用: 判断是否在规定的范围内
  const date = Date.now();	 // 当前毫秒数
  const start_time = (new Date(res.data.is_extension.start_time)).getTime(); // 开始时间
  const end_time = (new Date(res.data.is_extension.end_time)).getTime();  // 结束时间
  if(start_time <= date <= end_time){
      console.log("在时间范围内");
  }else{
      console.log("不在时间范围内");
  }

6) 时间戳转为 yyyy-mm-dd hh:mm:ss 日期格式

// 6) 时间戳转为 yyyy-mm-dd hh:mm:ss 日期格式
 function formatDate(now) { 
     var year=now.getFullYear(); 
     var month=now.getMonth()+1; 
     var date=now.getDate(); 
     var hour=now.getHours(); 
     var minute=now.getMinutes(); 
     var second=now.getSeconds(); 
     return year+"-"+month+"-"+date+" "+hour+":"+minute+":"+second; 
 } 
   /**如果记得时间戳是毫秒级的就需要*1000 不然就错了记得转换成整型 */
    var d=new Date(1230999938); 
    console.log(formatDate(d)); // 1970-1-15 13:56:39

7) 时间戳转日期格式

// 7) 时间戳转 日期格式 1970-1-15 13:56:39
 function getLocalTime(nS) { 
       return new Date(parseInt(nS) * 1000).toLocaleString().replace(/上午|下午/g, '')); 
 } 
alert(getLocalTime(1177824835));  // 1970-1-15 13:56:39

8) 时间戳转日期格式 2007/4/29 下午1:33

// 8) 时间戳转 日期格式
function getLocalTime(nS) {  
	return new Date(parseInt(nS) * 1000).toLocaleString().replace(/:\d{1,2}$/,' ');  
}
alert(getLocalTime(11778248350000)); // 2007/4/29 下午1:33

9) date转为时间戳

// 09) date转为时间戳
	const timeSSS = new Date().getTime();

10) date转为’秒级’时间戳 ,并向上取整

// 10) date转为'秒级'时间戳 ,并向上取整
	const time_S = Math.ceil(new Date().getTime()/1000);
	console.log(time_S);

11) 获取当月的最后一天 || 获取一个月当中的开始日期与结束日期

// 11 获取当月的最后一天 || 获取一个月当中的开始日期与结束日期
function getFirstAndLastMonthDay(year, month) {
   var firstdate = year + '-' + month + '-01'; // 当月第一天
   var day = new Date(year, month, 0);
   var lastdate = year + '-' + month + '-' + day.getDate(); //当月最后一天
   return lastdate;
};

关于字符串操作

隐藏部分字符的操作

/**
  * @param start  开始展示的字符
  * @param end 结束字符展示位置
  * @param target 目标字符
  * @param length
  * @returns {string|string}
*/
replaceStr (target, start, end, length) {
    let str = '';
    if (start) {
      str = target.substr(start, length) + '***';
    } else if (end) {
      str = '***' + target.substr(end, length);
    } else {
      str = target.substr(0, 1) + '***' + target.substr(target.length - 1, 1);
    }
    return str
}

关于数组的处理

获取数组最大值

function arrayMax(arr){
    arr.reduce(function (prev, cur) {
    	return Math.max(prev,cur);
	})
}

数组去重

function arrayScreen(arr){
   arr.reduce(function (prev, cur,index,curarr) {
        // console.log('curarr:',curarr) // [1,2,3,3,4,4,2,1,5]
        prev.indexOf(cur) === -1 && prev.push(cur);
        //这里表示prev第一次去设置的init值[]，当满足当前的新数组没有cur（当前元素）时才执行push
        return prev;
  },[]);	 
}

随笔

锚点定位 scrollIntoView

// 新属性 scrollIntoView 部分浏览器低版本浏览器不支持
const toElement = document.querySelector(".list-4");
toElement.scrollIntoView({ block: "center", behavior: "smooth" });

富文本编译

// 富文本编译 需要转义时
contentHtml(res){
	const content = res;
	const html = content.replace(/&lt;/g, "<").replace(/&gt;/g, ">").replace(/&amp;/g, "&").replace(/&quot;/g, '"').replace(/&apos;/g, "'");
	content['html'] = html;
	return content;
}

清空url中的参数

// 清空query
onLoad(){
	let url = window.location.href;
	let valiable = url.split('?')[0];
	window.history.pushState({}, 0, valiabl);
}

获取URL中的参数名及参数值的集合

let url = GetRequest(); // 得到参数结果对象
const uid = url.userid; // 拿想要的值
console.log(uid)

/**
 * [获取URL中的参数名及参数值的集合]
 * 示例URL:http://htmlJsTest/getrequest.html?uid=admin&rid=1&fid=2&name=小明
 * @param {[string]} urlStr [当该参数不为空的时候，则解析该url中的参数集合]
 * @return {[string]}       [参数集合]
 */
function GetRequest(urlStr) {
  if (typeof urlStr == "undefined") {
    var url = decodeURI(location.search); //获取url中"?"符后的字符串
  } else {
    var url = "?" + urlStr.split("?")[1];
  }
  var theRequest = new Object();
  if (url.indexOf("?") != -1) {
    let strs = url.substr(1);
    strs = strs.split("&");
    for (var i = 0; i < strs.length; i++) {
      theRequest[strs[i].split("=")[0]] = decodeURI(strs[i].split("=")[1]);
    }
  }
  return theRequest;
}

格式化价格（保留n位小数）

/**
* 格式化价格（保留n位小数）
* @param price 价格
* @param n 保留几位小数
* @returns {string}
*/
formatPrice (price, n) {
	return parseFloat(price).toFixed(n)
},

获取随机数

// 方式1
function randomString(length, chars) {
    let result = '';
    for (var i = length; i > 0; --i) result += chars[Math.floor(Math.random() * chars.length)];
    return result
}
var rString = randomString(32, '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ');

// 方式2
function randomString(length) {
    let result = '';
    const chars = '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ';
    for (var i = length; i > 0; --i) result += chars[Math.floor(Math.random() * chars.length)];
    return result
}
console.log(randomString(5));

原生js简单实现无缝轮播动画(性能差,易卡顿)

// 自动轮播	数据需要双份才能有无缝轮播效果
    swiper( ) {
      let swiperUl = document.getElementById('ul__swipe');
      this.time = window.setInterval(function () {
        if (swiperUl.offsetLeft < -swiperUl.offsetWidth / 2) {
          	swiperUl.style.left = 0;
        } else {
          	swiperUl.style.left = swiperUl.offsetLeft - 1 + 'px';
        }
      }, 20);
    },