没事 做的 一个小玩意 ，练练手。大神勿喷，有些 不会写的，希望大神指教。
HTML代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>留言板</title> <link rel="stylesheet" href="dist/css/note.css" /> <link rel="stylesheet" href="dist/css/bootstrap.min.css" /> </head> <body> <nav id="main"> <div id="content"> <header> <h3 class="text">留言板</h3> </header> <textarea id="liuyan"></textarea> <button class="btn btn-warning button" id="reset">重置</button> <button class="btn btn-primary button">提交</button> <h3><span class="carea">评论区</span></h3> <div id="box"> </div> </div> </nav> <script type="text/javascript" src="dist/js/note.js"></script> </body> </html>
CSS代码：
#main{
800px;
margin: 0 auto;
border-left: 1px solid #808080;
border-right: 1px solid #808080;
}
#content{
700px;
margin: 0 auto;
}
header{
text-align: center;
}
.text{
height: 30px;
line-height: 30px;
font-weight: bold;
background: linear-gradient(90deg,#f44,#ccff77)
}
textarea#liuyan{
display: block;
700px;
height:100px;
font-size: 20px;
font-family: "微软雅黑";
}
.button{
display: inline-block;
position: relative;
left:496px;
margin-top: 5px;
100px;
height: 40px;
}
.show{
display: block;
}
.hidden{
display: none;
}
.box{
margin-top: 20px;
display: block;
700px;
height:100px;
font-size: 20px;
font-family: "微软雅黑";
border-top:1px solid #e8e8e8;
border-bottom: 1px solid #e8e8e8;
position: relative;
}
.img{
30px;
height: 30px;
border-radius: 15px;
position: relative;
top:38%;
margin-right: 30px;
}
.remove{
display: inline-block;
position: absolute;
top:70px;
left:650px;
cursor: pointer;
}
.floor{
position: absolute;
top:0px;
left:5px;
color:blue;
}
.comment{
display: inline-block;
position: absolute;
top:70px;
left:600px;
cursor: pointer;
}
.textarea{
position: absolute;
300px;
height:50px;
top:48px;
left: 200px;
font-size: 14px;
}
.subcom{
position: absolute;
top:48px;
left:500px;
height: 50px;
}
.carea{
display: block;
border-radius: 2px;
background: tan;
box-shadow: 0 0 0 2px #655;
outline: 2px solid #655;
margin: 0 auto;
72px;
}
.box{
background: url(../../pngs/2.jpg) repeat;
background-attachment: fixed;
}
.acom{
display: block;
}
.comarea{
600px;
border: 2px solid #428bca;
margin-left: 100px;
}
.rem{
cursor: pointer;
}
JS代码：
window.onload = function() {
var nr = document.getElementById('content');
var obox = nr.children[4];
var otxt = nr.children[1];
var obtnR = nr.children[2];
var obtnS = nr.children[3];
var n = 0;
obtnS.onclick = function() {
n++;
var str = otxt.value;
if (str.length != 0) {
var oP = document.createElement('p'); //创建P元素
var oB = document.createElement('b'); //创建b元素
var oImg = document.createElement('img'); //创建一张图片
var oSpan = document.createElement('span'); //创建span元素
var oSpanS = document.createElement('span'); //创建span元素
var comment = document.createElement('a') //创建a元素
var oA = document.createElement('a'); //创建a元素
var aP = obox.appendChild(oP); //把 op 放进 obox 里面
var aImg = oP.appendChild(oImg); //把 img 放进 obox 里面
var aB = oP.appendChild(oB); //把 ob 放进 oP 里面
var aSpan = oP.appendChild(oSpan); //把 ospan 放进 op 里面
var aA = oSpan.appendChild(oA); //把 aA 放进 oSpan 里面
var aSpanS = oP.appendChild(oSpanS);
var acomment = oSpan.appendChild(comment); //把 comment(评论) 放进ospan 里面
aP.className = 'box';
aB.innerHTML = str;
aA.innerHTML = '删除';
aA.className = 'remove';
acomment.innerHTML = '评论';
acomment.className = 'comment';
aSpanS.className = 'floor';
aSpanS.innerHTML = n + 'L';
otxt.value = "";
aImg.className = 'img';
aImg.src = "pngs/1.jpg";
alert('留言成功！');
} else alert('内容不能为空')
aA.onclick = function() {
n--;
var nowP = this.parentNode.parentNode; // 当前p元素
obox.removeChild(nowP);
// for (i = 0;i<n;n++){
// if(obox.children[i] != nowP){
// }
// }
//未完成的 判断楼层数。
}
var reset = nr.children[2];
reset.onclick = function() {
otxt.value = "";
}
acomment.onclick = function() {
var oArea = document.createElement('textarea');
var aArea = oSpan.appendChild(oArea);
aArea.className = 'textarea';
var oBtn = document.createElement('button')
var aBtn = oSpan.appendChild(oBtn);
aBtn.innerHTML = '提交';
aBtn.className = 'subcom';
aBtn.onclick = function() {
oSpan.removeChild(this);
oSpan.removeChild(aArea);
var Sstr = oArea.value;
var pCom = document.createElement('p');
var paCom = obox.appendChild(pCom);
var oCom = document.createElement('span');
var aCom = pCom.appendChild(oCom);
var oRem = document.createElement('a');
var aRem = pCom.appendChild(oRem);
aRem.innerHTML = '删除该评论';
aRem.className = 'rem';
aCom.innerHTML = Sstr;
aCom.className = 'acom';
paCom.className = 'comarea';
aRem.onclick = function() {
pCom.removeChild(this);
pCom.removeChild(aCom);
paCom.className = '';
}
}
}
}
}
//该代码评论功能还不完善.正在改进。
效果图：
// 利用 document.createElement() 来创建元素
//再用 appendChild() 来将 某个元素 放入另一个元素中。
//用 removeChild() 来将某个元素的子元素删除
// removeChild(this.parentNode)可删除 当前元素的父元素。
以上就是分享的代码，小小的记录一下~
希望能找一个人教导一下 js 和 css 和 C++。
谢谢！
——nanxI
（注：部分代码非原创）