JS笔记

Posted by Chen Blog on July 16, 2018

这里记录经常使用的到js技巧。不用每次想用到的时候就去网上找很久的资料都找不到

layui的date两个日期实现区间选择

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
var aaa,bbb;

    // 选择日期的两个按钮
    layui.use('laydate', function(){
        var laydate = layui.laydate;

        //执行一个laydate实例
        aaa = laydate.render({
            type:'date',
            btns: ['now', 'confirm'],
            min:0,
            elem: '#date1', //指定元素
            done:function (value,date) {
                date.month = date.month-1;
                bbb.config.min = date;
            }
        });
        bbb = laydate.render({
            type:'date',
            btns: ['now', 'confirm'],
            min:0,
            elem: '#date2', //指定元素
            done:function (value,date) {
                date.month = date.month-1;
                aaa.config.max = date;
            }
        });
    });

js实现在input里面只能输入正整数

1
onkeyup="if(this.value.length==1){this.value=this.value.replace(/[^1-9]/g,'')}else{this.value=this.value.replace(/\D/g,'')}" onafterpaste="if(this.value.length==1){this.value=this.value.replace(/[^1-9]/g,'')}else{this.value=this.value.replace(/\D/g,'')}"

计算多少久之间

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
/**
     * 计算多久之前的
     * @param publishtime
     * @returns {string}
     */
    function getDateTimeBefor(publishtime) {
        var currTime = Date.parse(new Date());;
        var l = parseInt(currTime) - parseInt(publishtime * 1000);
        // 少于一分钟
        var time = l / 1000;
        if (time < 60) {
            return "刚刚";
        }

        // 秒转分钟
        var minuies = time / 60;
        if (minuies < 60) {
            return Math.floor(minuies) + "分钟前";
        }

        // 秒转小时
        var hours = time / 3600;
        if (hours < 24) {
            return Math.floor(hours) + "小时前";
        }
        //秒转天数
        var days = time / 3600 / 24;
        if (days < 30) {
            return Math.floor(days) + "天前";
        }
        //秒转月
        var months = time / 3600 / 24 / 30;
        if (months < 12) {
            return Math.floor(months) + "月前";
        }
        //秒转年
        var years = time / 3600 / 24 / 30 / 12;
        return Math.floor(years) + "年前";

    }

选择图片展示

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<img onclick="$('#choose_file').click();" style="max-width:150px;max-height: 150px;" id="img_show" src="{$dish_data.img}" onerror="this.src='https://gitee.com/uploads/88/515788_xuai.png?1472889886'" alt="" style="max-width:200px;max-height:200px;">
<input id="choose_file" type="file" name="avatar" style="display: none;" accept="image/*" onchange="choose_img(this)">
<div class="layui-btn" onclick="$('#choose_file').click();">选择图片</div>

    /**
     * 选择图片
     */
    function choose_img(obj) {
        var files= obj.files[0];
        if((files.type).indexOf("image/") == -1){
            layui.use('layer',function () {
                layui.layer.msg('请选择图片类型',{icon:2});
                return false;
            });
        }
        var windowURL = window.URL || window.webkitURL;
        dataURL = windowURL.createObjectURL(obj.files[0]);
        $('#img_show').attr('src',dataURL);
    }

从canvas下载成图片

1
2
3
4
5
6
7
8
var image = document.getElementsByTagName("canvas")[0].toDataURL("image/png").replace("image/png", "image/octet-stream");
window.location.href=image;
// 这是下载带文件名的方案
var image = document.getElementsByTagName("canvas")[0].toDataURL("image/png").replace("image/png", "image/octet-stream");
var link = document.createElement("a");
link.download = 'image.png';
link.href = image;
link.click();

radio设置选中

radio设置选中算是一个比较麻烦的问题。不像普通的赋值那样。直接赋值就可以选中了。 下面这个是我比较喜欢用的方法

1
2
<input type="radio" name="coupon" value="1" checked="checked"> <span style="color:#65b24e;">可用</span>
<input type="radio" name="coupon" value="0"> <span style="color:#c64a48;">不可用</span>
1
2
3
4
5
6
7
8
$('input[type=radio]').each(function () {
	// 循环所有。然后遇到你要选中的值就选中。不是你要选中的值就不选中
                if($(this).val() == package_data.coupon){
                    $(this).attr("checked",true);
                }else{
                    $(this).attr("checked",false);
                }
            })