求时钟控件，由javascript写的解决方案

2012-03-14

求时钟控件，由javascript写的请教：我想点击文本框，弹出一个时钟，然后点击钟上的某个位置，会把对应的几点几

求时钟控件，由javascript写的
请教：

我想点击文本框，弹出一个时钟，然后点击钟上的某个位置，会把对应的几点几分回写到文本框中。
这个有没有现成的可以使用的js脚本呢？

多谢

[解决办法]
<HTML> <HEAD> <TITLE> rl </TITLE>
<META http-equiv=Content-Type content= "text/html; charset=gb2312 ">
<STYLE type=text/css> TD {
FONT-SIZE: 9pt; LINE-HEIGHT: 13pt
}
A:link {
COLOR: #0b285d
}
A:unknown {
COLOR: #ff0000
}
A:hover {
COLOR: #0b285d; TEXT-DECORATION: none
}
A:active {
COLOR: #3333ff
}
A:visited {
COLOR: #5a12ab
}
.small {
FONT-SIZE: 9pt
}
.gray {
COLOR: #999999
}
.b1 {
FONT-SIZE: 12pt; COLOR: #ffffff
}
.white {
COLOR: #ffffff
}
.red {
COLOR: #ce0881
}
</STYLE>
<SCRIPT src= "calendar_new.js "> </SCRIPT>

<TABLE cellSpacing=0 cellPadding=0 width=750 align=center border=0>
<TBODY>
<TR>
<TD class=small vAlign=top width=150>
<BR>
</TD>
<TD vAlign=top borderColor=#0019c3 align=right width=600>
<TABLE borderColor=#fcbce6 height=420 cellSpacing=0 width=590 border=1>
<TBODY>
<TR vAlign=top>
<TD align=middle> <BR> <BR>
<FORM id=form1 name=form1 action=rentlist.asp method=post>
<TABLE borderColor=#fcbce6 cellSpacing=0 borderColorDark=#ffffff
cellPadding=1 width=570 bgColor=#fee9f7 border=1>
<TBODY>
<TR bgColor=#fcbce6>
<TD colSpan=2>
<DIV align=center> rl </DIV> </TD> </TR>
<TR>
<TD> 登记日期 </TD>
<TD> <INPUT
onclick= "fPopCalendar(BeginInputDate,BeginInputDate);return false "
readOnly name=BeginInputDate> - <INPUT
onclick= "fPopCalendar(EndInputDate,EndInputDate);return false "
readOnly name=EndInputDate> </TD>

</TR>
</TBODY> </TABLE>
<DIV> </DIV> </FORM> </TD> </TR> </TBODY> </TABLE> </TD> </TR> </TBODY> </TABLE>

</BODY> </HTML>
[解决办法]
<html xmlns:v= "urn:schemas-microsoft-com:vml "
xmlns:o= "urn:schemas-microsoft-com:office:office "
xmlns= "http://www.w3.org/TR/REC-html40 ">
<head>
<META http-equiv= "Content-Type " content= "text/html; Charset=UTF-8 ">
<META HTTP-EQUIV= "pragma " CONTENT= "no-cache ">
<META HTTP-EQUIV= "Cache-Control " CONTENT= "no-cache, must-revalidate ">
<title> 流程监控 </title>
<STYLE>
v\:*{behavior:url(#default#VML);}
o\:* { behavior: url(#default#VML) }
</STYLE>
<script>
var cx=200;var cy=200;var banj=80;var dkd=16;var xkd=8;

}

</script>
</head>

<body style= 'margin:1;cursor:default ' vlink=#3732CD link= '#3732CD ' onload= "init(); ">
<div style= 'width:100%;height:100%;background-color:white;border:0 solid gray;color:black;overflow:hidden ' id= "div1 ">
</div>
</body>
</html>
[解决办法]
可以实现，我修改的地方都做了注释：

<html xmlns:v= "urn:schemas-microsoft-com:vml "
xmlns:o= "urn:schemas-microsoft-com:office:office "
xmlns= "http://www.w3.org/TR/REC-html40 ">
<head>
<META http-equiv= "Content-Type " content= "text/html; Charset=UTF-8 ">
<META HTTP-EQUIV= "pragma " CONTENT= "no-cache ">
<META HTTP-EQUIV= "Cache-Control " CONTENT= "no-cache, must-revalidate ">
<title> clockDemo </title>
<STYLE>
v\:*{behavior:url(#default#VML);}
o\:* { behavior: url(#default#VML) }
</STYLE>
<script>
var hh=0,mm=0,tt= " ";//Added by chouchy
var cx=100;var cy=100;var banj=60;var dkd=16;var xkd=10;
var seclen=0.8;var minlen=0.6;var hourlen=0.5;
function init(){
div1.appendChild(document.createElement( " <v:oval style= 'position:absolute;;left: "+(cx-banj)+ ";top: "+(cy-banj)+ ";width: "+(2.0*banj)+ ";height: "+(2.0*banj)+ "; ' strokeweight= '2 ' fillcolor= 'white '/> "));
for(var i=0;i <12;i++){
var ang=Math.PI/6.0;var px=banj*Math.cos(i*ang);var py=banj*Math.sin(i*ang);var sca=1.0-dkd/banj;
div1.appendChild(document.createElement( " <v:line style= 'position:absolute;left:0;top:0; ' from= ' "+(cx+px*sca)+ ", "+(cy+py*sca)+ " ' to= ' "+(cx+px)+ ", "+(cy+py)+ " ' strokecolor= 'blue ' strokeweight= '1 ' onclick= 'javascript:hh= "+(i+3)%12+ " '/> ")); // onclick method is Added by chouchy
}
for(var i=0;i <60;i++){
var ang=Math.PI/30.0;var px=banj*Math.cos(i*ang);var py=banj*Math.sin(i*ang);var sca=1.0-xkd/banj;
div1.appendChild(document.createElement( " <v:line style= 'position:absolute;left:0;top:0; ' from= ' "+(cx+px*sca)+ ", "+(cy+py*sca)+ " ' to= ' "+(cx+px)+ ", "+(cy+py)+ " ' strokecolor= 'blue ' strokeweight= '1 ' onclick= 'javascript:mm= "+(i+15)%60+ " '/> ")); // onclick method is Added by chouchy
}
div1.appendChild(document.createElement( " <v:line id= 'hpoint ' style= 'position:absolute;left:0;top:0; ' from= ' "+cx+ ", "+cy+ " ' to= ' "+cx+ ", "+(cy-banj*hourlen)+ " ' strokecolor= 'blue ' strokeweight= '3 '/> "));
div1.all.hpoint.innerHTML= " <v:stroke EndArrow= 'Classic ' /> ";
div1.appendChild(document.createElement( " <v:line id= 'mpoint ' style= 'position:absolute;left:0;top:0; ' from= ' "+cx+ ", "+cy+ " ' to= ' "+cx+ ", "+(cy-banj*minlen)+ " ' strokecolor= 'blue ' strokeweight= '2 '/> "));
div1.all.mpoint.innerHTML= " <v:stroke EndArrow= 'Classic ' /> ";
div1.appendChild(document.createElement( " <v:line id= 'spoint ' style= 'position:absolute;left:0;top:0; ' from= ' "+cx+ ", "+cy+ " ' to= ' "+cx+ ", "+(cy-banj*seclen)+ " ' strokecolor= 'red ' strokeweight= '1 '/> "));

div1.all.spoint.innerHTML= " <v:stroke EndArrow= 'Classic ' /> ";
showtime();
setInterval( "showtime(); ",1000);
}
function showtime(){
var dt=new Date();
var h=dt.getHours() % 12;
var m=dt.getMinutes();
var s=dt.getSeconds();
var tot=h+m/60.0+s/3600.0;
var ang=-Math.PI/2.0+2.0*Math.PI*tot/12.0;
div1.all.hpoint.to=(cx+banj*hourlen*Math.cos(ang))+ ", "+(cy+banj*hourlen*Math.sin(ang));
tot=m+s/60.0;
ang=-Math.PI/2.0+2.0*Math.PI*tot/60.0;
div1.all.mpoint.to=(cx+banj*minlen*Math.cos(ang))+ ", "+(cy+banj*minlen*Math.sin(ang));
ang=-Math.PI/2.0+2.0*Math.PI*s/60.0;
div1.all.spoint.to=(cx+banj*seclen*Math.cos(ang))+ ", "+(cy+banj*seclen*Math.sin(ang));

//Added by chouchy
tt=((hh <10)? "0 ": " ")+hh+ ": "+((mm <10)? "0 ": " ")+mm;
sTime.value=tt;
}

</script>
</head>

<body style= 'margin:1;cursor:default ' vlink=#3732CD link= '#3732CD ' onload= "init(); ">
<div style= 'width:100%;height:100%;background-color:white;border:0 solid gray;color:black;overflow:hidden ' id= "div1 ">
</div>

<div style= "position:absolute;width:100px;top:10px;left:10px "> <input type= "text " id= "sTime "/>
</div>

</body>
</html>

[解决办法]
在上面例子基础上做的修改：利用下拉框选择上、下午
<html xmlns:v= "urn:schemas-microsoft-com:vml "
xmlns:o= "urn:schemas-microsoft-com:office:office "
xmlns= "http://www.w3.org/TR/REC-html40 ">
<head>
<META http-equiv= "Content-Type " content= "text/html; Charset=UTF-8 ">
<META HTTP-EQUIV= "pragma " CONTENT= "no-cache ">
<META HTTP-EQUIV= "Cache-Control " CONTENT= "no-cache, must-revalidate ">
<title> vml_clock </title>
<STYLE>
v\:*{behavior:url(#default#VML);}
o\:* { behavior: url(#default#VML) }
</STYLE>
<script>
var hh=0,mm=0,tt= " ";//Added
var cx=100, cy=115, banj=60, dkd=16, xkd=10;//dkd时刻度长度、xkd分刻度长度
var seclen=0.8, minlen=0.6, hourlen=0.5;
function init()
{
div1.appendChild(document.createElement( " <v:oval style= 'position:absolute;left: "+(cx-banj)+ ";top: "+(cy-banj)+ ";width: "+(2.0*banj)+ ";height: "+(2.0*banj)+ "; ' strokeweight= '2 ' fillcolor= 'white '/> "));
for(var i=0;i <12;i++)
{
var ang=Math.PI/6.0;var px=banj*Math.cos(i*ang);var py=banj*Math.sin(i*ang);var sca=1.0-dkd/banj;
div1.appendChild(document.createElement( " <v:line style= 'position:absolute;left:0;top:0; ' from= ' "+(cx+px*sca)+ ", "+(cy+py*sca)+ " ' to= ' "+(cx+px)+ ", "+(cy+py)+ " ' strokecolor= 'blue ' strokeweight= '1 ' onclick= 'javascript:hh= "+(i+3)%12+ ";if(document.getElementById(\ "noonselect\ ").value == \ "PM\ "){hh+=12;} '/> ")); // onclick method is Added
}
for(var i=0;i <60;i++)
{
var ang=Math.PI/30.0;var px=banj*Math.cos(i*ang);var py=banj*Math.sin(i*ang);var sca=1.0-xkd/banj;
div1.appendChild(document.createElement( " <v:line style= 'position:absolute;left:0;top:0; ' from= ' "+(cx+px*sca)+ ", "+(cy+py*sca)+ " ' to= ' "+(cx+px)+ ", "+(cy+py)+ " ' strokecolor= 'blue ' strokeweight= '1 ' onclick= 'javascript:mm= "+(i+15)%60+ " '/> ")); // onclick method is Added

}
div1.appendChild(document.createElement( " <v:line id= 'hpoint ' style= 'position:absolute;left:0;top:0; ' from= ' "+cx+ ", "+cy+ " ' to= ' "+cx+ ", "+(cy-banj*hourlen)+ " ' strokecolor= 'blue ' strokeweight= '3 '/> "));
div1.all.hpoint.innerHTML= " <v:stroke EndArrow= 'Classic ' /> ";
div1.appendChild(document.createElement( " <v:line id= 'mpoint ' style= 'position:absolute;left:0;top:0; ' from= ' "+cx+ ", "+cy+ " ' to= ' "+cx+ ", "+(cy-banj*minlen)+ " ' strokecolor= 'blue ' strokeweight= '2 '/> "));
div1.all.mpoint.innerHTML= " <v:stroke EndArrow= 'Classic ' /> ";
div1.appendChild(document.createElement( " <v:line id= 'spoint ' style= 'position:absolute;left:0;top:0; ' from= ' "+cx+ ", "+cy+ " ' to= ' "+cx+ ", "+(cy-banj*seclen)+ " ' strokecolor= 'red ' strokeweight= '1 '/> "));
div1.all.spoint.innerHTML= " <v:stroke EndArrow= 'Classic ' /> ";
showtime();
setInterval( "showtime(); ",1000);
}
function showtime()
{
var dt=new Date();
var h=dt.getHours() % 12;
var m=dt.getMinutes();
var s=dt.getSeconds();
var tot=h+m/60.0+s/3600.0;
var ang=-Math.PI/2.0+2.0*Math.PI*tot/12.0;
div1.all.hpoint.to=(cx+banj*hourlen*Math.cos(ang))+ ", "+(cy+banj*hourlen*Math.sin(ang));
tot=m+s/60.0;
ang=-Math.PI/2.0+2.0*Math.PI*tot/60.0;
div1.all.mpoint.to=(cx+banj*minlen*Math.cos(ang))+ ", "+(cy+banj*minlen*Math.sin(ang));
ang=-Math.PI/2.0+2.0*Math.PI*s/60.0;
div1.all.spoint.to=(cx+banj*seclen*Math.cos(ang))+ ", "+(cy+banj*seclen*Math.sin(ang));

//Added
tt=((hh <10)? "0 ": " ")+hh+ ": "+((mm <10)? "0 ": " ")+mm;
sTime.value=tt;
}

</script>
</head>

<body style= 'margin:1;cursor:default ' vlink=#3732CD link= '#3732CD ' onload= "init(); ">
<div style= 'width:200;height:200;background-color:white;border:1 solid gray;color:black;overflow:hidden ' id= "div1 ">
<input type= "text " id= "sTime "/> 
<select id= "noonselect "> <option value= "AM "> A.M. </option> <option value= "PM "> P.M. </option> </select> 
</div>
</body>
</html>
[解决办法]
可以，在最前面定义一个变量：j=0;
然后修改for(var i=0;i <12;i++){...}如下：

for(var i=0;i <12;i++)
{
var ang=Math.PI/6.0;var px=banj*Math.cos(i*ang);var py=banj*Math.sin(i*ang);var sca=1.0-dkd/banj;
div1.appendChild(document.createElement( " <v:line style= 'position:absolute;left:0;top:0; ' from= ' "+(cx+px*sca)+ ", "+(cy+py*sca)+ " ' to= ' "+(cx+px)+ ", "+(cy+py)+ " ' strokecolor= 'blue ' strokeweight= '1 ' onclick= 'javascript:hh= "+(i+3)%12+ ";if(document.getElementById(\ "noonselect\ ").value == \ "PM\ "){hh+=12;} '/> ")); // onclick method is Added
var t=document.createElement( "div ");
var p={//根据你的时钟大小调整坐标数值
x:Array(96,130,98,68),
y:Array(60,90,120,90)
};

if(i%3==0)
{
alert( "left= "+p.x[j]+ ":top= "+p.y[j]); //j在最前面初始化为0

t.style.cssText= "position:absolute;left: "+p.x[j]+ "px;top: "+p.y[j]+ "px; font-size:10pt;color:#F00;line-height:18px;z-index: "+(j+1)*10;
t.innerText=(i%12==0)? "12 ":i%12;
div1.appendChild(t);
j++;
}
}

热点排行

JavaScript

求时钟控件，由javascript写的解决方案