今天简单的用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操作熟悉的话并不难,赶紧去练练手吧。