简单的微博发布程序

最新推荐文章于 2020-12-01 19:42:26 发布

一切会更好

最新推荐文章于 2020-12-01 19:42:26 发布

阅读量651

点赞数

分类专栏： java前端文章标签：简单的微博发布程序

本文链接：https://blog.csdn.net/weixin_45165848/article/details/98473017

版权

java前端专栏收录该内容

20 篇文章 0 订阅

订阅专栏

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

代码实现

<!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>

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

一切会更好

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
简单的微博发布程序

能实现简单的上传和删除，以及显示发布的时间。主要是先创建个文本节点，然后将所要发布的信息追加在文本节点上。代码实现<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"&g...
复制链接

扫一扫