考核完善周

考核总结

第一次用自己的思路写一个简单的项目，出现许多不足，学长学姐指出问题后给出一个星期的时间让我们来完善自己的项目，下面是几个比较大的问题，和一些细节知识点

一、重写alert、confirm

浏览器中alert、confirm样式放在页面中是不太美观的，影响页面的观感和用户体验，因此需要重写alert和confirm

一）重写alert

运用html和css完成样式，JS封装一个函数，传入需要的参数，来执行alert；我写了三个颜色，分别用于警告、警示、提示

代码部分：
HTML

	<div class="waring">
         <div class="alert" role="alert"></div>
    </div>
    <div class="btn">
    	<button id="btnA">警告</button>
    	<button id="btnB">警示</button>
    	<button id="btnC">提示</button>
   </div>

CSS

.waring {
    position: absolute;
    top: 0;
    z-index: 99;
    display: flex;
    width: 100%;
    justify-content: center;
    align-items: center;
    transition: all 0.5s ease;
    opacity: 0;


}

.alert {
    height: 50px;
    width: 300px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 10px;
    border: #cfdcc3 2px solid;
}

.btn{
    height: 100vh;
    width: 100vw;
    display: flex;
    justify-content: center;
    align-items: center;
}

JS

//提示框
function prompt(part, color, borColor, bacColor) {
    let timer;
    let time = 50;
    timer = setInterval(function () {
        time--;
        let waring = document.getElementsByClassName("waring")[0];
        let alert = document.getElementsByClassName("alert")[0];
        alert.innerHTML = part;
        alert.style.color = color;
        alert.style.borderColor = borColor;
        alert.style.backgroundColor = bacColor;
        waring.style.opacity = "1";
        waring.style.top = "5%";
        if (time == 0) {
            clearInterval(timer);
            waring.style.opacity = "0";
            waring.style.top = "0";
        }
    }, 50)
}
//警告
let btnA = document.getElementById("btnA");
btnA.onclick = function () {
    prompt("这是一个警告！", "#a94442", "#ebccd1", "#f2dede");
}
//警示
let btnB = document.getElementById("btnB");
btnB.onclick = function () {
    prompt("这是一个警示！",  "#084298", "#b6d4fe", "#cfe2ff");
}
//提醒
let btnC = document.getElementById("btnC");
btnC.onclick = function () {
    prompt("这是一个提醒！", "#507a49", "#cfdcc3", "#e2efda");
}

二）重写confirm

重写confirm，执行Ajax时需要异步（Ajax总是先于判断执行，所以需要异步操作）；运用promise函数（是一个构造函数，用来封装异步操作并可以获取其成功或失败的结果），返回成功或是失败

html

<div class="pickOut">
     <div class="pickCen">
     	 <h4>提示</h4>
         <div class="pickText"></div>
         <div class="pickBtn">
             <button class="pickSure pickbtn">确定</button>
             <button class="pickLifted pickbtn">取消</button>
         </div>
     </div>
 </div>
 <button class="btn">点我</button>

SASS

.pickOut {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.4);
    /* display: flex; */
    justify-content: center;
    display: none;

    .pickCen {
        position: absolute;
        top: 0;
        z-index: 99;
        transition: all 0.5s ease;
        font-size: 25px;
        opacity: 0;
        height: 200px;
        width: 400px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        border-radius: 10px;
        border: #ebccd1 2px solid;
        color: #a94442;
        background-color: #f2dede;

        h4{margin-top: 10px;}
        button {
            margin-top: 10px;
            height: 40px;
            width: 70px;
        }

        .pickSure {
            border: #e6b4bd 2px solid;
            background-color: #f5c4c4;

            &:hover {
                background-color: #f7bbbb;
            }

            &:active {
                background-color: #ad7674;
            }
        }

        .pickLifted {
            border: #ebccd1 2px solid;
            background-color: #f8d0d0;

            &:hover {
                background-color: #f7c1c1;
            }

            &:active {
                background-color: #c18e8d;
            }
        }
    }
}

JS

//confirm
function confirm(part) {
    let pickOut = document.getElementsByClassName("pickOut")[0];
    let pickCen = document.getElementsByClassName("pickCen")[0];
    pickOut.style.display = "flex";
    let pickText = document.getElementsByClassName("pickText")[0];
    pickText.innerHTML = part;
    let timer = setInterval(function () {
        pickCen.style.opacity = "1";
        pickCen.style.top = "50px";
    }, 50)
    let p = new Promise((resolve, reject) => {
        let pickbtn = document.getElementsByClassName("pickbtn");
        pickbtn[0].onclick = function () {
            resolve();
            clearInterval(timer);
            pickCen.style.opacity = "0";
            pickCen.style.top = "0";
            pickOut.style.display = "none";
        };
        pickbtn[1].onclick = function () {
            reject();
            clearInterval(timer);
            pickCen.style.opacity = "0";
            pickCen.style.top = "0";
            pickOut.style.display = "none";
        };
    });
    return p;
}
let btn = document.getElementsByClassName("btn")[0];
btn.onclick = function(){
    confirm("请选择?").then(() => {
        console.log(true)
    })
        .catch(function () { })
}

二、退出登录

退出登录需要调用上面confirm函数，确认后退出-
退出登录后，输入网址仍然能返回到后台，浏览器中的token依然保留，是一个很大的bug
应在退出登录后移除token，并且输入网址进入返回至登录界面先登录

//退出登录
let quit = document.getElementById("quit");
quit.onclick = function () {
    confirm("确定要退出登录吗？").then(() => {
        token = localStorage.getItem('token');
        localStorage.removeItem('token');
        window.location.replace("login.html");
    })
        .catch(function () { })
}
token = localStorage.getItem('token');
//浏览器网址进入自动退出
if(token == null){
    window.location.replace("login.html");
}

三、标签过滤

获取输入的数据时，若不进行标签过滤，代码中就可以通过输入框填加东西，可通过此种入病毒

function setText(val) {
    if (val != null && val != "") {
        var re1 = new RegExp("<.+?>|&.+?;", "g"); //匹配html标签的正则表达式，"g"是搜索匹配多个符合的内容
        var msg = val.replace(re1, ""); //执行替换成空字符
        msg = msg.replace(/\s/g, ""); //去掉所有的空格（中文空格、英文空格都会被替换）
        msg = msg.replace(/[\r\n]/g, ""); //去掉所有的换行符
        return msg //获文本文字内容的前100个字符
    }
}

四、细节零碎知识点

1）输入过长自动换行属性

word-break: break-all;

2）密码可见不可见问题

通过JS写点击事件，修改元素的type值；password为不可见、text为可见

3）邮箱格式判断

运用正则表达式判断邮箱是否正确，防止频繁使用接口

let email = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
let id = document.querySelector("#ID").value;
if(!(email.test(id)){
console.log(id)
}

4）其余零碎知识点

a. 尽管后端会对前端的传入的数据进行判断，前端依旧需要对数据进行判断和处理，判空，格式判断，正负数、整小数判断等，防止过多的使用接口，尽量减少接口的频繁使用
b. 有分页功能填加数据、删除数据时需要进行页数判断和更改，在最后一页只有一条时删除后自动跳转至前一页；最后一页已满，再填加跳转至下一页
c 防止多次alert提示，定时器混乱，在执行定时器前先关闭上一个定时器

下周计划

下周开启新的学习计划，依旧跟着小组走，继续开始练习算法题目，马上蓝桥杯了，还是要努力一下，不知道是不是300块钱买了顿早午餐；还是空余时间准备一下，当然以小组前端计划为先，最近课程较多，纪检部工作较多，要合理分配一下时间，不能太过盲目；下周宿舍文化节争取领奖品回来

日常

春天真的到了