如何自己写时间控件


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style type="text/css" media="screen">
#tips {
display: none;
width: 205px;
border: 1px #3399FF solid;
background: #ffffff;
font-size: 10;
}
.title {
height: 16px;
margin: 1px;
padding: 5px 0 0 10px;
background:url(bg.jpg);
}
.content {
font-size: 10;
padding: 10px;
}
.selecttime {
margin-top:2px;
text-align:center;
height:16px;
width:35px;
color:#034c50;
background-color:transparent;
cursor:pointer;
}
.button{
height:20px;
width:45px;
padding:2px;
border:#38B1B9 1px solid;
background-color:#C0EBEF;
color:#08575B;
}
</style>
<script type="text/javascript"></script>
</head>
<body>
<input type="text" id="idTime"/>
<!--<img height="20px" alt="" border="0" src="images2.jpeg" onclick="return show('idTime');">-->
<input type="button" onclick="return show('idTime');" />
<div id="tips">
<div class="title">
选择时间:
</div class="content">
<div>
<table>
<tr>
<td width="5px" height="19px"></td>
<td width="35px"></td>
<td width="5px"></td>
<td width="35px"></td>
<td width="5px"></td>
<td width="35px"></td>
</tr>
<tr>
<td>时:</td>
<td>
<select class="selecttime" name="hour" id="hour">
</select>
</td>
<td>分:</td>
<td>
<select class="selecttime" id="minute">
</select>
</td>
<td>秒:</td>
<td>
<select class="selecttime" id="second">
</select>
</td>
</tr>
<tr>
<td height="19px"></td>
</tr>
</table>
<table>
<tr>
<td width="97px"></td>
<td align="right" width="10px">
<input class="button" type="button" value="确定" onclick="return getTime()"/>
</td>
<td align="right" width="10px">
<input class="button" type="button" value="取消" onclick="return cancelTime()"/>
</td>
</tr>
</table>
</div>
</div>
<script language="JavaScript" type="text/javascript">
function show(idname) {
var time = document.getElementById(idname).value;
if (time != null && time != ""){
var hour = time.split(":")[0];
var minute = time.split(":")[1];
var second = time.split(":")[2];
document.getElementById("hour").value = (hour > 9 ? hour : hour.substring(1,2));
document.getElementById("minute").value = (minute > 9 ? minute : minute.substring(1,2));
document.getElementById("second").value = (second > 9 ? second : second.substring(1,2));
}
var tips = document.getElementById("tips");
tips.style.cssText = "display: block;"
}
function getTime() {
var hour = document.getElementById('hour').options[document.getElementById('hour').selectedIndex].value;;
var minute = document.getElementById('minute').options[document.getElementById('minute').selectedIndex].value;
var second = document.getElementById('second').options[document.getElementById('second').selectedIndex].value;
document.getElementById("idTime").value= (hour > 9 ? hour : "0" + hour) + ":" + (minute > 9 ? minute : "0" + minute) + ":" + (second > 9 ? second : "0" + second);
var tips = document.getElementById("tips");
tips.style.cssText = "display: none;";
}
function cancelTime(){
var tips = document.getElementById("tips");
tips.style.cssText = "display: none;";
}
list();
function list(){
var objhour = document.getElementById("hour");
var objminute = document.getElementById("minute");
var objsecond = document.getElementById("second");
for (var i=0; i<=24; i++) {
objhour.options.add(new Option(i,i));
}
for (var i=0; i<=60; i++) {
objminute.options.add(new Option(i,i));
objsecond.options.add(new Option(i,i));
}
}
</script>
</body>
</html>
我想要的是点击按钮调用层选择时间， 但是不可能在每个页面都写这个多代码。 我现在想把他写成一个控件， 应该怎么实现， 麻烦给详细点思路, 或则指导下(msn:[email protected] 你留下我加你也ok)， 或则给出代码当然最好了。