动态评论（有字数限制）

最新推荐文章于 2024-10-29 14:54:04 发布

前端小涛

最新推荐文章于 2024-10-29 14:54:04 发布

阅读量156

点赞数 1

文章标签： css html javascript

本文链接：https://blog.csdn.net/weixin_57130691/article/details/123496565

版权

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>yjjmsxj</title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			.wrap{
				width: 900px;
				margin: 0 auto;
			}
			.box{
				width: 100%;
				height: 500px;	
				border: 1px solid black;
				position: relative;			
			}
			.sp{
				float: left;
			}
			.sp1{
				float: right;
			}
			textarea{
				width: 600px;
				height: 300px;
				resize: none;
				margin: 100px auto;
			}
			.butt{
				float: right;
				margin-top:458px;
				position: absolute;
				right: 0;
				bottom: 0;
			}
			#box1{
				width: 900px;
				height: 100px;
				margin: 10px 0;
				border: 1px solid black;
				position: relative;
			}
			#butt1{
				background: gray;
				width: 20px;
				height: 20px;
				position: absolute;
				right: 0;
				bottom: 0;
			}
		
			.foot{
				width:900px;
				height:100px;
				border:1px solid #000;
				margin-top:30px;
			}
			.foot>img{
				width:100px;
				height:100px;
				float: left;
			}
			.foot>p{
				float: left;
			}
			
			.foot>button{
				float: right;
				margin-top:60px;
				width:80px;
				height:40px;
				border:none;
				background-color:none;
				text-align: center;
				line-height:40px;
				color: #fff;
				background-color:#ccc;
				
			}
			
		</style>
	</head>
	<body>
		<div class="wrap">
			<div class="box">
				<p>
					<sapn class="sp">有什么想对我说的</sapn>
					<span class="sp1">最多可以输入<span class="sp2">100</span>字</span>
				</p>
				<textarea maxlength="100" name="" rows="" cols=""></textarea>
				<button class="butt">发布</button>
			</div>
		</div>
	</body>
<script>
var shuzi=document.getElementsByClassName('sp2')[0];
var otext=document.getElementsByTagName('textarea')[0];
var anniu=document.getElementsByClassName('butt')[0];
var quanju=document.getElementsByClassName('wrap')[0];
		
		var apple=null;
		
		otext.onfocus=function(){
			apple=setInterval(function(){
			var num=100-otext.value.length;		
			shuzi.innerHTML=num;											
			},10)			
		}
		otext.onblur=function(){
			clearInterval(apple)
		}
		
		
		
		anniu.onclick=function(){
		var div=document.createElement('div')	;
		var img=document.createElement('img');
		var p=document.createElement('p');
		var but=document.createElement('button');
		div.className='foot';
		
		img.src='img/9.png';
		p.innerHTML=otext.value;
		but.innerHTML='删除'

			div.appendChild(img);
			div.appendChild(p);
			div.appendChild(but);
			quanju.appendChild(div)
			otext.value = "";
			
			shuzi.innerHTML = 100;

			but.onclick = function() {
				quanju.removeChild(this.parentNode)
			}
			
		}
	
		</script>
</html>