MyJavaScriptCode/comment.html at master · YuHe0108/MyJavaScriptCode · GitHub

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
<!DOCTYPE html>
<html>
<head>
<metacharset="utf-8">
<metahttp-equiv="X-UA-Compatible" content="IE=edge">
<title>发表评论</title>
<linkrel="stylesheet" href="">
<style>
* {
margin:0;
padding:0;
list-style: none;
 }
 .c_father {
width:600px;
border:1px solid #ccc;
margin:100px auto;
text-align: center;
padding:10px;
 }
 .c_father .c_textarea {
width:90%;
display: block;
margin:0 auto;
margin-bottom:20px;
margin-top:20px;
font-size:20px;
 }
 .c_fatherulli {
margin-top:10px;
border-bottom:1px dashed #ccc;
line-height:38px;
text-align: left;
padding:4px;
 }
a {
text-decoration: none;
float: right;
color: black;
 }
button {
margin-left:-471px;
width:74px;
height:38px;
font-size:20px;
color: white;
background: green;
border-radius:50px; //设置为圆角
 }
label {
font-size:25px;
 }
</style>
<script>
window.onload=function(){
varoBut=document.getElementsByTagName("button")[0];
varoTextArea=document.getElementsByTagName("textarea")[0];
varoUl=document.getElementsByTagName("ul")[0];
oBut.onclick=function(){
varStr=oTextArea.value;//获取在文本框中输入的内容
varoNewLi=document.createElement("li");
varoA=document.createElement("a");
varaLis=oUl.getElementsByTagName("li");//如果aLis的长度为1，则表明这是第一个添加的
oNewLi.innerHTML=Str;
if(Str===''){
alert("您还没有输入内容哟!");
}else{
oA.innerHTML="删除";
oA.setAttribute("href","#");
oNewLi.appendChild(oA);

console.log(aLis.length);
if(aLis.length===0){
oUl.appendChild(oNewLi);
}else{
oUl.insertBefore(oNewLi,aLis[0]);
}

varaAtags=document.getElementsByTagName("a");

for(vari=0;i<aAtags.length;i++){
aAtags[i].onclick=function(){
varoParentNode=this.parentNode;
oParentNode.remove();
};
}
}
};
};
</script>
</head>
<body>
<divid="i_father" class="c_father">
<label>请在此处发表言论</label>
<textareaclass="c_textarea" id="i_textarea" cols="30" rows="10"></textarea>
<button>发表</button>
<ul>
<!-- <li>中国你好<a href="#" id="i_a">删除</a></li> -->
</ul>
</div>
</body>
</html>