html自制评论功能模块

最新推荐文章于 2022-05-28 21:30:00 发布

Pure_Eyes

最新推荐文章于 2022-05-28 21:30:00 发布

阅读量5.1k

点赞数 4

分类专栏： html

本文链接：https://blog.csdn.net/Pure_Eyes/article/details/50042265

版权

html 专栏收录该内容

2 篇文章 1 订阅

订阅专栏

<html>
	<head>
		<meta charset="utf-8">
		<style type="text/css">
			body{margin:0;}
			#talk{
			     width: 742px;
				 height: 536px;
				 border:1px red solid;
			}	
			#show{
				width:98%;
				height:67%;
				border:1px green  solid;
				margin:10px auto auto;
				overflow-y:auto;
			}
			#write{
				width:98%;
				height:28%;
				border:1px blue solid;
				margin:10px auto auto;
			}
			.btn{
				width: 51px;
				  height: 28px;
				  margin: 2px auto auto 90%;
			}
			.personal{
				width:99%;
				height:100px;
				border:1px #33ff00 solid;
				margin:2px auto;
				overflow-y:auto;
			}
		</style>		
		<script type="text/javascript">			
			function  add()
			{
				var content=$("te").value;
				content=trim(content);
				if(content.length<1)
				{
					alert("请输入内容");
					return;
				}
				$("te").value="";
				var myDate = new Date();
				var year=myDate.getFullYear();    //获取完整的年份(4位,1970-????)
				var month=myDate.getMonth();       //获取当前月份(0-11,0代表1月)
				var day=myDate.getDate();  
				var hour=myDate.getHours();       //获取当前小时数(0-23)
                var second=myDate.getMinutes();     //获取当前分钟数(0-59)
				var minute=myDate.getSeconds();
				var timeNow=year+"/"+month+"/"+day+" --"+hour+":"+second+":"+minute;				
				var  w="<pre  style='display:inline;'>"+timeNow+"<br/>"+content+"</pre>";						
				var newDiv=document.createElement("div");
				newDiv.className="personal";
				newDiv.innerHTML=w;
				var s=$("show");
				$("show").appendChild(newDiv);
				s.scrollTop = s.scrollHeight;//自动将滚动条拉到底部
			}
		function $(id){
			return document.getElementById(id);
		}
		function trim(str){ //删除左右两端的空格
　　     return str.replace(/(^\s*)|(\s*$)/g, "");
　　 }
		</script>
	</head>	
	<body>
		<div id="talk">
			<div id="show"></div>
			<div id="write">
						<textArea   id="te" style="margin: auto auto; width:100%;height:79%;"></textArea>
						<input type="button" value="发布" class="btn" οnclick="add()">				
			</div>
		</div>
	<body>
</html>

Pure_Eyes

关注

4
点赞
踩
30

收藏

觉得还不错? 一键收藏
0
评论
html自制评论功能模块

body{margin:0;} #talk{ width: 742px; height: 536px; border:1px red solid; } #show{ width:98%; height:67%; border:1px green solid; margin:10px auto auto;
复制链接

扫一扫