简单的微博发布程序

2019-08-04 19:39:44 阅读：203 来源： 互联网

标签：box margin 程序 label 微博简单 var document box1

能实现简单的上传和删除，以及显示发布的时间。
主要是先创建个文本节点，然后将所要发布的信息追加在文本节点上。

代码实现

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			.box-frits{
			
				width:800px;		
				margin: 0 auto;
		
			}
			.box {
				margin: 0 auto;
				width: 800px;
				height: 400px;
				resize: none; /*进制文本域伸缩*/
			}
			#btn{
				border: 0;
				width: 100px;
				height: 50px;
				background: #F08080;
				color: #fff;
				text-align: center;
				line-height: 50px;
				border-radius: 10px;
				margin-top: 20px;
				font-size: 16px;
				float:right ;
			}
		.box1{
			float: left;
			line-height: 34px;
			width: 100%;
			height: 20px;
			
		}
		.box1 span{
			margin-left:10px;
			margin-right:10px;
			
		}
		.box1 label:hover{
			color: red;
		}
		.box1 p{
			border-bottom: 1px solid #dbdbdb;
		}
		</style>
	</head>
	
	<!--<span id="label"></span>
 <span id="span"></span>-->
	<body>
		<div class="box-frits">
			<textarea class="box"></textarea>
		  <input type="button" name="" id="btn" value="上传" />
		  <div class="box1"></div>
		</div>
		
	
		<script type="text/javascript">
			var btn = document.getElementById("btn");
			btn.onclick = function() {
				var d=new Date();
				var a=d.getMonth()+1;
				var b=d.getFullYear()+"/"+a+"/"+d.getDate();
				console.log(b);
//				获取节点信息
            
				var box = document.getElementsByClassName("box")[0].value;
				var box1 = document.getElementsByClassName("box1")[0];
//				创建节点
				var t = document.createElement("p");
//			创建一个文本节点:	
				var con = document.createTextNode(box);
			    	var span = document.createElement("span");
				var label = document.createElement("label");
				 
				span.innerText =b;
				label.innerText ="删除";
//				追加

				t.appendChild(con);
				t.appendChild(span);
				t.appendChild(label);
//				console.log(con);
				if(con.length == 0) {
					alert("输入框不能为空,请 重新输入");
				} else {
					box1.appendChild(t);
				}

				//		  		t.innerHTML=box ;

				label.onclick = function() {
					var r = confirm("是否删除");
					if(r == true) {
						this.parentNode.parentNode.removeChild(this.parentNode);
						alert("删除成功");
					} else {
						alert("删除失败");
					}
					

				}

			}
		</script>
	</body>

</html>

运行结果
在这里插入图片描述

标签：box,margin,程序,label,微博,简单,var,document,box1
来源： https://blog.csdn.net/weixin_45165848/article/details/98473017

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

简单的微博发布程序