Skip to content

Commit 83c1d58

Browse files
committed
task21
1 parent 11af022 commit 83c1d58

File tree

3 files changed

+118
-2
lines changed

3 files changed

+118
-2
lines changed

task20/scripts/task20.js

-2
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,4 @@ function render(val){
3131
}
3232
}
3333
getDisplay.innerHTML = str;
34-
35-
3634
}

task21/scripts/task21.js

+55
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
var res = {
2+
"arr":[],
3+
"tagarr":[],
4+
"insert":function(){
5+
var value = document.getElementById("input").value.trim();
6+
res.arr = value.split(/[^0-9A-Za-z_u4E00-\u9FA5]+/);
7+
if(res.arr.length>10){
8+
var length = res.arr.length;
9+
for(var i=0;i<length-10;i++){
10+
console.log(res.arr.shift())
11+
}
12+
} var getDisplay = document.getElementById("display-area");
13+
render(getDisplay,res.arr)
14+
},
15+
"tag-input":function(){
16+
var value = this.value;
17+
var pattern = /[^'0-9A-Za-z_u4E00-\u9FA5]+/;
18+
if (pattern.test(value)){
19+
var newPattern = /([0-9A-Za-z_u4E00-\u9FA5]+)/
20+
var testData = newPattern.exec(value)
21+
if(testData){
22+
res.tagarr.push(value)
23+
console.log(testData[0])
24+
25+
}
26+
this.value=null
27+
var getTag = document.getElementById("display-tag")
28+
render(getTag,res.tagarr)
29+
//console.log('haha')
30+
}
31+
}
32+
33+
}
34+
var getInput = document.getElementById("tag-input");
35+
getInput.oninput = res[getInput.id]
36+
var getButton = document.getElementsByTagName("button");
37+
for(var i=0;i<getButton.length;i++){
38+
getButton[i].onclick = res[getButton[i].id]
39+
}
40+
41+
function render(id,val){
42+
var str=""
43+
44+
45+
for(var i=0;i<val.length;i++){
46+
str += "<div><span class='delete'>"+"删除"+"</span>" + val[i] + "</div>"
47+
}
48+
id.innerHTML = str;
49+
var getDiv = id.getElementsByTagName("div");
50+
for(var i=0;i<getDiv.length;i++){
51+
getDiv[i].onclick = function(){
52+
id.removeChild(this)
53+
}
54+
}
55+
}

task21/task21.html

+63
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>Document</title>
6+
<style>
7+
textarea{
8+
resize:none;
9+
}
10+
#display-area,#display-tag{
11+
display: flex;
12+
align-items:flex-end;
13+
14+
}
15+
#display-area>div,#display-tag>div{
16+
flex:none;
17+
background: #26D8BAFF;
18+
margin-left:5px;
19+
height:50px;
20+
border:2px solid #000;
21+
padding-top:2px;
22+
font-size:15px;
23+
color:#fff;
24+
}
25+
#display-area>div>.delete,#display-tag>div>.delete{
26+
display:none;
27+
}
28+
#display-area>div:hover,#display-tag>div:hover{
29+
background-color:#E67864FF;
30+
color:#000;
31+
}
32+
#display-area>div:hover>.delete,#display-tag>div:hover>.delete{
33+
display: inline;
34+
}
35+
#tag{
36+
display:block;
37+
}
38+
#input{
39+
display: block;
40+
margin-top:50px;
41+
}
42+
</style>
43+
</head>
44+
<body>
45+
<div>
46+
<label id="tag">Tag
47+
<input type="text" id="tag-input"></label>
48+
<label>
49+
<div id="display-tag">
50+
51+
</div>
52+
<textarea name="" cols="30" id="input" rows="10"></textarea>
53+
<button id="insert">确认</button>
54+
</label>
55+
</div>
56+
57+
</div>
58+
<div id="display-area">
59+
60+
</div>
61+
<script src="scripts/task21.js"></script>
62+
</body>
63+
</html>

0 commit comments

Comments
 (0)