用原生JavaScript代码编写类似微博发布的。

来源：互联网发布：shell脚本编程书籍编辑：程序博客网时间：2024/05/16 15:49

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

阅读全文

0 0