<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
*{ margin:0padding:0}
#div1{ width:200pxheight:300pxoverflow:hiddenborder:#009 1px solid}
#div1 div{ list-style:noneborder-bottom:1px dashed #666666
margin:10pxoverflow:hiddenfilter:alpha(opacity:0)opacity:0}
</style>
<meta http-equiv="Content-Type" content="text/htmlcharset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript" src="perfactMove.js"></script>
<script type="text/javascript">
window.onload=function()
{
var oBt=document.getElementById('bt1')
var oTxt=document.getElementById('txt1')
var oDiv=document.getElementById('div1')
oBt.onclick=function()
{ var aDiv=oDiv.getElementsByTagName('div')
//创建li节点
var aDivChildren=document.createElement('div')
//将创建好的li插入ul中
if(aDiv.length==0)
{
oDiv.appendChild(aDivChildren)
}
else
{
oDiv.insertBefore(aDivChildren,aDiv[0])//插入在第一个元素之前
}
//给插入的li赋值
aDivChildren.innerHTML=oTxt.value
oTxt.value=''
//保存新加入的li的宽度
var oHeight=aDivChildren.offsetHeight
//将oli的宽度变为0，然后利用运动来实现，慢慢出现
aDivChildren.style.height=0
startMove(aDivChildren,{height:oHeight},function()
{
startMove(aDivChildren,{opacity:100})
})
}
}
</script>
</head>
<body>
<textarea id="txt1" rows="10" cols="50"></textarea>
<input id="bt1" type="button" value="提交留言" />
<div id="div1"></div>
</body>
</html>
$('.titleArea').keyup(function () {var hidTitleWordNum = parseInt($('.hidTitleWordNum').val())
var titleAreaVal = $('.titleArea').val()
var sum = 0
for (var i = 0i <titleAreaVal.lengthi++) {
if ((titleAreaVal.charCodeAt(i) >= 0) &&(titleAreaVal.charCodeAt(i) <= 255)) {
sum = sum + 1
} else {
sum = sum + 2
}
if (sum >hidTitleWordNum) {
alert("输入数据超长！不能再输入数据。")
var str = titleAreaVal.substring(0, i)
$('.titleArea').val(str)
$('.titleWordNum').text(hidTitleWordNum - getLength($('.titleArea').val()))
break
} else {
$('.titleWordNum').text(hidTitleWordNum - getLength($('.titleArea').val()))
}
}
})
<head><title></title>
<script src="Scripts/jquery-1.4.4.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$("input[type=button]").click(function () {
var body = ""
var username = $("#username").val()
var content = $("#content").val()
body += "<li><table><tr><td>用户名：</td><td>" + username + "</td></tr><tr><td>内容：</td><td>" + content + "</td></tr></table></li>"
$("ul").append(body)
})
})
</script>
</head>
<body>
<div>内容显示</div>
<div>
<ul></ul>
</div>
<br />
<br />
<br />
<br />
<hr />
<div>
用户名：<input type="text" id="username" /><br />
内 容：<textarea id="content" rows="5" cols="20"></textarea><br />
<input type="button" value="提交" />
</div>
</body>
</html>
ps:页面你就自己美化吧
