Article directory
The solution to the failure of newline strings such as '\n' and '<br/>' passed from the front end through the back end
-
Add <pre></pre> to the outside of the content to be filled in (adding this tag will have an effect, but the internal text on the pre book will not wrap automatically, so you need to add css to the pre tag)
-
white-space: pre-wrap; word-wrap: break-word;
Different requirements for form validation
Note: The oninput event is bound and removed in real time.
Only numbers can be entered
// 清除"数字"以外的字符
this.codeInput_getPassword.value = this.codeInput_getPassword.value.replace(/[^\d]/g, "");
Remove all spaces from the form
//去除验证码中的所有空格
this.codeInput_getPassword.value = this.codeInput_getPassword.value.replace(/\s+/g, "")
Remove all Chinese characters
// 清除中文字符
this.emailInput_getPassword.value = this.emailInput_getPassword.value.replace(/[\u4e00-\u9fa5]/ig, "");
Limitation of input digits (only four digits can be entered)
var str_code = codeInput_getPassword.value;
while (str_code.length >4) {
str_code = str_code.substring(0, 4)
this.codeInput_getPassword.value = str_code
}
Tab
When adding, deleting, modifying and checking items before, the menu directory needs to use tabs. At that time, according to the most stupid method, the amount of code was large and there were many repetitions. It looks like the following after writing it out, canceling one by one, it seems very mentally handicapped. At this time, it is much better to use the tab to cycle through the cancellation, and the corresponding click trigger event is much better.
Initial code:
function change_one() {
one_flower.style.backgroundColor = "#edced7"
one_flower.style.color = "rgb(255, 0, 119)"
one_flower.style.border = " 1px solid rgb(255, 0, 119)"
five_flower.style.backgroundColor = "rgb(225, 207, 211)"
five_flower.style.color = "#89676b"
five_flower.style.border = "none"
twenty_flower.style.backgroundColor = "rgb(225, 207, 211)"
twenty_flower.style.color = "#89676b"
twenty_flower.style.border = "none"
fifty_flower.style.backgroundColor = "rgb(225, 207, 211)"
fifty_flower.style.color = "#89676b"
fifty_flower.style.border = "none"
my_flower.style.backgroundColor = "rgb(225, 207, 211)"
my_flower.style.color = "#89676b"
my_flower.style.border = "none"
}
function change_five() {
five_flower.style.backgroundColor = "#edced7"
five_flower.style.color = "rgb(255, 0, 119)"
five_flower.style.border = " 1px solid rgb(255, 0, 119)"
one_flower.style.backgroundColor = "rgb(225, 207, 211)"
one_flower.style.color = "#89676b"
one_flower.style.border = "none"
twenty_flower.style.backgroundColor = "rgb(225, 207, 211)"
twenty_flower.style.color = "#89676b"
twenty_flower.style.border = "none"
fifty_flower.style.backgroundColor = "rgb(225, 207, 211)"
fifty_flower.style.color = "#89676b"
fifty_flower.style.border = "none"
my_flower.style.backgroundColor = "rgb(225, 207, 211)"
my_flower.style.color = "#89676b"
my_flower.style.border = "none"
}
function change_twenty() {
twenty_flower.style.backgroundColor = "#edced7"
twenty_flower.style.color = "rgb(255, 0, 119)"
twenty_flower.style.border = " 1px solid rgb(255, 0, 119)"
one_flower.style.backgroundColor = "rgb(225, 207, 211)"
one_flower.style.color = "#89676b"
one_flower.style.border = "none"
five_flower.style.backgroundColor = "rgb(225, 207, 211)"
five_flower.style.color = "#89676b"
five_flower.style.border = "none"
fifty_flower.style.backgroundColor = "rgb(225, 207, 211)"
fifty_flower.style.color = "#89676b"
fifty_flower.style.border = "none"
my_flower.style.backgroundColor = "rgb(225, 207, 211)"
my_flower.style.color = "#89676b"
my_flower.style.border = "none"
}
function change_fifty() {
fifty_flower.style.backgroundColor = "#edced7"
fifty_flower.style.color = "rgb(255, 0, 119)"
fifty_flower.style.border = " 1px solid rgb(255, 0, 119)"
one_flower.style.backgroundColor = "rgb(225, 207, 211)"
one_flower.style.color = "#89676b"
one_flower.style.border = "none"
five_flower.style.backgroundColor = "rgb(225, 207, 211)"
five_flower.style.color = "#89676b"
five_flower.style.border = "none"
twenty_flower.style.backgroundColor = "rgb(225, 207, 211)"
twenty_flower.style.color = "#89676b"
twenty_flower.style.border = "none"
my_flower.style.backgroundColor = "rgb(225, 207, 211)"
my_flower.style.color = "#89676b"
my_flower.style.border = "none"
}
function change_my() {
my_flower.style.backgroundColor = "#edced7"
my_flower.style.color = "rgb(255, 0, 119)"
my_flower.style.border = " 1px solid rgb(255, 0, 119)"
one_flower.style.backgroundColor = "rgb(225, 207, 211)"
one_flower.style.color = "#89676b"
one_flower.style.border = "none"
five_flower.style.backgroundColor = "rgb(225, 207, 211)"
five_flower.style.color = "#89676b"
five_flower.style.border = "none"
twenty_flower.style.backgroundColor = "rgb(225, 207, 211)"
twenty_flower.style.color = "#89676b"
twenty_flower.style.border = "none"
fifty_flower.style.backgroundColor = "rgb(225, 207, 211)"
fifty_flower.style.color = "#89676b"
fifty_flower.style.border = "none"
}
after modification:
//循环获取每个flowerSon标签
var flowerSon = document.querySelectorAll(".flowerSon")//加上相同的类名
//循环获取四个点击事件
for (let i = 0; i < flowerSon.length; i++) {
flowerSon[i].onclick = function () {
//先循环取消所有显示
for (let j = 0; j < flowerSon.length; j++) {
flowerSon[j].style.backgroundColor = "rgb(225, 207, 211)"
flowerSon[j].style.color = "#89676b"
flowerSon[j].style.border = "none"
}
//每次点击的时候显示
flowerSon[i].style.backgroundColor = "#edced7"
flowerSon[i].style.color = "rgb(255, 0, 119)"
flowerSon[i].style.border = " 1px solid rgb(255, 0, 119)"
}
}
Visible to the naked eye, there is a lot less repetitive content. The essence is to loop through
case study
There are quite a lot of tabs used in this project.
