<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>动态发布效果+定时器实现字数统计</title>
<style>
* {
margin: 0;
padding: 0;
list-style: none;
font-family: '微软雅黑';
}
.wrap {
660px;
padding: 20px 20px 0 20px;
margin: 100px auto 0;
border: 1px solid #ccc;
overflow: hidden;
}
#tit {
height: 30px;
600px;
padding-left: 15px;
margin-bottom: 20px;
}
#con {
height: 100px;
585px;
padding: 15px;
}
#sendMsg {
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 {
638px;
border: 1px solid #ccc;
line-height: 30px;
padding: 0 10px;
margin-bottom: 20px;
}
#msgList li p {
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>