可能寫的一些界面礁遵，效果什么的都很low,但是鑒于自己一直在學(xué)前端的東西轻绞，腦筋里記不住那么多東西，也不習(xí)慣去翻看代碼佣耐，就當(dāng)時(shí)做做筆記政勃，有時(shí)間就拿過來看一下，有補(bǔ)充的就補(bǔ)充兼砖，沒有補(bǔ)充的奸远，就繼續(xù)強(qiáng)化自己
這次的課程就是做一個(gè)發(fā)帖子的效果
界面圖.png
如圖，就是能發(fā)帖子掖鱼，能刪帖子然走，然后最新的帖子都在前面這三點(diǎn)要求，代碼不多戏挡，思維記住的就是:類似棧一樣的"后進(jìn)先出",還有append和insert的用法芍瑞，children獲取子控件（網(wǎng)頁端應(yīng)該叫“標(biāo)簽”，術(shù)語上望不要太較真）,xxx.parentNode褐墅，指的是某個(gè)控件的父節(jié)點(diǎn)拆檬，好的上代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{margin:0;padding:0;}
ul{list-style: none;}
.box{
margin: 100px auto;
width: 600px;
/*設(shè)置高度自動(dòng)伸縮*/
height: auto;
border:1px solid #333;
padding:30px 0;
}
textarea{
width: 450px;
/*不要讓textarea被用戶隨意拖動(dòng)右下角*/
resize: none;
}
/*設(shè)計(jì)顯示發(fā)布的表格*/
.box li{
width: 450px;
line-height:30px;
border-bottom:1px dashed #ccc;
margin-left:80px;
}
/*設(shè)置盒子里的li 的a的樣式*/
.box li a{
float: right;
}
</style>
<script>
window.onload = function () {
//獲取對(duì)象 => 再次操作對(duì)象
var btn = document.getElementsByTagName('button')[0];
var txt = document.getElementsByTagName('textarea')[0];
//預(yù)先創(chuàng)建ul,在點(diǎn)擊事件創(chuàng)建不太好,因?yàn)橹恍枰獎(jiǎng)?chuàng)建一次
var ul = document.createElement('ul');
//根據(jù)按鈕的父節(jié)點(diǎn)(也就是box類名的div盒子),來添加ul控件
btn.parentNode.appendChild(ul);
btn.onclick = function () {
if(txt.value == ""){//如果輸入框里沒有任何內(nèi)容就提醒不能為空直接返回
alert("輸入不能為空");
//終止函數(shù)執(zhí)行
return false;
}
//創(chuàng)建li
var chatli = document.createElement("li");
//設(shè)置li的內(nèi)容, 輸入框的內(nèi)容 + 一個(gè)a標(biāo)簽,直接""內(nèi)部寫,只要格式正確即可
chatli.innerHTML = txt.value + "<a href='javascript:;'>刪除</a>";
//清空表單
txt.value = "";
//所以1.獲取ul里的子控件(所有的li),然后判斷,如果大于1個(gè),那就是已經(jīng)放入第二個(gè)聊天控件了
var lis = ul.children;
if (lis.length == 0){//表示從來沒發(fā)過帖子
//向后添加控件
ul.appendChild(chatli);
}else{//表示帖子數(shù)超過一個(gè)了,所以就根據(jù)思路即可
//把控件放在數(shù)組的前面,這是個(gè)很巧妙的思路,當(dāng)?shù)诙l消息進(jìn)來的時(shí)候,既然選擇了
//insert,也就是放在lis【0】前面,那么此時(shí)的chatli就是第0個(gè),到第三條消息進(jìn)來
//的時(shí)候,當(dāng)時(shí)進(jìn)入的chatli就成了第[0]個(gè),很好的思路
ul.insertBefore(chatli,lis[0]);
}
//刪除按鈕設(shè)置 -- 獲取所有的a標(biāo)簽
var as = document.getElementsByTagName('a');
for(var i=0;i<as.length;i++){
as[i].onclick = function () {
//點(diǎn)擊之后刪除,刪除按鈕指定的li -- 也就是刪除指定a標(biāo)簽的父控件
//父控件也就是li
ul.removeChild(this.parentNode);
}
}
}
}
</script>
</head>
<body>
<div class="box">
微博發(fā)布:<textarea name="" id="" cols="30" rows="10"></textarea> <button>發(fā)布</button>
</div>
</body>
</html>
