js篇（技术总结 持续更新）
20200728 js如何判断字符串类型的数字
不管用Number还是parseInt转化 不能结合typeof判断其类型 而是直接if
20200220 获取周和月 截止日期
// 获取周 截止日期
if(type==='currentWeek'){
var d2 = date; // 当前日 date等于传入的标准时间
d2.setDate(date.getDate()+6); // 结束日 标准时间
let weekEnd = d2.getFullYear()+'-'+(d2.getMonth()+1 < 10 ? '0'+(d2.getMonth()+1) : d2.getMonth()+1)+'-'+(d2.getDate() < 10 ? '0'+(d2.getDate()) : d2.getDate());
return [Y+"-"+M+"-"+D,weekEnd];
}
// 获取月 截止日期
if(type==='currentMonth'){
var nowMonth = date.getMonth(); // 当前月
var nowYear = date.getFullYear(); // 当前年
var d3 = new Date(nowYear, nowMonth+1, 0); // 本月的结束时间 标准时间
var monthEnd = d3.getFullYear()+'-'+(d3.getMonth()+1 < 10 ? '0'+(d3.getMonth()+1) : d3.getMonth()+1)+'-'+(d3.getDate() < 10 ? '0'+(d3.getDate()) : d3.getDate());
return [Y+"-"+M+"-"+D,monthEnd];
}
// 参考资料 js获取当前月份 第一天和最后一天
var now = new Date(); // 当前日期
var nowYear = now.getFullYear(); // 当前年
var nowMonth = now.getMonth(); // 当前月
var monthStartDate = new Date(nowYear, nowMonth, 1); // 本月的开始时间
var monthEndDate = new Date(nowYear, nowMonth+1, 0); // 本月的结束时间
var timeStar = Date.parse(monthStartDate)/1000; //s
var timeEnd = Date.parse(monthEndDate)/1000; //s20200119 联图网在线二维码生成接口
// 获取支付二维码
getPayCode() {
let para = {
"MemberId": this.employeeId,
"orderId": this.orderId,
"payType": 7,
};
this.adminApi(para,'获取支付二维码').then((res) => {
if(res.code===200){
let imgDiv = document.getElementById('imgDiv');
let img = document.createElement("img");
img.src = 'http://qr.topscan.com/api.php?&text='+encodeURIComponent(res.data.code_url);
img.style = "width: 60px;height: 60px;margin: 15px;"
imgDiv.appendChild(img)
}
});
},20200109 map和filter的用法及区别
map函数之后，数组元素个数不变，但元素属性发生了变化。
filter函数之后，数组元素个数改变，但是元素属性不会改变。
说的通俗一点，就是map一般用来处理元素属性，filter一般用来筛选想要的元素。
20191231 数字相加减
var c = Number(a) + Number(b) 20191231 批量修改数组中每个对象的属性值
arr = arr.map(function(item,index,arr) {
item.age = 1;
return item;
})20191207 禁止图文被复制
-webkit-user-select: none;
-ms-user-select: none;
-moz-user-select: none;
-khtml-user-select: none;
user-select: none;
![]()
// 禁止鼠标右键保存图片
![]()
// 禁止鼠标拖动图片20190923 对象合并
Object.assign({name:111},{age:18}) 常见的数组合并 用concat拼接 用的比较多 但对象合并 相对来说适应场景比价少
个人使用场景：封装小程序request请求时 header中要传默认的token 但是有些接口又特殊需要传入一些参数
手机端点击输入框时禁止调起键盘
H5页面唤起本地摄像头
同步(sync)和异步(async)的区别
js是属于单线程的，也就是我们说的同步，但有时候需要异步
单线程：所有的任务由一个线程来完成
多线程：多个任务可分配给不同的线程来完成
同步：在进程中任务未结束时需等待结束才能执行下一个任务
异步：在进程中任务未结束但在等待的过程中可先去执行下一个任务
简单来说：同步就是排队来执行，异步就是同时去执行
ajax请求时async属性默认为true，也就是说默认就是异步的，要想改成同步进行，修改async属性改为false
js逻辑中有三种解决方案，第一是方法嵌套，第二是setTimeout控制执行时间，第三是es6新增的promise特性input type="file"时修改其默认样式
h5如何动态设置meta标签的描述内容
// 设置标签
var metaList = document.getElementsByTagName("meta"); // 拿到标签
for (var i = 0; i < metaList.length; i++) {
if (metaList[i].getAttribute("property") == "fb:app_id") {
metaList[i].content = '这是一段描述'; // 设置描述
}
}h5内嵌在app时，做微信分享，动态传递分享标题和图片路径给ios
// 前端在页面中动态绑定文字内容并将其隐藏掉
{{obj.SeoDescription}}
{{obj.PhotoURL}}
// ios那边通过id去获取相应的值 标题和路径
NSString *htmlTitle = @"document.title";
NSString *htmlNum = @"document.getElementById('PhotoURL').innerText";js判断网页是否是在微信浏览器中打开
function isWeiXin(){
var ua = window.navigator.userAgent.toLowerCase(); // 该属性包含了浏览器类型、版本、操作系统类型、浏览器引擎类型等信息
//通过正则表达式匹配ua中是否含有MicroMessenger字符串
if(ua.match(/MicroMessenger/i) == 'micromessenger'){
return true;
}else{
return false;
}
}js判断当前浏览器是否是在移动端
if((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i))) {
// console.log('移动端');
this.isPc=false;
} else {
// console.log('pc端');
this.isPc=true;
}js做消息通知声音提示
$('audio').remove();
let audioElementHovertree = document.createElement('audio');
audioElementHovertree.setAttribute('src', 'http://w.qq.com/audio/classic.mp3');
audioElementHovertree.setAttribute('autoplay','autoplay'); //打开自动播放input type="number"时如何限制输入长度
es6中promise的使用
new Promise(function(resolve, reject){
// 先执行
resolve();
}).then(function (data) {
// 再执行
});js开启和禁止页面滑动
// 定义方法
bodyScroll(event){
event.preventDefault();
},
// 禁止滑动
document.body.addEventListener('touchmove',this.bodyScroll,false);
$('body').css({'position':'fixed',"width":"100%"});
// 开启滑动
document.body.removeEventListener('touchmove',this.bodyScroll,false);
$("body").css({"position":"initial","height":"auto"});js复制输入框和非输入框的内容
// 复制输入框的内容
1.
2. document.getElementById("input").select(); // 选择对象
3. document.execCommand("copy"); // 执行浏览器复制命令
// 复制非输入框中的内容
1.
852965
2. var code = document.getElementById("code").innerText;
var input = document.getElementById("input");
input.value = code; // 修改文本框的内容
input.select(); // 选中文本
document.execCommand("copy"); // 执行浏览器复制命令
// 以上方法在pc端没有任何问题 但在移动端 发现并未复制成功 存在一定的缺陷 故采用下面引入clipboard插件的方法
1. cnpm install clipboard --save // 安装clipboard
2. import ClipboardJS from 'clipboard'; // 在需要的单个页面引入
3. 邀请码{{code}
复制
4. copy() {
const clipboard = new ClipboardJS('.copy_btn');
clipboard.on('success', function(e) {
e.clearSelection();
alert('复制成功')
});
clipboard.on('error', function(e) {
alert('复制失败');
});
},js获取url后面多个参数的方法
// 网上搜索到的最常见的方法 此方法存在的缺陷 当url中有#(vue-cli项目)或者是微信QQ分享出来的链接会自动拼接参数(?from=)等都会影响location.search的正确获取
getQueryString(name) {
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
var r = window.location.search.substr(1).match(reg);
if (r != null) return unescape(r[2]);
return null;
}
// ios
朋友圈 from=timeline&isappinstalled=0(或者appinstall=0)
微信群 from=groupmessage&isappinstalled=0
好友分享 from=singlemessage&isappinstalled=0
// android
朋友圈 from=timeline
微信群 from=groupmessage
好友分享 from=singlemessage
// 刚开始对于#的处理采用的是定位?下标位置手动截取search的方式，后来有了?from=，采用的是定位?参数下标的位置手动截取search
// 接下来面临的第三个问题，app分享时并未安顺序给你拼接参数，也就是你这边截取的第一个参数它可能放在了其他位置，所以，采用的解决方案是 忽略# 忽略分享出来的& 将所有的?from=给替换掉 然后根据?下标去截取search
getQueryString(name) {
var url = location.href.replace('?from=',''); // 只要替换掉?开头的即可 &不影响search的截取
var search = url.substr(url.indexOf('?')); // 根据?的位置 截取search
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
var r = search.substr(1).match(reg);
if (r != null) return unescape(r[2]);
return null;
}js进行图片压缩
// 图片压缩
canvasDataURL(path, obj, callback){
var img = new Image();
img.src = path;
img.onload = function(){
var that = this;
// 默认按比例压缩
var w = that.width,
h = that.height,
scale = w / h;
w = obj.width || w;
h = obj.height || (w / scale);
var quality = 0.7; // 默认图片质量为0.7
//生成canvas
var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
// 创建属性节点
var anw = document.createAttribute("width");
anw.nodeValue = w;
var anh = document.createAttribute("height");
anh.nodeValue = h;
canvas.setAttributeNode(anw);
canvas.setAttributeNode(anh);
ctx.drawImage(that, 0, 0, w, h);
// 图像质量
if(obj.quality && obj.quality <= 1 && obj.quality > 0){
quality = obj.quality;
}
// quality值越小，所绘制出的图像越模糊
var base64 = canvas.toDataURL('image/jpeg', quality);
// 回调函数返回base64的值
callback(base64);
}
},
// 拍照
makePhoto(e){
var file = document.getElementById('photo').files[0];
if (window.FileReader) { //如果浏览器支持FileReader
var reader = new FileReader(); //新建一个FileReader对象
reader.readAsDataURL(file); //读取文件url
let self = this;
reader.onloadend = function (e) {
// self.cardOrc(e.target.result.replace("data:image/jpeg;base64,",""));
// console.log(e.target.result)
self.canvasDataURL(e.target.result,{
quality: 0.1
},function (base64) {
// console.log(base64)
self.cardOrc(base64.replace("data:image/jpeg;base64,",""));
});
};
}
file = null;
},js解决ios11系统下input光标错位的问题
原因分析：iOS11对fixed不兼容导致的，外面的遮罩层引用了fixed定位，输入框弹出页面被顶上去了但是输入框光标还停留在原来的位置。
解决办法：网上看了一大堆，总结了一种最简单的方法，外面弹框改为absolute定位，弹框打开时将整个容器高度改为页面高度禁止其滚动，弹框关闭时又给还原回来。
open(){
this.isPopup = true;
document.getElementById('vote').style.height = '100vh'
document.getElementById('vote').style.overflow = 'hidden'
},
close(){
this.isPopup = false;
document.getElementById('vote').style.height = 'auto'
}js兼容部分ios手机input失焦后页面上移问题
(function() {
let myFunction;
let isWXAndIos = isWeiXinAndIos();
if (isWXAndIos) { // 既是微信浏览器 又是ios============（因为查到只有在微信环境下，ios手机上才会出现input失去焦点的时候页面被顶起）
document.body.addEventListener('focusin', () => { // 软键盘弹起事件
clearTimeout(myFunction)
});
document.body.addEventListener('focusout', () => { // 软键盘关闭事件
clearTimeout(myFunction);
myFunction = setTimeout(function() {
window.scrollTo({top: 0, left: 0, behavior: 'smooth'})// 重点 =======当键盘收起的时候让页面回到原始位置
}, 200)
})
}
})();
function isWeiXinAndIos() {
// window.navigator.userAgent属性包含了浏览器类型、版本、操作系统类型、浏览器引擎类型等信息，这个属性可以用来判断浏览器类型
let ua = '' + window.navigator.userAgent.toLowerCase();
// 通过正则表达式匹配ua中是否含有MicroMessenger字符串且是IOS系统
let isWeixin = /MicroMessenger/i.test(ua); // 是在微信浏览器
let isIos = /\(i[^;]+;( U;)? CPU.+Mac OS X/i.test(ua); // 是IOS系统
return isWeixin && isIos
}