用原生JavaScript代码编写类似微博发布的。
程序员文章站
2024-03-05 20:51:19
...
今天简单的用JS代码来创建一个类似微博发布的小项目。
先把整个代码拷过来：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
.box {
margin: 100px auto;
width: 600px;
border: 1px solid #333;
padding: 30px 0;
overflow: hidden;
}
textarea {
width: 450px;
line-height: 30px;
margin-left: 10px;
resize: none;
}
ul {
list-style: none;
width: 80%;
margin: 0 auto;
}
ul > li {
padding: 6px 20px;
line-height: 20px;
border-bottom: 1px dashed #ccc;
}
ul > li > a {
float: right;
}
</style>
</head>
<body>
<div class="box">
微博发布:
<textarea cols="30" rows="10"></textarea>
<button id="btn">发布</button>
<!-- <ul>
<li>hhhhh</li>
</ul> -->
</div>
<script type="text/javascript">
window.onload = function() {
// 1 获取对象
var btn = document.getElementById("btn");
var tt = document.getElementsByTagName("textarea")[0];
// 创建父亲
var ul = document.createElement("ul");
// 给发布按钮注册单击事件
btn.onclick = function() {
if(tt.value == "") {
alert("输入的内容不能为空");
return;// 提前函数调用结束
}
// alert(tt.value); 获取文本域的值
var tt_value = tt.value;
tt.value = "";
// 创建儿子
var liEle = document.createElement("li");
liEle.innerHTML = tt_value+"<a href='#'>删除</a>";
//
if(ul.children.length ==0) {
ul.appendChild(liEle);
} else {
ul.insertBefore(liEle, ul.children[0]);
}
// 整个ul追加到div内部去
this.parentNode.appendChild(ul);
var as = document.getElementsByTagName("a");
for(var i=0; i<as.length; i++) {
as[i].onclick = function() {
ul.removeChild(this.parentNode);
return false;
}
}
}
}
</script>
</body>
</html>创建一个这样的需要发布内容，用到HTML5的
<textarea cols="30"rows="10"></textarea>
标签，行和列可以自己定义。 这些代码用到大多是dom的操作，比如
document.createElement();
appendChild();
insertBefore();
removeChild();
如果对dom操作熟悉的话并不难，赶紧去练练手吧。