常见函数
1.alert和confirm的封装
注意
此处confirm和alert既可以写在js中动态添加,也可以直接写在html标签里
HTML代码
<!-- confirm 弹窗 -->
<div class="confirm-mask">
<div class="confirm-window">
<div class="confirm-top">
<span>系统提示</span>
<div class="confirm-cancel">X</div>
</div>
<div class="confirm-content">
<i class="iconfont"></i>
<span>提示消息</span>
</div>
<div class="confirm-button">
<button class="c-sure">确定</button>
<button class="c-cancel">取消</button>
</div>
</div>
</div>
<!-- alert 弹窗 -->
<div class="alert"><i class="iconfont"></i><span>提示消息</span></div>
css代码
.confirm {
&-mask {
display: none;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.3);
position: fixed;
z-index: 2;
cursor: pointer;
}
&-window {
position: relative;
border-radius: 8px;
background-color: white;
width: 560px;
height: 180px;
}
&-top {
display: flex;
justify-content: space-between;
box-sizing: border-box;
padding-top: 5px;
padding-right: 5px;
width: 100%;
height: 50px;
span {
display: inline-block;
margin-top: 10px;
margin-left: 30px;
font-size: 25px;
}
}
&-cancel {
box-sizing: border-box;
display: flex;
justify-content: center;
align-items: center;
font-size: 20px;
width: 20px;
height: 20px;
font-size: 18px;
font-weight: lighter;
border-radius: 50%;
color: #cacdd2;
border: 1px solid #d7dbe3;
background-color: #ffffff;
text-align: center;
&:hover {
color: rgb(248, 248, 248);
background-color: #dfdfdf;
}
}
&-content {
box-sizing: border-box;
margin: 20px 50px;
font-size: 18px;
.iconfont {
font-size: 28px;
color: rgb(255, 204, 0);
}
}
&-button {
width: 190px;
height: 50px;
right: 0%;
position: absolute;
bottom: 0%;
button {
width: 80px;
height: 40px;
font-size: 18px;
border-style: none;
border-radius: 5px;
}
.c-sure {
color: white;
background-color: #53a9ff;
&:hover {
background-color: #3491ed;
}
}
.c-cancel {
color: #b7b6b6;
background-color: #f3f4f4;
&:hover {
color: #7f8080;
}
}
}
}
.alert {
transition: all 0.5s;
font-size: 13px;
border-radius: 6px;
position: fixed;
z-index: 5;
left: 50%;
top: 10%;
box-sizing: border-box;
width: 327px;
height: 40px;
transform: translate(-50%, 0);
padding: 10px 10px;
opacity: 0;
span {
margin-left: 5px;
}
}
.success {
background-color: #def5de;
color: #0bb767;
}
.err {
background-color: #ffeded;
color: #e52121;
}
.show {
opacity: 1;
}
js代码
// 重写confirm
function confirm(msg) {
let sure = document.querySelector(".c-sure");
let cancel = document.querySelector(".c-cancel");
let conCancel = document.querySelector(".confirm-cancel");
let mask = document.querySelector(".confirm-mask");
let content = document.querySelector(".confirm-content");
let span = content.querySelector("span");
span.innerHTML = msg;
mask.style.display = "flex";
let cPromise = new Promise(function (resolve, reject) {
sure.onclick = function () {
mask.style.display = "none";
resolve();
};
cancel.onclick = function () {
mask.style.display = "none";
reject();
};
conCancel.onclick = function () {
mask.style.display = "none";
reject();
};
});
return cPromise;
}
// 重写alert
const alert = document.querySelector(".alert");
let msgalert = alert.querySelector("span");
function alertSuccess(msg) {
alert.innerHTML = `<i class="iconfont"></i><span>${msg}</span>`;
msgalert.innerHTML = msg;
alert.classList.add("success");
alert.classList.add("show");
setTimeout(function () {
alert.classList.remove("show");
alert.classList.remove("success");
}, 2000);
}
function alertErr(msg) {
alert.innerHTML = `<i class="iconfont"></i><span>${msg}</span>`;
alert.classList.add("err");
alert.classList.add("show");
setTimeout(function () {
alert.classList.remove("show");
alert.classList.remove("err");
}, 2000);
}
2.验证码倒计时
var count = 60;
function settime(el) {
var registerE = document.querySelector(".registerE").value;
if (count == 0) {
el.removeAttribute("disabled");
el.innerHTML = "获取验证码";
registerAlertShow("发送成功", "#bfe8c0", "#0bb767");
count = 60;
//return必须添加,否则会一直循环倒计时
return;
} else {
el.setAttribute("disabled", true);
el.innerHTML = count + "s 重新发送";
count--;
}
setTimeout(function () {
settime(el);
}, 1000);
}
3.登录注册密码是否可见
这里需要用到input 框type的text属性和password属性
该代码用的iconfont图库,也可以改为图片的形式展现
let eye = document.getElementById("eye");
let flag = 0;
eye.onclick = function () {
let input = document.querySelector(".input.password");
if (flag == 0) {
input.type = "text";
flag = 1;
eye.innerHTML = "";
} else {
input.type = "password";
eye.innerHTML = "";
flag = 0;
}
};
4.全选反选
// 如果多选框全选中,则全选框应该选中,如果多选框没都选中,则全选框不选中
// 为多选框分别绑定单击响应函数
function isCheck() {
for (let i = 0; i < items.length; i++) {
items[i].onclick = function () {
// 将全选框设置为选中状态
checkAll.checked = true;
// 点击一个多选框后还需要判断所有多选框的状态
for (let j = 0; j < items.length; j++) {
if (!items[j].checked) {
//一旦进入判断语句,则证明有未选中的多选框
checkAll.checked = false;
}
}
};
}
}
5.翻页
该功能利用了传参,和默认传参,
需要注意的是,由于该函数既可以在查询功能时使用也可以在渲染页面时使用,因此keywords 是否为空是关键
因此在查询按钮上,我们可以设置一个click变量,初始值是false,点击时为true,刷新后为false等等(视具体情况而定)
var last = document.querySelector(".last");
var next = document.querySelector(".next");
last.addEventListener("click", function () {
var search = document.getElementsByClassName("search")[0];
var inputValue = search.getElementsByTagName("input")[0];
var keywords = inputValue.value;
if (click == false) {
keywords = "";
}
offset--;
getCourse(offset, keywords);//渲染
if (offset <= 1) {
last.setAttribute("disabled", true);
offset = 1;
}
if (offset < allPages && offset >= 1) {
next.removeAttribute("disabled");
}
});
next.addEventListener("click", function () {
var search = document.getElementsByClassName("search")[0];
var inputValue = search.getElementsByTagName("input")[0];
var keywords = inputValue.value;
if (click == false) {
keywords = "";
}
offset++;
console.log(keywords);
if (offset >= 1) {
last.removeAttribute("disabled");
}
if (offset >= allPages) {
offset = allPages;
next.setAttribute("disabled", true);
}
getCourse(offset, keywords);
});
细节问题
1.正则表达式
注意
正则可以用来判断邮箱格式,后台管理系统中通常需要去空处理,标签过滤,数据判正等
//邮箱正则
let reg =
/^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/;
function setText(val) {
//将标签替换成普通样式,不会将字放大
let msg = val.replace(/</g, "<").replace(/>/g, ">");
//去掉所有的空格(中文空格、英文空格都会被替换)
msg = msg.replace(/\s/g, "");
return msg;
}
2.登录拦截(极速版)
//判断,如果获取不到token,则返回登录面
if (localStorage.getItem("token") == null) {
window.location.replace("../login.html");
}
//当点击退出登录按钮时,将本地token移除
//保证退出登录时,直接通过网址进入后台时没有token,从而跳转到登录页面
var backBtn = document.querySelector(".backBtn");
var backBtn = document.querySelector(".backBtn");
backBtn.onclick = function () {
confirm("确定退出登录吗?")
.then(function () {
localStorage.removeItem("token");
window.location.replace("login.html");
})
.catch(function () {});
};
3.换行
word-break: break-all;//需要指定宽度才能达到换行效果
谈到换行
那么就不得不说说它和word-break:break-word的区别了
一般这两个属性都会加上 height-auto;white-space:normal;
共同点:word-break:break-all和word-wrap:break-word都是能使其容器如DIV的内容自动换行。
不同点:
1.word-break:break-all 例如div宽200px,它的内容就会到200px自动换行,如果该行末端有个英文单词很长(congratulation等),它会把单词截断,变成该行末端为conra(congratulation的前端部分),下一行为tulation(conguatulation)的后端部分了。
2.word-wrap:break-word 例子与上面一样,但区别就是它会把congratulation整个单词看成一个整体,如果该行末端宽度不够显示整个单词,它会自动把整个单词放到下一行,而不会把单词截断掉的。
5.各种bug
1.假如数据为2页,当停留在第二页时,添加数据,有第三页,但下一页的按钮仍为禁点状态
2.当删除最后一页数据时,重新刷新到了第一页,但正常状态下应该返回上一页
3.查询时,当有多页数据时,无法正常翻页,翻页后会重新渲染所有数据(问题出在翻页功能的keywords上)
4.当查询的数据删除完时,应当在页面上显示暂无数据或者重新渲染所有数据后,弹出alert来警告暂无数据
…
总结
又给了一星期的时间来完善页面,这一星期给我的感觉都是在原来代码的基础上找bug,填坑,这个坑填上了可能本来没有bug的地方又有bug了,像个裁缝一样,在那缝缝补补,到最后我那可怜的页面也算是基本上完成了,虽然还是有bug…[蚌埠住了] 也许这就是因为if等语句的耦合性 [ 新学的词 ] 较强?导致牵一发动全身?
到最后看我整个的代码,感觉逻辑很乱,毕竟是在我的最初的代码上更改,然后我又花了一个晚上在小组的时间重新写了一个新的代码,逻辑性更强;但是更让我无语的是,我的最初的代码和这个新的,几乎bug是互补的,合在一块就没太过大的bug了,看来还需要点时间研究研究,争取写个没有bug的完整代码,这样以后就可以借鉴了
下周计划
不逃课…,好好听课, 学习计划好好完成