简单的微博发布程序_请设计并实现一个简易的微博系统,让用户可以发送推文-程序员宅基地

技术标签: java前端  简单的微博发布程序  

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

代码实现

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

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

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/weixin_45165848/article/details/98473017

智能推荐

FreeRadius 安装过程记录-程序员宅基地

文章浏览阅读5.8k次。FreeRadius 安装过程记录FreeRadius 安装过程记录使用 apt-get 安装下载原代码编译安装解压及安装问题使用 apt-get 安装输入命令:sudo apt-get install freeradiusapt-get 安装时,没有radiusd程序。但是在man freeradius时,要求运行的是radiusd,同时,在官方网站上的文档中,也要求使用radiusd程序

【随机生成验证码】-程序员宅基地

文章浏览阅读472次。随机生成验证码_随机生成验证码

编码规范(二)----JAVA编码规范插件_阿里 java编码规范及插件有哪些-程序员宅基地

文章浏览阅读7.5k次,点赞5次,收藏10次。一、前言在项目开发的过程中,很多时候,无法统一大家的编码规范,你有你的风格,我有我的风格,虽然每个公司都有自己的规范,但是有时候,作为开发人员的我们,写者写着,就按自己的来了,反正有没有人来检查,或者是人为的检查感觉费时间,这时候,就可以通过一些代码插件工具来提高我们的效率,目前常见的有:CheckStyle、阿里巴巴的p3c插件等。CheckStyle简介_阿里 java编码规范及插件有哪些

一次OOM问题排查过程实战记录(内存爆满)_oom时查看内存-程序员宅基地

文章浏览阅读149次。一次OOM问题排查过程实战记录(内存爆满)_oom时查看内存

android 【IM】 聊天布局问题_android多布局的im-程序员宅基地

文章浏览阅读310次。有前辈做过这个东西的布局吗? 怎么才能让里面的文字居中显示这是一个自定义的dialog布局如下: android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" android:gravity="c_android多布局的im

Windows驱动开发第2课(开发及调试工具介绍)_debugview 驱动调试-程序员宅基地

文章浏览阅读972次,点赞4次,收藏3次。1.开发工具-虚拟机。2.调试工具:debugview。_debugview 驱动调试

随便推点

SSH个人相册_ssh开发相册-程序员宅基地

文章浏览阅读204次。SSH个人相册使用Maven环境下创建album相册管理pom中找不到oracle数据库驱动问题Missing artifact com.oracle:ojdbc6:jar:11.2.0.1.0原因:Oracle的ojdbc.jar是收费的,所以maven的中央仓库中没有这个资源,只能通过配置本地库才能加载到项目中去。废话不多说,解决方案如下:1.首先确定你是否有安装oracle,如果..._ssh开发相册

我的前端成长之路:中医药大学毕业的业务女前端修炼之路_前端通过项目个人成长-程序员宅基地

文章浏览阅读818次。前端工程师的修炼没有捷径,踏踏实实的通过一个个项目的实践来升级打怪实现进阶;本文仅分享自己11年的前端生涯,探讨一直在业务中的技术人的成长之路,也复盘再认识下自己,每个节点我遇到的问题和我的选择。..._前端通过项目个人成长

docker inspect --format 详解-程序员宅基地

文章浏览阅读2.6k次。Docker --format 参数提供了基于 Go模板 的日志格式化输出辅助功能,并提供了一些内置的增强函数。什么是模板?上图是大家熟悉的 MVC 框架(Model View Controller): Model(模型,通常在服务端)用于处理数据、View(视图,客户端代码)用于展现结果、Controller(控制器)用于控制数据流,确保 M 和 V 的同步,即一旦 M 改变,V 也应该同步更新。而对于 View 端的处理,在很多动态语言中是通过在静态 HTML 代码中插入动态数据来实现的。例如 _docker inspect --format

centOS7.4安装jdk1.8+tomcat7_centos7 安装tomcat jdk-程序员宅基地

文章浏览阅读2.1k次。1.准备1.JDK1.8:http://www.oracle.com/technetwork/java/javase/downloads/java-archive-javase8-2177648.html jdk-8u162-linux-x64.tar.gz2.tomcat7:https://tomcat.apache.org/download-70.cgi下载之后通过scp或者winscp等工具..._centos7 安装tomcat jdk

科目一必过宝典_科目一 提取码-程序员宅基地

文章浏览阅读2.8k次,点赞15次,收藏49次。文章目录写在前面知识点速记其他总结危险驾驶交警手势扣分总结违法判刑题违法罚款题人车总结图片写在前面科目一今天满分飘过,特此分享下自己打的笔记。如果你想问我只是科目一而已用的着那么认真吗,别问,问就是因为没复习挂过一次。之所以写这篇文章的原因是提醒大家当时我是过了全部题后之后只做某考宝典的模拟题,一直是95以上,但考试的时候发现考试比手机模拟难的多,好多易错题手机模拟根本碰不到,这里建议大家用网页版的模拟。另外只要大家把我发的知识点记住图片题目看了之后过绝对没问题。知识点速记1.有线城5公7,没线_科目一 提取码

C++实现矩阵类(附代码和功能)_c++矩阵-程序员宅基地

文章浏览阅读6.7w次,点赞173次,收藏663次。本文由两部分组成,第一部分介绍一个在win10系统上运行的exe程序,第二部分介绍通过C++实现矩阵运算的方法(功能会更强大,但不如exe文件操作方便)。 用户界面如下,能够实现矩阵的加、减、乘、除运算,以及矩阵的转置,求逆,求行列式的值等。 读者可以在下载该程序,直接在自己的电脑上运行。下载地址:https://download.csdn.net/do..._c++矩阵