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

最新推荐文章于 2022-07-14 14:35:35 发布

Web开发_Struggle

最新推荐文章于 2022-07-14 14:35:35 发布

阅读量905

点赞数

分类专栏： web，HTML5，js 文章标签：前端 javascript 发布

本文链接：https://blog.csdn.net/Web_Struggle/article/details/78163948

版权

web，HTML5，js 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

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

Web开发_Struggle

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
用原生JavaScript代码编写类似微博发布的。

今天简单的用JS代码来创建一个类似微博发布的小项目。先把整个代码拷过来：html lang="en">head> meta charset="UTF-8"> title>Documenttitle> style type="text/css"> * { margin: 0; padding: 0; }
复制链接

扫一扫