项目完善（第一周）

学习总结

1.字数限制问题

写项目时，输入框需要有字数限制，从CSDN上搜索然后封装了一个
英文与数字占0.5字符，中文占一字符

// 限制字数
// txt:输入框内容   residue:还剩residue个字   max:最大限度
function residualFigure(txt, residue, max){
    $(txt).on("keyup",function(){
        let content = $(txt).val().replace(/\s/g,''),//获取输入内容容器中的值
            chinese = $(txt).val(). replace(/[^\u4e00-\u9fa5]/gi,''),
            english = $(txt).val().replace(/[^0-9]/gi, ''),
            math =  $(txt).val().replace(/[^a-z]+/gi, ''),
            len = chinese.length + english.length / 2 + math.length / 2,//获取输入容器中值的长度
            residual_number = max - len;//最大输入限制的数值-获取输入容器中值的长度，得到改变剩余数字的值
        if(residual_number < 0){
            residual_number = 0;//防止剩余数字的值出现负数情况
        }
        //判断 若输入框里的内容长度大于给定限制的数值，则只保留给定限制的数值长度的内容
        if(len > max){
            $(txt).val(content.substring(0,max));
        }
        //更改剩余数字数值
        $(residue).text(residual_number);
    });
}

2.将input file中选取的图片或视频渲染至页面上，并限制大小

$('#file').on('change', function(event) {
        let name=event.target.value;
        let fileName = name.substring(name.lastIndexOf(".")+1).toLowerCase();
        let fileSize = 0;
        fileSize = event.target.files[0].size;
        var size = fileSize / 1024;
        if(fileName != "jpg" && fileName != "png" && fileName != "mp4"){
            prompt("请选择jpg、png、mp4格式图片或视频上传！", "#a94442", "#ebccd1", "#f2dede");
            event.target.value="";
            return
        }
        else if(size>10000){
            prompt("文件不得大于10M！", "#a94442", "#ebccd1", "#f2dede");
            event.target.value="";
            return   //阻止submit提交
        }
        // 通过FileReader读取文件对象信息
        let reader = new FileReader()
        reader.onload = function(e) {
            let img = new Image()
            img.src = e.target.result //读取结果会转为base64数据格式
        }
        reader.readAsDataURL(event.target.files[0])

        let imageUrl = URL.createObjectURL(event.target.files[0])
        const chooseFileInp = document.getElementsByClassName("chooseFileInp")[0]
        chooseFileInp.style.display = "none"
        if(fileName == "jpg" || fileName == "png"){
            const img2 = document.getElementById("img2")
            const photo = document.getElementsByClassName("photo")[0]
            photo.style.display = "block"
            img2.src = `${imageUrl}`
            document.getElementById("img").value = `${imageUrl}`
        }else if(fileName == "mp4"){
            const longVideo = document.getElementsByClassName("longVideo")[0]
            const longVi = document.getElementById("longVideo")
            longVideo.style.display = "block"
            longVi.src = `${imageUrl}`
            document.getElementById("video").value = `${imageUrl}`
        }
    })

3.JS追加元素的方法

1）创建节点追加

1、append：a.append(b) 将b追加到a的内部的末尾，b是a的子元素

2、appendTo：b.appendTo(a) 将b追加到a的内部的末尾，b是a的子元素

3、prepend：a.prepend(b),将b追加到a的内部的最前面，b是a的子元素

4、prependTo：b.prependTo(a),将b追加到a的内部的最前面，b是a的子元素

5、after：a.after(b),将元素(b)追加到(a)后面，二者同级

6、before：a.before(b),将元素(b)追加到(a)前面，二者同级

2）拼接字符串

str += `<li>我是新加的</li>`
document.getElementById("ul").innerHTML = str

3）利用insertBefore/After

1、insertAfter：a.insertAfter(b)将元素(b)追加到指定对象(a)的后面，二者同级

2、insertBefore：a.insertBefore(b),将元素(b)追加到指定对象(a)的前面，二者同级