<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>
<html><body>
<script type="text/javascript">
function validate(){
account = document.loginForm.account.value
//document.loginForm.submit()
window.alert("确认提交")
var content=document.getElementById("contenttable")
var newRow=content.insertRow(content.rows.length)
newRow.insertCell(0).innerText="您的留言"
newRow.insertCell(1).innerText=account
}
</script>
<form name="loginForm">
输入账号:<input name="account" type="text"><BR>
<input type="button" onclick="validate()" value="登录">
</form>
<table id="contenttable"></table>
</body>
</html>
改成上面那样就可以了
但是你要把
document.loginForm.submit()
注释掉 不然的话 结果只是一闪而过
因为document.loginForm.submit()
相当于把屏幕又刷新了一遍 那样是没有意义的
我这样实现 是属于无刷新更新
