微博发布案例

 

<!DOCTYPE html>
<html>

<head>

<meta charset="UTF-8">
<title>03微博发布JS</title>
<style>
ul {
list-style-type: none;
}

* {
margin: 0;
padding: 0;
}

.box {
margin: 100px auto;
width: 600px;
height: auto;
border: 1px solid #333;
padding: 30px 0;
}

textarea {
width: 450px;
resize: none;
/*防止拖动 不调整大小*/
}

.box li {
width: 450px;
line-height: 30px;
/*行高*/
border-bottom: 1px dashed #ccc;
margin-left: 80px;
}

.box li a {
float: right;
}
</style>
<script type="text/javascript">
window.onload = function() {
//获取对象 再次操作对象
var btn = document.getElementsByTagName('button')[0];
var txt = document.getElementsByTagName("textarea")[0];
var ul = document.createElement("ul"); //创建ul
btn.parentNode.appendChild(ul); //插入到父盒子里button标签后
btn.onclick = function() {
if(txt.value == "") {
alert("输入不能为空");
return false; //终止函数执行
}
var newli = document.createElement("li"); //创建li
newli.innerHTML = txt.value + "<a href ='javascript:;'>删除</a>"; //把表单值给新的li
ul.appendChild(newli); //把li插入到ul里
txt.value = ""; //清空表单
var lis = ul.children; //获得有多少个li
//if else 这个片段 让我们新发布的内容 最上显示
if(lis.length == 0) { //第一次创建
ul.appendChild(nweli); //ul的后面追加
} else {
ul.insertBefore(newli, lis[0]); //每次生成的新li放到第一个li的前面
}
var as = document.getElementsByTagName("a"); //获得所有的a
for(var i = 0; i < as.length; i++) {
as[i].onclick = function() {
ul.removeChild(this.parentNode); //ul他的爸爸
//a的爸爸就是li
}
}
}
}
</script>
</head>

<body>
<div class="box">
微博发布： <textarea name="" id="" cols="30" rows="10"></textarea>
<button>发布</button>
</div>
</body>

</html>

posted @ 2017-05-27 22:04  青涩的柠檬酸  阅读(69)  评论(0)    收藏  举报