<div id="show_panel" style="display:block">
<span id="pic_name">20130510112</span><a href="javascript:edit_name()">编辑</a>
</div>
<div id="edit_panel" style="display:none">
<p><input type="text" value="" id="edit_txt" /></p>
<p>
<input type="button" value="保存" onclick="save_name()"/>
<input type="button" value="取消" onclick="cancel_edit()"/>
</p>
</div>
</div>
<script type="text/javascript">
function edit_name(){
document.getElementById("show_panel").style.display = "none"
document.getElementById("edit_panel").style.display = "block"
document.getElementById("edit_txt").value = document.getElementById("pic_name").innerHTML
document.getElementById("edit_txt").focus()
}
function cancel_edit(){
document.getElementById("edit_txt").value = ""
document.getElementById("show_panel").style.display = "block"
document.getElementById("edit_panel").style.display = "none"
}
function save_name(){
// submit data to remote server by ajax and callback below code:
document.getElementById("pic_name").innerHTML = document.getElementById("edit_txt").value
document.getElementById("edit_txt").value = ""
document.getElementById("show_panel").style.display = "block"
document.getElementById("edit_panel").style.display = "none"
}
</script>
根据你的需求，写了一个demo，可以参考一下：
思路：
点击“编辑”，隐藏当前展示区域，显示可以编辑的表单，并将目标编辑数据设为文本域的默认值，并设焦点其中。
点击保存，后台异步提交成功后，回调：数据展示区更新为新数据，表单隐藏。
点击取消，隐藏表单，数据展示区仍保留原有的数据。
<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8">
<title>定时器</title>
</head>
<body>
<button id="start">开始</button>
<button id="stop">结束</button>
<div id="show"></div>
<script>
/*
setInterval(code,time)
* 参数
* code - 表示按照指定周期所执行的代码块
* 最简单的实现方式就是回调函数
* time - 表示指定周期，以毫秒为单位
* 返回值 - 作为当前定时器的标识(ID)
* 问题
* 导致第一次执行时，会出现指定时间的延迟
*/
//开始按钮
var start = document.getElementById('start')
var show = document.getElementById('show')
var t
start.addEventListener('click',function(){
showTime()
t = setInterval(showTime, 1000)
})
function showTime(){
var date = new Date()
show.innerHTML = date.getFullYear() + '-' + date.getMonth() + '-' + date.getDate() + '-' + date.getHours() + '-' + date.getMinutes() + '-' + date.getSeconds()
}
//结束按钮
/*
clearInterval(id)
* id - 表示setInterval()方法的返回值
*/
var stop = document.getElementById('stop')
stop.addEventListener('click',function(){
clearInterval(t)
})
</script>
</body>
</html>
原生的定时器，可以解决动画效果
var easeInOut = fucntion(t){return (t *= 2) <1 ? 0.5 * t * t : 0.5 * (1 - (--t) * (t - 2))
}//t range 0-1
var min = 0
var max = 100
var t = min
setInterval(function(){
console.log((max-min)*easeInOut(t/(max-min)))//in IE not support console.log()
if(t<end) t++
},10)
