JavaScript 评论功能

最新推荐文章于 2025-05-29 11:38:29 发布

前端啊久

最新推荐文章于 2025-05-29 11:38:29 发布

阅读量2.6k

点赞数 4

分类专栏：评论 JavaScript 文章标签： javascript

本文链接：https://blog.youkuaiyun.com/qq_44864468/article/details/109061633

版权

JavaScript 同时被 2 个专栏收录

7 篇文章

订阅专栏

1 篇文章

订阅专栏

评论功能，目前只能输入文字

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title> 评论页面</title>
		<style type="text/css">
			.maxBox{
				border: solid red;
				height: 400px;
				width: 64%;
				margin: 0 auto;
				padding: 20px;
			}
			.max1{
				border: solid blue;
				width: 80%;
				height: 50px;
				margin: 0 auto;
				display: flex;
				flex-direction: row;
				justify-content: center;
				
			}
			img{
				width:46px;
				height: 46px;
				line-height: 46px;
			}
			.wb{
				height: 90%;
				width: 70%;
				font-size: 20px;
				margin:0 1px;
			}
			.bun{
				width: 80px;
				height: 30px;
				float: right;
				margin-top: 10px;
				border-radius:8%;
			}
			.max2{
				width: 80%;
				margin: auto;
			}
			li{
				list-style: none;
			}
			.plym{
				border: solid red ;
				display: flex;
				flex-direction: row;
				margin-bottom: 2px;
				position: relative;
				word-wrap:break-word; 
				word-break:break-all;
			}
			.sc{
				width: 60px;
				height: 50%;
				position: absolute;
				bottom: 0;
				right: 0;
				border-radius: 5px;
			}
			
		</style>
	</head>
	<body>
		<div class="maxBox">
			<div class="max1">
				<img class="tp" src="img/1.png" >
				<input  class="wb" id="wb" type="text" />
				<button class="bun" id="bun">发表</button>
			</div>
			<div class="max2"  id="max2">
			</div>
		</div>
	</body>
	<script type="text/javascript">
		var tesc = 0;
		console.time(tesc)
		var wb = document.getElementById('wb');
		var bun = document.getElementById('bun');
		var max2 = document.getElementById('max2');
		var tp = document.getElementById('tp');
		// 时间
		function sam(){
			 var data=new Date();
		     var a=data.getHours();
			  a= a<10 ? '0'+a : a;
			 var b=data.getMinutes();
			  b= b<10 ? '0'+ b : b;
			 return a+'时'+b+'分';

		}
		// 发布文本	
		function wbsj() {
			if(wb.value==''){
				alert('文本不能为空');
				return false;
			}
			dtnr();
			wb.value='';
		}
		//创造评论 
		function dtnr(){
			//创造div
			var divda = document.createElement('div');
			divda.className='plym';
			max2.appendChild(divda);
			// 创造图片
			var img = document.createElement('img');
			img.src="img/1.png";
			divda.appendChild(img);
			// 获取文字
			console.log(wb.value);
			var wenzhi = wb.value;
			var li = document.createElement('div');
			li.innerHTML=wenzhi+'<br> 于'+sam()+'发布';
			console.log(li);
			divda.appendChild(li)
			//获取删除按钮
			var cs = document.createElement('a');
				cs.href='#'
				cs.className ='sc'
				cs.innerHTML='删除'
				divda.appendChild(cs);
			cs.onclick = function(){
					var pd = confirm('是否删除此评论');
				if(pd ){
					max2.removeChild(divda);
				}
				
			}	
		}
		bun.onclick = function(){
			wbsj();
		}
		document.onkeydown = function(event){
		 console.log(event.keyCode);
		 if(event.keyCode == 13){
			 wbsj();
		 }
		}
		console.log(sam())
		console.timeEnd(tesc)
	</script>
</html>