js判断一、二、三、四季度
const currentMonth = new Date().getMonth() + 1; // 获取当前月份，+1因为getMonth()返回0-11
const quarter = '';
if (currentMonth >= 1 && currentMonth <= 3) { // 一季度
quarter = 1;
} else if (currentMonth >= 4 && currentMonth <= 6) { // 二季度
quarter = 2;
} else if (currentMonth >= 7 && currentMonth <= 9) { // 三季度
quarter = 3;
} else if (currentMonth >= 10 && currentMonth <= 12) { // 四季度
quarter = 4;
}
js计算时间戳
方法一：使用Date对象的getTime()方法；
const timestamp = new Date().getTime(); //1711363467516
方法二：使用Date对象的valueOf()方法
const timestamp = new Date().valueOf(); //1711363467516
方法三：使用Date.now()方法
const timestamp = Date.now(); //1711363467516
方法四：使用 + 运算符
const timestamp = +new Date(); //1711363467516
js日期转化时间戳
var date = new Date("2024-03-01"); //创建当前的日期对象
var timestamp = date.getTime();
console.log(timestamp) //1709251200000
js获取当日、明日日期
获取当日
方法一：tolocaleDateString()方法以字符串的形式返回日期部分
let curDay = new Date().toLocaleDateString();
console.log(curDay) //2024/3/26
方法二：使用Date对象的方法
//时间年月日时分秒
let curDay = new Date();
let year = curDay.getFullYear();
let month = curDay.getMonth() + 1;
let day = curDay.getDate();
let hour = curDay.getHours();
let minute = curDay.getMinutes();
let second = curDay.getSeconds();
方法三：使用toLocaleString方法
let curDay = new Date().toLocaleString(); //2024/3/26 17:42:56
方法四：使用moment.js库
let curDay = moment();
let year = curDay.format('YYYY');
let month = curDay.format('MM');
let day = curDay.format('DD');
let hour = curDay.format('HH');
let minute = curDay.format('mm');
let second = curDay.format('ss');
获取明日
方法一：使用toLocaleDateString()方法
let toDay = new Date();
let tomorrow = new Date(today.getTime() + 24 * 60 * 60 * 1000);
let tomorrowDate = tomorrow.toLocaleDateString();
console.log(tomorrowDate);
方法二：使用Date对象
let today = new Date();
today.setDate(today.getDate() + 1);
~or~
today = new Date(today.getTime() * 24 * 60 * 60 * 1000);
let year = today.getFullYear();
let month = today.getMonth() + 1; //月份从0开始，需要加1
let day = today.getDate();
let tomorrow = year + '-' + month + '-' +day;
方法三：使用Moment.js库
let tomorrow = moment().add(1,'days').format('YYYY-MM-DD')
js获取当前日期前30天日期
1. 使用JavaScript的Date对象和getDate()、setDate()方法
const curTime = new Date();
curTime.setDate(curTime.getDate() - 30);
//如果需要获取年份、月份和日期的字符串形式
var year = curTime.getFullYear();
var month = curTime.getMonth() + 1; //月份从0开始，需要加1
var day = curTime.getDate();
var curDate = year + '-' + month + '-' + day;
console.log(curDate);
2. 使用 JavaScript 的 Date 对象和 getTime()、setTime() 方法
var curTime = new Date();
curTime.setTime(currentDate.getTime() - 30 * 24 * 60 * 60 * 1000);
// 如果需要获取年份、月份和日期的字符串形式：
var year = curTime.getFullYear();
var month = curTime.getMonth() + 1; // 月份从0开始，需要加1
var day = curTime.getDate();
var curDate = year + "-" + month + "-" + day;
3. 使用 JavaScript 的第三方库 moment.js：
var currentDate = moment();
var pastDate = currentDate.subtract(30, 'days');
// 如果需要获取年份、月份和日期的字符串形式：
var formattedDate = pastDate.format('YYYY-MM-DD');
js获取星期
1.使用Date对象的getDay()方法获取星期
使用Date对象的getDay()方法获取星期，返回的是0-6之间的整数，其中0代表星期日，1代表星期一，以此类推
let weekDay = new Date().getDay(); //求当前日期
~or~
let weekDay = new Date('2023-12-09').getDay(); //求具体日期
console.log(weekDay)
2. 使用Date对象的toLocaleDateString()方法
使用Date对象的toLocaleDateString()方法获取日期字符串，然后根据该字符串的格式来获取星期
const date = new Date();
const options = { weekday: 'long' };
const weekday = date.toLocaleDateString('zh-CN', options);
console.log(weekday); // 输出星期几的中文字符串，如"星期一"
3.使用数组来存储星期
const weekdays = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
const weekday = weekdays[new Date().getDay()]
console.log(weekday);
v-html不识别\n解决方法
方法1 利用正则将\n换成<br>
data.replace(/\n/g,'<br/>')
css样式
white-space:pre-line; //合并空白符序列，保留换行符；
1.normal:忽略多余的空白，只保留一个空白（默认）；
2.pre:保留空白(行为方式类似于html中的pre标签)；
3.nowrap:只保留一个空白，文本不会换行，会在在同一行上继续，直到遇到br标签为止。
4.pre-wrap:保留空白符序列，正常地进行换行；
5.pre-line:合并空白符序列，保留换行符；
6.inherit：从父元素继承white-space属性的值。
js正则匹配标签，删除标签
匹配双标签（包括内容），过滤标签，保留内容
var reg1 = /<a[^>]*>(.|\n)*<\/a>/gi;
var str1 = '<a>我是被删除的</a>其他内容';
console.log(str1.replace(reg1, '')); //其他内容
匹配双标签（不包括内容），过滤标签，保留内容
var reg1 = /(<\/?a.*?>)/gi;
var reg2= /(<\/?font.*?>)|(<\/?span.*?>)|(<\/?a.*?>)/gi;
var str = '<span>我是被保留的</span><a href="asdasd">你好，我也是被保留的<font>我的font里的</font></a>';
console.log(str.replace(reg1, '')); //<span>我是被保留的</span>你好，我也是被保留的<font>我的font里的</font>
console.log(str.replace(reg2, '')); //我是被保留的你好，我也是被保留的我的font里的
去掉标签内的属性
var reg1 = /<span[^>]*>/gi;
var str1 = '<span style="color:red;">我是被删除的</span>123123';
console.log(str1.replace(reg1, '<span>'));
js去除段落所有空行
data.replace(/^\s*[\r\n]\s*/gm,'')
在这个例子中，正则表达式`/^\s*[\r\n]\s*/gm`的含义是：
- `^` 匹配行的开头
- `\s*` 匹配任意数量的空白字符（包括空格、制表符等）
- `[\r\n]` 匹配换行符，兼容不同操作系统的换行符（`\r` 或 `\n`）
- `\s*` 匹配换行后的任何空白字符
- `g` 标志表示全局匹配，即查找所有匹配项，而不是在找到第一个匹配项后就停止
- `m` 标志表示多行匹配，即正则表达式应当视为每一行独立的文本，并对每一行执行匹配操作
字符串脱敏
// 字符串脱敏统一封装函数
function desensitization(str, beginIndex = 0, endIndex = 0) {
const len = str.length;
const firstStr = str.substring(0, beginIndex);
const lastStr = str.substring(len - endIndex);
const middleStr = str
.substring(beginIndex, len - endIndex)
.replace(/[\s\S]/gi, "*");
const tempStr = firstStr + middleStr + lastStr;
return tempStr;
}
desensitization("23121313", 3, 2);
//简单的手机号脱敏
let mobileTel ='13112121090'
mobileTel.toString().replace(/^(.{3}).*(.{4})$/, '$1****$2') //131****1090
js保留两位小数或者N位
let number = 3.1;
//使用toFixed()方法,但是部分浏览器不兼容，有时不进位
//不自动补0
let num = parseFloat(number.toFixed(2)); //3.1
~ or ~
let num = Number(number.toFixed(2)) //3.1
//小于两位小数时，自动补0
let number = 3.1;
let num = number.toFixed(2); //3.10
//使用Math.round()和Math.pow()方法
let num =Math.round(number * Math.pow(10, 2)) / Math.pow(10, 2) //3.1
解决toFixed有时不进位的问题
// value支持负数，字符串，数字
Vue.prototype.$toFixed = function(value, n){
if(!value && value!=0){
return '--'
}
var f = Math.round(value*Math.pow(10,n))/Math.pow(10,n);
var s = f.toString();
var rs = s.indexOf('.');
if (rs < 0) {
s += '.';
}
for(var i = s.length - s.indexOf('.'); i <= n; i++){
s += "0";
}
return s;
}
、、、、、调用、、、、、
<span class="num">{{ $toFixed(item.price,2) }}</span>
防抖、节流
1.工具封闭js文件，比如：util.js
let _debounceTimeout = null，
_throttleRunning = false;
/**
* 防抖
* @param {Function} 执行函数
* @param {Number} delay 延时ms
*/
export const debounce = (fn, delay = 500) => {
clearTimeout(_debounceTimeout);
_debounceTimeout = setTimeout(() => {
fn();
}, delay);
}
/**
* 节流
* @param {Function} 执行函数
* @param {Number} delay 延时ms
*/
export const throttle = (fn, delay = 1000) => {
if(_throttleRunning){
return
}
_throttleRunning = true;
fn();
setTimeout(() => {
_throttleRunning = false;
},delay)
}
2.在main.js中挂载到vue上面，方便使用
import * as util from './common/js/util';
Vue.prototype.$util = util;
3.方法使用举例
//保存
saveServiceRecord() {
if (!this.queryParams.content) {
return
}
this.$util.throttle(() => {
uni.showLoading({
mask: true,
title: "数据处理中",
})
this.SaveRecord(this.queryParams).then(res => {
if (res.sucess == 'true') {
console.log('请求成功'
} else {
uni.showToast({
title: '操作失败！',
icon: 'none'
})
}
})
.finally(() => {
uni.hideLoading();
})
}, 800) //不传，默认为1秒
},
如果不全局引用，就不挂载到vue上面，采用局部引用
//局部引用节流方法
import {throttle} from '@/common/js/util'
页面滚动到顶部
function scrollTop() {
setTimeout(() => {
document.body.scrollTop = 0;
document.documentElement.scrollTop = 0;
},0)
}
检查网络
function checkNetwork(){
const status = window.navigator.online;
return status ? 'onLine' : 'offLine';
}
js判断表情正规
function isEmoji(val) {
const emojiRe =
/[\uD83C|\uD83D|\uD83E][\uDC00-\uDFFF][\u200D|\uFE0F]|[\uD83C|\uD83D|\uD83E][\uDC00-\uDFFF]|[0-9|*|#]\uFE0F\u20E3|[0-9|#]\u20E3|[\u203C-\u3299]\uFE0F\u200D|[\u203C-\u3299]\uFE0F|[\u2122-\u2B55]|\u303D|[\A9|\AE]\u3030|\uA9|\uAE|\u3030/i;
return emojiRe.test(val);
}
js环境判断
判断是否是企微环境：
export const isQw = () => {
const ua = window.navigator.userAgent.toLowerCase()
return ua.indexOf('wxwork') > -1
}
判断安卓与苹果：
function getPlatform() {
let u = navigator.userAgent;
let isAndroid = u.indexOf("Android") > -1 || u.indexOf("Linux") > -1;
let isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
if (isAndroid) {
Vue.prototype.$platform = "android";
}
if (isIOS) {
Vue.prototype.$platform = "ios";
}
}
查询ios版本
export const getIosVersion = function() {
const ua = navigator.userAgent.toLowerCase()
let version = null
if (ua.match(/cpu iphone os (.*?) like mac os/)) {
const reg = /os [\d._]+/gi
const vInfo = ua.match(reg)
version = (vInfo + '').replace(/[^0-9|_.]/gi, '').replace(/_/gi, '.')
}
return version
}
判断是手机端还是pc端：
function isPc() {
if (
window.navigator.userAgent.match(
/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i
)
) {
return false; // 移动端sessionStorage
} else {
return true; // PC端
}
}
Vue.prototype.$isPc = isPc();
js正则匹配手机号码、座机、身份证、邮箱规则等集合
注：适配二级以及多级邮箱、电信@189.cn、大写字母等
export const checkStr = (str, type) => {
switch (type) {
case 'mobile': //手机号码
return /^1[3|4|5|6|7|8|9][0-9]{9}$/.test(str);
case 'tel': //座机
return /^(0\d{2,3}-\d{7,8})(-\d{1,4})?$/.test(str);
case 'card': //身份证
return /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/.test(str);
case 'mobileCode': //6位数字验证码
return /^[0-9]{6}$/.test(str)
case 'emailCode': //6位验证码
return /^[a-zA-Z0-9]{6}$/.test(str)
case 'pwd': //密码以字母开头，长度在6~18之间，只能包含字母、数字和下划线
return /^([a-zA-Z0-9_]){6,18}$/.test(str)
case 'pwdSafe': //密码长度在8~20之间，至少一个大写字母、一个小写字母和一个数字
return /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[a-zA-Z\d]{8,20}$/.test(str)
case 'payPwd': //支付密码 6位纯数字
return /^[0-9]{6}$/.test(str)
case 'postal': //邮政编码
return /[1-9]\d{5}(?!\d)/.test(str);
case 'QQ': //QQ号
return /^[1-9][0-9]{4,9}$/.test(str);
case 'email': //邮箱
return /^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$/.test(str);
case 'money': //金额(小数点2位)
return /^\d*(?:\.\d{0,2})?$/.test(str);
case 'URL': //网址
return /^(http|ftp|https):\/\/[\w\-_]+(\.[\w\-_]+)+([\w\-\.,@?^=%&:/~\+#]*[\w\-\@?^=%&/~\+#])?/.test(
str)
case 'IP': //IP
return /((?:(?:25[0-5]|2[0-4]\\d|[01]?\\d?\\d)\\.){3}(?:25[0-5]|2[0-4]\\d|[01]?\\d?\\d))/.test(str);
case 'date': //日期时间
return /^(\d{4})\-(\d{2})\-(\d{2}) (\d{2})(?:\:\d{2}|:(\d{2}):(\d{2}))$/.test(str) ||
/^(\d{4})\-(\d{2})\-(\d{2})$/
.test(str)
case 'number': //数字
return /^[0-9]$/.test(str);
case 'english': //英文
return /^[a-zA-Z]+$/.test(str);
case 'chinese': //中文
return /^[\\u4E00-\\u9FA5]+$/.test(str);
case 'lower': //小写
return /^[a-z]+$/.test(str);
case 'upper': //大写
return /^[A-Z]+$/.test(str);
case 'HTML': //HTML标记
return /<("[^"]*"|'[^']*'|[^'">])*>/.test(str);
case 'notNull': //非空
return str && str.length > 0;
default:
return true;
}
}
安卓键盘弹窗影响页面样式
方法一：通过ClientHeight获取屏幕大小控制底部样式
通过clientHeight元素的像素高度，包含元素的高度+内边距，不包含水平滚动条，边框和外边框；
offsetHeight包含内边距+滚动条+边框
<template>
<footer v-if='vshowFooter'>底部内容</footer>
</template>
<script>
export default {
data(){
return{
vshowFooter:true, //控制底部内部
documentHeight:document.documentElement.clientHeight, //获取默认屏幕高度
}
},
mounted(){
window.onresize = () => {
this.vshowFooter = documentHeight > document.documentElement.clientHeight ? false : true;
}
},
}
</script>
方法二：通过offsetTop计算滚动的距离
-
offsetTop：元素到offsetParent顶部的距离
-
offsetParent：距离元素最近的一个具有定位的祖宗元素（relative，absolute，fixed），若祖宗都不符合条件，offsetParent为body。
<view class="name_title" id="input-name">请输入名字</view>
<input placeholder="请输入" class="inp" v-model="name" placeholder-class="placehoder_inp" @focus="focus('input-name')" />
focus(id) {
if (id) this.domMoveTop(`#${id}`);
},
// 滚动到对应的dom处
domMoveTop(id) {
setTimeout(() => {
const dom = window.document.querySelector(id)
const top = dom.offsetTop
console.log(top)
window.scrollTo({ top: top, behavior: 'smooth' })
}, 260)
},
上传多张图片
let params = new FormData();
params.append('files',file1);
params.append('files',file2);
