-
Notifications
You must be signed in to change notification settings - Fork 2
/
20.html
113 lines (113 loc) · 3.61 KB
/
20.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>task 20</title>
<style>
#box>span{
display: inline-block;
width: 80px;
height: 80px;
text-align: center;
line-height: 80px;
background-color: red;
color: white;
margin-right: 20px;
margin-bottom: 20px;
border-radius: 5px;
}
</style>
</head>
<body>
<form>
<textarea type="text" id="data" cols="30" rows="4" placeholder="允许一次批量输入多个内容，格式可以为数字、中文、英文等，可以通过用回车，逗号（全角半角均可），顿号，空格（全角半角、Tab等均可）等符号作为不同内容的间隔"></textarea>
<input type="button" value="左侧入" id="btn1"/>
<input type="button" value="右侧入" id="btn2"/>
<input type="button" value="左侧出" id="btn3"/>
<input type="button" value="右侧出" id="btn4"/>
<input type="text" id="findData"/>
<input type="button" value="查询" id="btn5"/>
</form>
<div id="tip"></div>
<div id="box"></div>
<script>
var number = document.getElementById('data'),
box = document.getElementById('box'),
findData = document.getElementById('findData'),
btn1 = document.getElementById('btn1'),
btn2 = document.getElementById('btn2'),
btn3 = document.getElementById('btn3'),
btn4 = document.getElementById('btn4'),
btn5 = document.getElementById('btn5');
//获取数据
function getData(){
var data = number.value.trim();
var len = tip.children.length;
if(data === ""){
alert("输入无效，请重新输入！");
number.focus();
}else{
return data;
}
}
//创建新的数字块节点
function createBox(data){
var newNode = document.createElement('span');
newNode.innerHTML = data;
return newNode;
}
//左侧入
btn1.onclick = function(){
var data = getData();
if(data !== undefined){
data = data.split(/[\n\r\t\s,，、;；]+/g);
for(var i = 0; i < data.length; i++){
var newNode = createBox(data[i]);
box.insertBefore(newNode, box.firstChild);
}
number.value = '';
number.focus();
}
};
//右侧入
btn2.onclick = function(){
var data = getData();
if(data !== undefined){
data = data.split(/[\n\r\t\s,，、;；]+/g);
for(var i = 0; i < data.length; i++){
var newNode = createBox(data[i]);
box.appendChild(newNode);
}
number.value = '';
number.focus();
}
};
//左侧出
btn3.onclick = function(){
alert(box.firstChild.innerHTML + '从左侧出');
box.removeChild(box.firstChild);
tip.removeChild(tip.firstChild);
number.focus();
};
btn4.onclick = function(){
alert(box.lastChild.innerHTML + '从右侧出');
box.removeChild(box.lastChild);
tip.removeChild(tip.lastChild);
number.focus();
};
btn5.onclick = function(){
var len = box.children.length;
data = findData.value.trim();
for(var i = 0; i < len; i++){
var item = box.childNodes.item(i);
item.style.backgroundColor="red";
if(item.innerHTML.indexOf(data) >= 0){
item.style.backgroundColor="blue";
};
}
findData.value = '';
findData.focus();
};
</script>
</body>
</html>