模拟微博动态发布效果

最新推荐文章于 2022-09-15 15:07:10 发布

weixin_33720452

最新推荐文章于 2022-09-15 15:07:10 发布

阅读量286

点赞数 1

CC 4.0 BY-SA版权

文章标签：移动开发前端 ViewUI

原文链接：http://www.cnblogs.com/handsomehan/p/5807528.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>动态发布效果+定时器实现字数统计</title>
	<style>
		* {
			margin: 0;
			padding: 0;
			list-style: none;
			font-family: '微软雅黑';
		}
		.wrap {
			width: 660px;
			padding: 20px 20px 0 20px;
			margin: 100px auto 0;
			border: 1px solid #ccc;
			overflow: hidden;
		}
		#tit {
			height: 30px;
			width: 600px;
			padding-left: 15px;
			margin-bottom: 20px;
		}
		#con {
			height: 100px;
			width: 585px;
			padding: 15px;
		}
		#sendMsg {
			width: 60px;
			height: 30px;
			border-radius: 5px;
			margin: 20px 0 20px 40px;
			cursor: pointer;
		}
		#wordTotal {
			float: right;
			font-size: 14px;
		}
		#wordTotal span {
			font-size: 18px;
			font-weight: bold;
			color: red;
		}
		h1 {
			margin-bottom: 20px;
			display: none;
		}
		#msgList li {
			position: relative;
			overflow: hidden;
		}
		#msgList li h3 {
			width: 638px;
			border: 1px solid #ccc;
			line-height: 30px;
			padding: 0 10px;
			margin-bottom: 20px;
		}
		#msgList li p {
			width: 638px;
			border: 1px solid #ccc;
			padding: 10px 10px;
			margin-bottom: 20px;
		}
		#msgList li #close {
			position: absolute;
			top: 6px;
			right: 6px;
			height: 20px;
			line-height: 20px;
			font-size: 20px;
			background: #ccc;
			cursor: pointer;
		}
	</style>
</head>
<body>
	<div class="wrap">
		<div class="title">
			<label for="tit">标题:</label>
			<input id="tit" type="text">
		</div>
		<div class="con">
			<label for="con">内容:</label>
			<textarea name="" id="con"></textarea>
		</div>
		<div>
			<button id="sendMsg">发布</button>
			<p id="wordTotal">你还可以输入<span>200</span>个字</p>
		</div>
		<h1 id="display">显示内容</h1>
		<ul id="msgList">
			<!-- <li>
				<h3></h3>
				<p></p>
				<span id="close" title='close'>X</span>
			</li> -->
		</ul>
	</div>
	<script>
		var $ = function(id) {
			return document.getElementById(id);
		}
		$('sendMsg').onclick = function() {
			if ($('con').value.length > 200) {
				$('con').value = con.value.substring(0,200);
			}
			var newLi = document.createElement('li');
			newLi.innerHTML = '<h3>'+$('tit').value+'</h3><p>'+$('con').value+'</p><span id="close" title="close">X</span>';

			//====================动态发布效果======================//
			var timer2 = null;
			function move() {
				var start = 0;
				var change = newLi.clientHeight;
				var minstep = 0;
				var maxstep = 10;
				newLi.style.height = '0px';
				clearInterval(timer2);
				timer2 = setInterval(function() {
					minstep ++;
					if(minstep > maxstep) {
						clearInterval(timer2);
					}
					start += change/maxstep;
					newLi.style.height = start + 'px';
				},20);
			}
			//================动态效果发布-end========================//
			if (($('con').value && $('tit').value) != '') {
				$('display').style.display = 'block';
				if($('msgList').children.length == 0) {
					$('msgList').appendChild(newLi);
					move();
				}else {
					$('msgList').insertBefore(newLi,$('msgList').children[0]);
					move();
				}
				$('con').value = '';
				$('tit').value = '';
				$('wordTotal').innerHTML = '你还可以输入<span>200</span>个字';
			}else {
				alert('请输入内容！！！');
			}
			$('close').onclick = function() {
				var thisLi = this.parentNode;
				var start = thisLi.clientHeight;
				var change = -start;
				var minstep = 0;
				var maxstep = 10;
				clearInterval(timer2);
				timer2 = setInterval(function() {
					minstep ++;
					if(minstep > maxstep) {
						clearInterval(timer2);
						$('msgList').removeChild(thisLi);
						if ($('msgList').children.length == 0) {
							$('display').style.display = 'none';
						}
					}
					start += change/maxstep;
					thisLi.style.height = start + 'px';
				},20);
			}
		}
		//用计时器法检测textarea中字的个数。
		var timer = null;
		$('con').onfocus = function() {
			timer = setInterval(function() {
				var txtLength = 200;
				var conValueLength = $('con').value.length;
				var str = txtLength - conValueLength;
				str >= 0 ? $('wordTotal').innerHTML = '你还可以输入<span>'+ str + '</span>个字' : $('wordTotal').innerHTML = '已经超出<span>'+ (conValueLength - txtLength) + '</span>个字';
			},10);
		}
		$('con').onblur = function() {
			clearInterval(timer);
		}
	</script>
</body>
</html>

转载于:https://www.cnblogs.com/handsomehan/p/5807528.html