比较常见的比如一些网页上有日期选择的效果，一般都是用所谓的javascript控件实现的。
我之前写过一个，很简单，也就下面几个函数：function topOfList()
{
var btn = document.getElementById('topOfListBtn')
if(btn.state == 'spaned')
{
var forms = document.getElementsByTagName('form')
var timeSpan = 50
for(var i = 0i<forms.lengthi++)
{
var form = forms[i]
if(form.id.indexOf('Top') >-1)
{
ShinkSlowly(form,timeSpan)
timeSpan += 50
}
}
btn.state = 'unspaned'
changeBtnImg('topOfListImg','img/unspaned.jpg')
tellConsoleSpanSate()
}
else
{
var forms = document.getElementsByTagName('form')
var timeSpan = 50
for(var i = 0i<forms.lengthi++)
{
var form = forms[i]
if(form.id.indexOf('Top') >-1)
{
SpanSlowly(form,timeSpan)
timeSpan += 50
}
}
btn.state = 'spaned'
changeBtnImg('topOfListImg','img/spaned.jpg')
tellConsoleSpanSate()
}
}
function bottomOfList()
{
var btn = document.getElementById('bottomOfListBtn')
if(btn.state == 'spaned')
{
var forms = document.getElementsByTagName('form')
var timeSpan = 50
for(var i = 0i<forms.lengthi++)
{
var form = forms[i]
if(form.id.indexOf('Bottom') >-1)
{
ShinkSlowly(form,timeSpan)
timeSpan += 50
}
}
btn.state = 'unspaned'
changeBtnImg('bottomOfListImg','img/unspaned.jpg')
tellConsoleSpanSate()
}
else
{
var forms = document.getElementsByTagName('form')
var timeSpan = 50
for(var i = 0i<forms.lengthi++)
{
var form = forms[i]
if(form.id.indexOf('Bottom') >-1)
{
SpanSlowly(form,timeSpan)
timeSpan += 50
}
}
btn.state = 'spaned'
changeBtnImg('bottomOfListImg','img/spaned.jpg')
tellConsoleSpanSate()
}
}
function ShinkSlowly(form,timeSpan)//控制按钮收缩的函数
{
setTimeout(function()
{
form.style.display = 'none'
}
,timeSpan)
}
function SpanSlowly(form,timeSpan)//控制按钮展开的函数
{
setTimeout(function()
{
form.style.display = ''//alert(form.id)
}
,timeSpan)
}
function changeBtnImg(imgId, imgSrc)
{
document.getElementById(imgId).src=imgSrc//'img/unspaned.jpg''img/spaned.jpg'
}
其中，imgSrc要换成你硬盘里存在的图片路径。然后在你的+号图片的单击事件响应使用topOfList()函数即可，我测试过，可用。ShinkSlowly()函数内部可以控制张开和收缩的速度。
思路：获取label对象，使用innerHTML设置显示内容，关键代码
document.getElementById(label_id).innerHTML = something实例演示：
1、HTML结构
<label id="test">这是原始的label内容</label><br><input type="text" id="test_input"><input type='button' value='设置label内容' onclick="fun()"/>
2、javascript代码
function fun(){str = document.getElementById("test_input").value
obj_label = document.getElementById("test")
obj_label.innerHTML = str
}
3、效果演示
