Skip to content

Commit e475760

Browse files
injetleeinjetlee
committed
task19ing
1 parent 9a4f02c commit e475760

File tree

3 files changed

+146
-21
lines changed

3 files changed

+146
-21
lines changed

‎task18/scripts/task18_second.js

+21-21
Original file line numberDiff line numberDiff line change
@@ -2,21 +2,31 @@ var res = {
22
"arr":[],
33
"left-in":function(){
44
var value = document.getElementById("input").value;
5-
res.arr.unshift(value);
6-
render();
5+
pattern = /^[0-9]+$/;
6+
if(pattern.test(value)){
7+
res.arr.unshift(value);
8+
render();
9+
}else{
10+
alert("请输入数字");
11+
}
712
},
813
"right-in":function(){
914
var value = document.getElementById("input").value;
10-
res.arr.push(value);
11-
render()
15+
pattern = /^[0-9]+$/
16+
if(pattern.test(value)){
17+
res.arr.push(value);
18+
render();
19+
}else{
20+
alert("请输入数字");
21+
}
1222
},
1323
"left-out":function(){
14-
res.arr.shift()
15-
render()
24+
alert(res.arr.shift());
25+
render();
1626
},
1727
"right-out":function(){
18-
res.arr.pop()
19-
render()
28+
alert(res.arr.pop());
29+
render();
2030
}
2131

2232
}
@@ -26,16 +36,7 @@ for(var i=0;i<getButton.length;i++){
2636
console.log(res['abc'])
2737
getButton[i].onclick = res[getButton[i].id]
2838
}
29-
// var getDisplay = document.getElementById("display-area");
30-
// var getDiv = getDisplay.getElementsByTagName("div");
31-
// for(var i=0;i<getDiv.length;i++){
32-
// index = i;
3339

34-
// getDiv[i].onclick = function(){
35-
// alert('click')
36-
// res.arr.splice(index,1)
37-
// }
38-
// }
3940
function render(){
4041
var str=""
4142
var getDisplay = document.getElementById("display-area");
@@ -47,10 +48,9 @@ function render(){
4748
var getDiv = getDisplay.getElementsByTagName("div");
4849
for(var i=0;i<getDiv.length;i++){
4950
getDiv[i].onclick = function(){
50-
console.log(getDiv.indexOf(getDiv[i]))
51-
console.log(i)
52-
res.arr.splice(i,1)
53-
render()
51+
alert(this.innerHTML)
52+
getDisplay.removeChild(this)
53+
5454
}
5555
}
5656
}

‎task19/scripts/task19.js

+84
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,84 @@
1+
var res = {
2+
"arr":[],
3+
"left-in":function(){
4+
var value = document.getElementById("input").value;
5+
pattern = /^[0-9]+$/;
6+
if(pattern.test(value)){
7+
res.arr.unshift(value);
8+
render();
9+
}else{
10+
alert("请输入数字");
11+
}
12+
},
13+
"right-in":function(){
14+
var value = document.getElementById("input").value;
15+
pattern = /^[0-9]+$/
16+
if(pattern.test(value)){
17+
res.arr.push(value);
18+
render();
19+
}else{
20+
alert("请输入数字");
21+
}
22+
},
23+
"left-out":function(){
24+
alert(res.arr.shift());
25+
render();
26+
},
27+
"right-out":function(){
28+
alert(res.arr.pop());
29+
render();
30+
},
31+
"random":function(){
32+
res.arr = []
33+
for(var i=0;i<50;i++){
34+
var value = Math.floor(Math.random()*100)
35+
console.log(value)
36+
res.arr.push(value)
37+
render()
38+
}
39+
},
40+
"rank":function(){
41+
valueList = res.arr;
42+
console.log('cccc'+valueList)
43+
count = 1;
44+
while (count<50){
45+
for(var i=0;i<res.arr.length;i++){
46+
if(valueList[i]>valueList[i+1]){
47+
temp = valueList[i];
48+
valueList[i] = valueList[i+1];
49+
valueList[i+1] = temp;
50+
}
51+
}
52+
count += 1 ;
53+
render()
54+
}
55+
}
56+
}
57+
58+
var getButton = document.getElementsByTagName("button");
59+
for(var i=0;i<getButton.length;i++){
60+
getButton[i].onclick = res[getButton[i].id]
61+
}
62+
63+
function render(){
64+
console.log('bbv')
65+
var str=""
66+
var getDisplay = document.getElementById("display-area");
67+
if(res.arr.length>60){
68+
alert("当前已经有"+ res.arr.length + "个元素")
69+
}
70+
for(var i=0;i<res.arr.length;i++){
71+
str += "<div>" + res.arr[i] + "</div>"
72+
}
73+
getDisplay.innerHTML = str;
74+
var getDisplay = document.getElementById("display-area");
75+
var getDiv = getDisplay.getElementsByTagName("div");
76+
for(var i=0;i<getDiv.length;i++){
77+
getDiv[i].style.height= parseInt(getDiv[i].innerHTML)*5 +'px'
78+
getDiv[i].onclick = function(){
79+
alert(this.innerHTML)
80+
getDisplay.removeChild(this)
81+
82+
}
83+
}
84+
}

‎task19/task19.html

+41
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>Document</title>
6+
<style>
7+
#display-area{
8+
display: flex;
9+
align-items:flex-end;
10+
11+
}
12+
#display-area>div{
13+
flex:none;
14+
background: red;
15+
margin-left:5px;
16+
height:50px;
17+
width:18px;
18+
border:2px solid #000;
19+
padding-top:15px;
20+
padding-left:10px;
21+
font-size:15px;
22+
color:#fff;
23+
}
24+
</style>
25+
</head>
26+
<body>
27+
<div>
28+
<input id="input" type="text">
29+
<button id="left-in">左侧入</button>
30+
<button id="right-in">右侧入</button>
31+
<button id="left-out">左侧出</button>
32+
<button id="right-out">右侧出</button>
33+
<button id="random">随机50个数</button>
34+
<button id="rank">排序</button>
35+
</div>
36+
<div id="display-area">
37+
38+
</div>
39+
<script src="scripts/task19.js"></script>
40+
</body>
41+
</html>

0 commit comments

Comments
 (0)