记一些开发中遇到得问题...

发表于 | 分类于

平时开发中遇到的一些问题及解决方法

onclick事件传递对象参数
1
2
3
4
onclick="todo("+JSON.stringify(data).replace(/"/g, '"')+")"
demo:
<a class="fc-check" onclick="goDetail('+JSON.stringify(fcOrderList[i].orderId).replace(/"/g, '&quot;')+')">查看</a>//传递单个参数 单引号拼接
"<td width=\"120\"><a class=\"fc-check\" onclick=\"todo("+JSON.stringify(data).replace(/"/g, '&quot;')+")\">查看</a></td>"//双引号拼接 传递对象参数--需要用\(反斜杠)转义
ajax post方法参数问题
1
2
3
4
5
6
7
8
9
10
11
12
13
let obj={};
obj.gameName='xxx';
obj.gameId='xxx';
$.ajax({
            type: "POST",
            url: url+ "?t=" + new Date().getTime(),
            data: JSON.stringify(obj),
            contentType: "application/json; charset=UTF-8",
            dataType: "json",
            success: function (res) {
               console.log(res)
        });
//使用contentType: “application/json”则data只能是json字符串
switch(data){}
1
2
3
4
5
6
7
8
9
10
switch(data){
  case '1':
      console.log(11);
      break;
case 2:
    console.log(22);
    break;
}
//switch对参数类型敏感 可以先打印看看data到底是什么类型的参数 console.log(typeof data);
//如果参数data=1是字符串可以打印出11，但是如果1是number那么就不会去执行case1下面得了
WdatePicker.js使用
1
2
3
4
5
6
//代码如下：
<input id="startTime" class="Wdate m-letf3" readonly="readonly" type="text" onFocus="WdatePicker({ dateFmt: 'yyyy-MM-dd HH:mm:ss',maxDate:'#F{$dp.$D(\'endTime\',{d:-7})}'})"/>
<input id="endTime" class="Wdate" readonly="readonly" type="text" onFocus="WdatePicker({ dateFmt: 'yyyy-MM-dd HH:mm:ss' ,minDate:'#F{$dp.$D(\'startTime\')}',maxDate:'#F{$dp.$D(\'startTime\',{d:7})}'})"/>
//显示年月日时分秒:onFocus="WdatePicker({ dateFmt: 'yyyy-MM-dd HH:mm:ss'})"
//结束时间为开始时间七天以内:startTime--maxDate:'#F{$dp.$D(\'endTime\',{d:-7})}'
// endTime--minDate:'#F{$dp.$D(\'startTime\')}',maxDate:'#F{$dp.$D(\'startTime\',{d:7})}'
使用toFixed()函数时，出现“toFixed() is not a function”的解决办法
1
2
3
typeof item.price//string
//toFixed只能针对数字类型才能使用，所以对于字符类型的要用parseFloat或者parseInt函数先转一下再调用
parseInt(item.price).toFixed(2)//item.price=34.000 -- 34.00
js获取当前时间的前一天/后一天
1
2
3
var now=new Date();
var preDate = new Date(now.getTime() - 24*60*60*1000); //前一天
var nextDate = new Date(now.getTime() + 24*60*60*1000); //后一天
try catch
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
//背景--url跳转中文参数编码，由于未登录先去登录站点登录，进行了二次编码，导致获取url中文参数乱码问题
try {
    tryCode - 尝试执行代码块
}
catch(err) {
    catchCode - 捕获错误的代码块
} 
finally {
    finallyCode - 无论 try / catch 结果如何都会执行的代码块
}
//demo
// 获取URL对应参数值
function getUrlParam(name){
    var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
    var r = window.location.search.substr(1).match(reg);  //匹配目标参数
    if (r!=null){
        try {
            return decodeURI(r[2]); //报错执行catch下得代码
        }catch(e){
            return unescape(r[2])
        }
    }else{
        return null; //返回参数值
    } 
}
限制input输入数字且小数点后最多n位
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
function num(value,length) {
    //length代表可以输入得小数位数
    value = value.replace(/[^\d.]/g, "");  //清除“数字”和“.”以外的字符
    value = value.replace(/\.{2,}/g, "."); //只保留第一个. 清除多余的
    value = value.replace(".", "$#$").replace(/\./g, "").replace("$#$", ".");
    var str='^(\\-)*(\\d+)\\.([0-9]{1,'+length+'}).*$';//给正则表达式代入动态参数 ，注意--反斜杠需要转义
    var reg=new RegExp(str);
    value = value.replace(reg,'$1$2.$3');//只能输入两个小数-- reg=/^(\-)*(\d+)\.([0-9]{1,2}).*$/
    if (value.indexOf(".") < 0 && value != "") {//以上已经过滤，此处控制的是如果没有小数点，首位不能为类似于 01、02的金额
       value = parseFloat(value);
    }
    return value
}
//使用：如果小数后面五位则num(this.value,5)
<input placeholder="" onkeyup="this.value=num(this.value,2)" />
限制input输入数字且小数点后最多n位(第一位不能是小数点)
1
2
3
4
5
6
7
8
9
10
11
function num(obj) {
    obj.value = obj.value.replace(/[^\d.]/g, ""); //清除"数字"和"."以外的字符
    obj.value = obj.value.replace(/^\./g, ""); //验证第一个字符是数字
    obj.value = obj.value.replace(/\.{2,}/g, "."); //只保留第一个".", 清除多余的
    obj.value = obj.value.replace(".", "$#$").replace(/\./g, "").replace("$#$", ".");
    obj.value = obj.value.replace(/^(\-)*(\d+)\.(\d).*$/, '$1$2.$3'); //只能输入一个小数
}
//两位小数
obj.value = obj.value.replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3'); //添加 \d 即为小数位数
//使用
<input  placeholder="" onkeyup="num(this)" />
测试环境线上环境接口域名不同
1
2
3
#获取协议 域名端口 拼接请求url
`${location.protocol}//${location.host}`
`${location.protocol}//${location.host}/api/getInfo`
js返回上一页并刷新页面
1
2
//<a href="#" onclick="self.location=document.referrer;">返回</a>
self.location=document.referrer
当前时间是否符合某时间区间判断(跨天)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
window.onload = function () {
            let timeList = ['09:00', "01:00"];
            checkTime(...timeList)
        }
        function checkTime(startTime, endTime) {
            //console.log(startTime, endTime);
            //let now = new Date('2018-09-19 0:00').getTime();
            let now = new Date().getTime();
            let start = new Date().setHours(startTime.split(':')[0], startTime.split(':')[1], 0);
            let end = new Date().setHours(endTime.split(':')[0], endTime.split(':')[1], 0);
            if (end < start) {//end小于start表示是跨天区间
                end += 24 * 60 * 60 * 1000//end加上一天
            }
            if (start < now && now < end) {
                console.log(`在符合时间段内`);
            } else {
                console.log(`不在符合的时间段内,时间段为${startTime}-${endTime}`);
            }
        }
input限制只能输入纯数字问题
1
2
3
4
5
6
1、onkeyup = "value=value.replace(/[^\d]/g,'')"
=> 使用 onkeyup 事件，有 bug ，那就是在中文输入法状态下，输入汉字之后直接回车，会直接输入字母
2、onchange = "value=value.replace(/[^\d]/g,'')"
=>使用 onchange 事件，在输入内容后，只有 input 丧失焦点时才会得到结果，并不能在输入时就做出响应
3、oninput = "value=value.replace(/[^\d]/g,'')"
=>使用 oninput 事件，完美的解决了以上两种问题，测试暂时还没有出现其它问题。
window.open在ajax请求完成新窗口被拦截的问题
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
//解决--先通过用户点击打开一个新的空白窗口，然后再对新打开的页面进行重定向。
        var newOpen=window.open();
        $.ajax({
            type: "GET",
            url: url,
            data: data,
            contentType: "application/json; charset=UTF-8",
            dataType: "json",
            success: function (resp) {
                if (resp.success) {
                    newOpen.location.href = baseServiceUrl + "shPayment?orderId=" + resp.orderId;
                } else {
                  console.log('请求失败')
                }
            }
        });
WebUploader上传图片删除以后再上传同一张图片 提示超过大小限制（限制：10M，图：9M）

WebUploader API

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
getFiles
getFiles() ⇒ Array
getFiles( status1, status2, status... ) ⇒ Array
返回指定状态的文件集合，不传参数将返回所有状态的文件。

这里的状态如下：

File.Status
文件状态值，具体包括以下几种类型：

-inited 初始状态
-queued 已经进入队列, 等待上传
-progress 上传中
-complete 上传完成。
-error 上传出错，可重试
-interrupt 上传中断，可续传。
-invalid 文件不合格，不能重试上传。会自动从队列中移除。
-cancelled 文件被移除。
就是说，只要我们的uploader对象没有重新创建，那它会保存所有选择的文件，

当然我们也有方法，clear一下， 我们看到有这样的方法：

removeFile
removeFile( file ) ⇒ undefined
removeFile( id ) ⇒ undefined
removeFile( file, true ) ⇒ undefined
removeFile( id, true ) ⇒ undefined
参数:

file {File, id}
File对象或这File对象的id

移除某一文件, 默认只会标记文件状态为已取消，如果第二个参数为 true 则会从 queue 中移除。

当我们调用了一下removeFile方法后，只是标记了一下这个文件的状态，我们用getFiles方法，其实还是可以看到，

这时我们可以再调用方法：

reset
reset() ⇒ undefined
重置uploader。目前只重置了队列。就可以清除勾选的上传文件了

在uploadSuccess事件中，调用removeFile方法，注意这个事件也是针对一个文件的
//成功事件,  针对一个文件
uploader.on('uploadSuccess', function (file, response) {
    
　　uploader.removeFile(file);

});

在uploadFinished事件中，调用reset方法，就可清空getfiles了
// 所有文件上传成功后调用        
uploader.on('uploadFinished', function () {
    //清空队列
     uploader.reset();
});

//uploader pick自动生成的上传按钮位置不对（应包含在wrap内却在body中）
 uploader = WebUploader.create({
        auto: true,
        pick: {
            id: '#filePicker',
            label: '上传图片',
            multiple: false
        },
        paste: document.body,

        accept: {
            title: 'Images',
            extensions: 'gif,jpg,bmp,png,jpeg',
            mimeTypes: 'image/gif,image/jpg,image/bmp,image/png,image/jpeg'
        },

        // swf文件路径
        swf: './swf/uploader.swf',

        disableGlobalDnd: true,
        timeout: 0,
        chunked: false,
        chunkSize: 10 * 1024 * 1024,
        server: '/api/UploadFile',
        fileNumLimit: 1,
        fileSizeLimit: 10 * 1024 * 1024, // 10 M
        fileSingleSizeLimit: 10 * 1024 * 1024 // 10 M
    });
//uploader初始化以后调用
    uploader.refresh();

获取图片img的真实宽高大小
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
// 获取图片真实高度
function getImageSize(url,callback){
    var img = new Image();
    img.src = url;
    // 如果图片被缓存，则直接返回缓存数据
    if(img.complete){
        callback(img.width, img.height);
    }else{
        img.onload = function(){
            callback(img.width, img.height);
        }
    }
}
//调用：
$(function(){
    var imgSrc = $("#img").attr("src");
    getImageSize(imgSrc,function(w,h){
        console.log({width:w,height:h});
    });
});
w--图片的宽 h--图片的高
时间问题
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
//判断时间是否是当天
var str = 1404172800000;
if (new Date(str).toDateString() === new Date().toDateString()) {
    //今天
} else if (new Date(str) < new Date()){
    //之前
    console.log(new Date(str).toISOString().slice(0,10));//2014-07-01
}
//判断当前时间是否是一天内，超过一天不超过三十天，超过三十天
showTime(sendTime) {
		console.log(sendTime);    //"2019-01-08T10:49:29"
		let now = new Date().getTime(); //当前时间戳
		let orderTime = new Date(sendTime).getTime(); //订单最后会话时间
		let oneday = 24 * 60 * 60 * 1000,
			month = 30 * 24 * 60 * 60 * 1000;
		if ((now - orderTime) < oneday) {
			sendTime = sendTime.split('T')[1]
			//一天内
		}
		if ((now - orderTime) > oneday || (now - orderTime) < month) {
			//超过一天 不超过30天
			sendTime = `${Math.ceil((now-orderTime)/(24*60*60*1000))}天前`
		}
		if ((now - orderTime) > month) {
			//超过30天
			sendTime = sendTime.replace('T', ' ')
		}
		return sendTime
	}
字符串首尾保留中间星号
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
function parseStringToStar(str, len, fixLen) {
	//str-- 传入的字符串
	//len-- 首尾需保留的长度
	//fixLen --是否固定显示星号数量
	var starLen = fixLen ? new Array(fixLen + 1).join('*') : (str.length > 6 ? new Array(str.length - (2 * len - 1)).join(
		'*') : new Array(str.length -
		(len - 1)).join('*'))
	return str.length > 6 ? str.substr(0, len) + starLen + str.substr(-len) : str.substr(0, len) + starLen
}

//使用
## parseStringToStar('278383678@qq.com',3,3)
## "278***com"

## parseStringToStar('278383678@qq.com',3)
## "278**********com"

## parseStringToStar('123456',3)
## "123***"
js正则去除字符串中的中文英文数字
1
2
str.match(/[a-zA-Z0-9\u4e00-\u9fa5]+/g).join('');
str.replace(/[^\u4e00-\u9fa5a-zA-Z0-9]/g,'')
js 过滤敏感词 ，可将带有标点符号的敏感词过滤掉
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
//简单版本
function transSensitive(content) {
    var Sensitive = wordList//敏感词数组
    var v = new RegExp(Sensitive.join('|'), "gi");//将数组转成正则
    var array = new Array();
    //将特殊符号的过滤并且保存
    content = content.replace(/[\ |\~|\`|\!|\@|\#|\$|\%|\^|\&|\*|\(|\)|\-|\_|\+|\=|\||\\|\[|\]|\{|\}|\;|\:|\"|\'|\,|\<|\.|\>|\/|\?]/g, function (s, i) {
        array.push({
            index: i,
            content: s
        });
        return s.replace(/./g, '');
    })
    //将敏感词进行筛选
    console.log(content, v);
    return content.replace(v, '**')
}

//适用
function filterWords(content) {
    //敏感词数组--wordList
    var v = new RegExp(wordList.join('|'), "gi");//将数组转成正则
    var array = new Array();
    //将特殊符号的过滤并且保存
    content = content.replace(/[\ |\~|\`|\!|\@|\#|\$|\%|\^|\&|\*|\(|\)|\-|\_|\+|\=|\||\\|\[|\]|\{|\}|\;|\:|\"|\'|\,|\<|\.|\>|\/|\?]/g, function (s, i) {
        array.push({
            index: i,
            content: s
        });
        return s.replace(/./g, '');
    })
    //将敏感词进行筛选
    console.log(content, v);
    var output = content.replace(v, function (sMatch) {
        //sMatch 匹配到的敏感词
        if (sMatch.length <= 1) {
            return sMatch.replace(/./g, '*');
        }
        else {
            return sMatch.replace(/./g, '*');
            /* return sMatch[0] + sMatch.replace(/./g, '*').substring(0, sMatch.length - 1);//将词的第一个字保留 */
        }
    })
    var array2 = output.split('');//将字符串转成char数组
    console.log(array, array2);
    //循环array 将array[i].content 通过array[i].index 插入指定位置 现将array[i].content  应该算是拼接
    for (var i = 0; i < array.length; i++) {
        array2.splice(array[i].index, 0, array[i].content);
    }
    console.log(array2);
    return array2.join('');
}
ajax contentType
1
2
3
4
5
6
7
1. application/x-www-form-urlencoded(默认类型)

如果不指定其他类型的话, 默认是x-www-form-urlencoded, 此类型要求参数传递样式为 key1=value1&key2=value2

2. application/json

更适合传递大数据的形式, 参数样式就是json格式, 例如{"key1":"value1","key2":[1,2,3]}等
获取最近一周七天（或指定天数）的日期
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
function getBeforeDate(number) {
    let num = number;
    let dateList = [], s;
    for (let i = 0; i < number; i++,num--) {
        const date = new Date();
        let year = date.getFullYear();
        let mon = date.getMonth() + 1;
        let day = date.getDate();
        if (day <= num) {
            if (mon > 1) {
                mon = mon - 1;
            } else {
                year = year - 1;
                mon = 12;
            }
        }
        date.setDate(date.getDate() - num);
        year = date.getFullYear();
        mon = (date.getMonth() + 1) < 10 ? `0${date.getMonth() + 1}` : date.getMonth() + 1;
        day = date.getDate() < 10 ? `0${date.getDate()}` : date.getDate();
        // s = year + '-' + (mon < 10 ? ('0' + mon) : mon) + '-' + (day < 10 ? ('0' + day) : day);
        s = `${mon}${day}`
        dateList.push(s)
        // num-=1
    }
    return dateList;
}

//使用
## getBeforeDate(7) //获取最近一周七天的日期
## 返回结果 Array: ["1016", "1017", "1018", "1019", "1020", "1021", "1022"]
shadow wechat
扫一扫，关注微信公众号。