js时间控件

JavaScript09

js时间控件,第1张

My97DatePicker，将dateFmt设置为"HH:mm:ss"

<input type="text" onclick="WdatePicker({dateFmt:'HH:mm:ss'})" />

效果：

<head>

<title></title>

<script>

document.onkeydown = function(e) {

var e = window.event ? window.event : e

if (document.activeElement.id != "txt1")

return

if (e.keyCode == 38) {\\上键事件

var l = getTxt1CursorPosition()

if (l == 2 || l == 8 || l == 5)

return

if (l == 0 || l == 1) {

if (document.getElementById("txt1").value.substr(0, 2) == '24') {

alert('必须小于24小时')

return

}

var val = Number(document.getElementById("txt1").value.substring(0, 2)) + 1

if (val <10) {

document.getElementById("txt1").value = "0" + val + document.getElementById("txt1").value.substring(2, document.getElementById("txt1").value.length)

}

else {

document.getElementById("txt1").value = val + document.getElementById("txt1").value.substring(2, document.getElementById("txt1").value.length)

}

}

}

if (e.keyCode == 40) {\\下键事件

}

}

function getTxt1CursorPosition(){

var oTxt1 = document.getElementById("txt1")

var cursurPosition=-1

if(oTxt1.selectionStart){//非IE浏览器

cursurPosition= oTxt1.selectionStart

}else{//IE

var range = document.selection.createRange()

range.moveStart("character",-oTxt1.value.length)

cursurPosition=range.text.length

}

return cursurPosition

}

</script>

</head>

<body>

<div>

<input id="txt1" type="text" value="00:00:00" />

</div>

</body>

</html>

就不帮你写完了，你按这个思路继续做下键和分、秒就行了。

执行完后文本焦点上还有些小问题，你自己查下，很容易解决。

<%@page contentType="text/html" %>

<%@page pageEncoding="UTF-8" %>

<%@ page import="java.util.Date" %>

<html>

<body bgcolor="#99ccff"onload="disptime()">

<FORM NAME="myform">

<DIV align="center">

<SCRIPT language="JavaScript">

<!--

function disptime( )

{

var time = new Date( )//获得当前时间

var hour = time.getHours( )//获得小时、分钟、秒

var minute = time.getMinutes( )

var second = time.getSeconds( )

var apm="AM"//默认显示上午: AM

if (hour>12) //按12小时制显示

{

hour=hour-12

apm="PM"

}

if (minute <10) //如果分钟只有1位，补0显示

minute="0"+minute

if (second <10) //如果秒数只有1位，补0显示

second="0"+second

/*设置文本框的内容为当前时间*/

document.myform.myclock.value =hour+":"+minute+":"+second+" "+apm

/*设置定时器每隔1秒（1000毫秒），调用函数disptime()执行，刷新时钟显示*/

var myTime = setTimeout("disptime()",1000)

}

//-->

</SCRIPT>

<INPUT name="myclock" type="text" value="" size="15">

</body></html>