动态评论(有字数限制)

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

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

前端小涛

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值