可能写的一些界面，效果什么的都很low,但是鉴于自己一直在学前端的东西，脑筋里记不住那么多东西，也不习惯去翻看代码，就当时做做笔记，有时间就拿过来看一下，有补充的就补充，没有补充的，就继续强化自己
这次的课程就是做一个发帖子的效果
界面图.png
如图，就是能发帖子，能删帖子，然后最新的帖子都在前面这三点要求，代码不多，思维记住的就是:类似栈一样的"后进先出",还有append和insert的用法，children获取子控件（网页端应该叫“标签”，术语上望不要太较真）,xxx.parentNode，指的是某个控件的父节点，好的上代码
<!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;
/*设置高度自动伸缩*/
height: auto;
border:1px solid #333;
padding:30px 0;
}
textarea{
width: 450px;
/*不要让textarea被用户随意拖动右下角*/
resize: none;
}
/*设计显示发布的表格*/
.box li{
width: 450px;
line-height:30px;
border-bottom:1px dashed #ccc;
margin-left:80px;
}
/*设置盒子里的li 的a的样式*/
.box li a{
float: right;
}
</style>
<script>
window.onload = function () {
//获取对象 => 再次操作对象
var btn = document.getElementsByTagName('button')[0];
var txt = document.getElementsByTagName('textarea')[0];
//预先创建ul,在点击事件创建不太好,因为只需要创建一次
var ul = document.createElement('ul');
//根据按钮的父节点(也就是box类名的div盒子),来添加ul控件
btn.parentNode.appendChild(ul);
btn.onclick = function () {
if(txt.value == ""){//如果输入框里没有任何内容就提醒不能为空直接返回
alert("输入不能为空");
//终止函数执行
return false;
}
//创建li
var chatli = document.createElement("li");
//设置li的内容, 输入框的内容 + 一个a标签,直接""内部写,只要格式正确即可
chatli.innerHTML = txt.value + "<a href='javascript:;'>删除</a>";
//清空表单
txt.value = "";
//所以1.获取ul里的子控件(所有的li),然后判断,如果大于1个,那就是已经放入第二个聊天控件了
var lis = ul.children;
if (lis.length == 0){//表示从来没发过帖子
//向后添加控件
ul.appendChild(chatli);
}else{//表示帖子数超过一个了,所以就根据思路即可
//把控件放在数组的前面,这是个很巧妙的思路,当第二条消息进来的时候,既然选择了
//insert,也就是放在lis【0】前面,那么此时的chatli就是第0个,到第三条消息进来
//的时候,当时进入的chatli就成了第[0]个,很好的思路
ul.insertBefore(chatli,lis[0]);
}
//删除按钮设置 -- 获取所有的a标签
var as = document.getElementsByTagName('a');
for(var i=0;i<as.length;i++){
as[i].onclick = function () {
//点击之后删除,删除按钮指定的li -- 也就是删除指定a标签的父控件
//父控件也就是li
ul.removeChild(this.parentNode);
}
}
}
}
</script>
</head>
<body>
<div class="box">
微博发布:<textarea name="" id="" cols="30" rows="10"></textarea> <button>发布</button>
</div>
</body>
</html>
网友评论