<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>
<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>
===========================================
function getNowDate()
{
var nn=new Date();
year1=nn.getYear();
mon1=nn.getMonth()+1;
date1=nn.getDate();
var monstr1;
var datestr1
if(mon1<10)
monstr1="0"+mon1;
else
monstr1=""+mon1;
if(date1<10)
datestr1="0"+date1;
else
datestr1=""+date1;
return year1+"-"+monstr1+"-"+datestr1;
}
function getlastweekDate()
{
var nn=new Date();
year1=nn.getYear();
mon1=nn.getMonth()+1;
date1=nn.getDate();
var mm=new Date(year1,mon1-1,date1);
var tmp1=new Date(2000,1,1);
var tmp2=new Date(2000,1,15);
var ne=tmp2-tmp1;
var mm2=new Date();
mm2.setTime(mm.getTime()-ne);
year2=mm2.getYear();
mon2=mm2.getMonth()+1;
date2=mm2.getDate();
if(mon2<10)
monstr2="0"+mon2;
else
monstr2=""+mon2;
if(date2<10)
datestr2="0"+date2;
else
datestr2=""+date2;
return year2+"-"+monstr2+"-"+datestr2;
}var gdCtrl = new Object();
var goSelectTag = new Array();
var gcGray = "#808080";
var gcToggle = "#FB8664";
var gcBG = "#e5e6ec";
var previousObject = null;var gdCurDate = new Date();
var giYear = gdCurDate.getFullYear();
var giMonth = gdCurDate.getMonth()+1;
var giDay = gdCurDate.getDate();
var giHour = gdCurDate.getHours()<10? "0"+gdCurDate.getHours():gdCurDate.getHours();
var giMinute = gdCurDate.getMinutes()<10 ? "0"+gdCurDate.getMinutes():gdCurDate.getMinutes();
var giSecond = gdCurDate.getSeconds()<10 ? "0"+gdCurDate.getSeconds():gdCurDate.getSeconds();function fSetDate(iYear, iMonth, iDay, iHour, iMinute, iSecond){
VicPopCal.style.visibility = "hidden";
var giTime = " "+ iHour +":" + iMinute + ":" + iSecond;
if ((iYear == 0) && (iMonth == 0) && (iDay == 0)){
gdCtrl.value = "";
}else{
iMonth = iMonth + 100 + "";
iMonth = iMonth.substring(1);
iDay = iDay + 100 + "";
iDay = iDay.substring(1);
if(gdCtrl.tagName == "INPUT"){
gdCtrl.value = iYear+"-"+iMonth+"-"+iDay + giTime;
}else{
gdCtrl.innerText = iYear+"-"+iMonth+"-"+iDay + giTime;
}
}
for (i in goSelectTag)
goSelectTag[i].style.visibility = "visible";
goSelectTag.length = 0;
window.returnValue=gdCtrl.value;
//window.close();}function HiddenDiv()
{
var i;
VicPopCal.style.visibility = "hidden";
for (i in goSelectTag)
goSelectTag[i].style.visibility = "visible";
goSelectTag.length = 0;}
function fSetSelected(aCell){
var iOffset = 0;
var iYear = parseInt(tbSelYear.value);
var iMonth = parseInt(tbSelMonth.value);
var iHour = tbSelHour.value;
var iMinute = tbSelMinute.value;
var iSecond = tbSelSecond.value;
aCell.bgColor = gcBG;
with (aCell.children["cellText"]){
var iDay = parseInt(innerText);
if (color==gcGray)
iOffset = (Victor<10)?-1:1;
iMonth += iOffset;
if (iMonth<1) {
iYear--;
iMonth = 12;
}else if (iMonth>12){
iYear++;
iMonth = 1;
}
}
//fSetDate(iYear, iMonth, iDay);
fSetDate(iYear, iMonth, iDay, iHour, iMinute,iSecond);
}function Point(iX, iY){
this.x = iX;
this.y = iY;
}function fBuildCal(iYear, iMonth) {
var aMonth=new Array();
for(i=1;i<7;i++)
aMonth[i]=new Array(i);
var dCalDate=new Date(iYear, iMonth-1, 1);
var iDayOfFirst=dCalDate.getDay();
var iDaysInMonth=new Date(iYear, iMonth, 0).getDate();
var iOffsetLast=new Date(iYear, iMonth-1, 0).getDate()-iDayOfFirst+1;
var iDate = 1;
var iNext = 1; for (d = 0; d < 7; d++)
aMonth[1][d] = (d<iDayOfFirst)?-(iOffsetLast+d):iDate++;
for (w = 2; w < 7; w++)
for (d = 0; d < 7; d++)
aMonth[w][d] = (iDate<=iDaysInMonth)?iDate++:-(iNext++);
return aMonth;
}function fDrawCal(iYear, iMonth, iCellHeight, sDateTextSize) {
var WeekDay = new Array("日","一","二","三","四","五","六");
var styleTD = " bgcolor='"+gcBG+"' bordercolor='"+gcBG+"' valign='middle' align='center' height='"+iCellHeight+"' style='font:bold arial "+sDateTextSize+";"; //Coded by Liming Weng(Victor Won) email:[email protected] with (document) {
write("<tr>");
for(i=0; i<7; i++){
write("<td "+styleTD+"color:#990099' >"+ WeekDay[i] + "</td>");
}
write("</tr>"); for (w = 1; w < 7; w++) {
write("<tr>");
for (d = 0; d < 7; d++) {
write("<td id=calCell "+styleTD+"cursor:hand;' onMouseOver='this.bgColor=gcToggle' onMouseOut='this.bgColor=gcBG' onclick='fSetSelected(this)'>");
write("<font id=cellText Victor='Liming Weng'> </font>");
write("</td>")
}
write("</tr>");
}
}
}
=================
function fUpdateCal(iYear, iMonth) {
myMonth = fBuildCal(iYear, iMonth);
var i = 0;
for (w = 0; w < 6; w++)
for (d = 0; d < 7; d++)
with (cellText[(7*w)+d]) {
Victor = i++;
if (myMonth[w+1][d]<0) {
color = gcGray;
innerText = -myMonth[w+1][d];
}else{
color = ((d==0)||(d==6))?"red":"black";
innerText = myMonth[w+1][d];
}
}
}function fSetYearMon(iYear, iMon){
tbSelMonth.options[iMon-1].selected = true;
for (i = 0; i < tbSelYear.length; i++)
if (tbSelYear.options[i].value == iYear)
tbSelYear.options[i].selected = true;
fUpdateCal(iYear, iMon);
}
function fSetHourMinute(iHour, iMinute,iSecond){
tbSelHour.options[iHour].selected = true;
tbSelMinute.options[iMinute].selected = true;
tbSelSecond.options[iSecond].selected = true;
//fUpdateCal(iYear, iMon);
}function fPrevMonth(){
var iMon = tbSelMonth.value;
var iYear = tbSelYear.value;
if (--iMon<1) {
iMon = 12;
iYear--;
}
fSetYearMon(iYear, iMon);
}function fNextMonth(){
var iMon = tbSelMonth.value;
var iYear = tbSelYear.value;
if (++iMon>12) {
iMon = 1;
iYear++;
}
fSetYearMon(iYear, iMon);
}function fToggleTags(){
with (document.all.tags("SELECT")){
for (i=0; i<length; i++)
if ((item(i).Victor!="Won")&&fTagInBound(item(i))){
item(i).style.visibility = "hidden";
goSelectTag[goSelectTag.length] = item(i);
}
}
}function fTagInBound(aTag){
with (VicPopCal.style){
var l = parseInt(left);
var t = parseInt(top);
var r = l+parseInt(width);
var b = t+parseInt(height);
var ptLT = fGetXY(aTag);
return !((ptLT.x>r)||(ptLT.x+aTag.offsetWidth<l)||(ptLT.y>b)||(ptLT.y+aTag.offsetHeight<t));
}
}function fGetXY(aTag){
var oTmp = aTag;
var pt = new Point(0,0);
do {
pt.x += oTmp.offsetLeft;
pt.y += oTmp.offsetTop;
oTmp = oTmp.offsetParent;
} while(oTmp.tagName!="BODY");
return pt;
}// Main: popCtrl is the widget beyond which you want this calendar to appear;
// dateCtrl is the widget into which you want to put the selected date.
// i.e.: <input type="text" name="dc" style="text-align:center" readonly><INPUT type="button" value="V" onclick="fPopCalendar(dc,dc);return false">
function fPopCalendar(popCtrl, dateCtrl,strDate){
if (popCtrl == previousObject){
if (VicPopCal.style.visibility == "visible"){
HiddenDiv();
return true;
}
}
previousObject = popCtrl;
gdCtrl = dateCtrl;
fInitialDate(strDate);
fSetYearMon(giYear, giMonth);
fSetHourMinute(giHour,giMinute,giSecond);
var point = fGetXY(popCtrl);
with (VicPopCal.style) {
left = point.x;
top = point.y+popCtrl.offsetHeight;
width = VicPopCal.offsetWidth;
width = 210; // Added by Danian Zhang/SUI
height = VicPopCal.offsetHeight;
fToggleTags(point);
visibility = 'visible';
}
}// Added by Danian Zhang/SUI
function fInitialDate(strDate){
if( strDate == null || strDate.length != 10 )
return false; var sYear = strDate.substring(0,4);
var sMonth = strDate.substring(5,7);
var sDay = strDate.substring(8,10); if( sMonth.charAt(0) == '0' ) { sMonth = sMonth.substring(1,2); }
if( sDay.charAt(0) == '0' ) { sDay = sDay.substring(1,2); } var nYear = parseInt(sYear );
var nMonth = parseInt(sMonth);
var nDay = parseInt(sDay );
if ( isNaN(nYear ) ) return false;
if ( isNaN(nMonth) ) return false;
if ( isNaN(nDay ) ) return false; var arrMon = new Array(12);
arrMon[ 0] = 31; arrMon[ 1] = nYear % 4 == 0 ? 29:28;
arrMon[ 2] = 31; arrMon[ 3] = 30;
arrMon[ 4] = 31; arrMon[ 5] = 30;
arrMon[ 6] = 31; arrMon[ 7] = 31;
arrMon[ 8] = 30; arrMon[ 9] = 31;
arrMon[10] = 30; arrMon[11] = 31; if ( nYear < 1900 || nYear > 2100 ) return false;
if ( nMonth < 1 || nMonth > 12 ) return false;
if ( nDay < 1 || nDay > arrMon[nMonth - 1] ) return false; giYear = nYear;
giMonth = nMonth;
giDay = nDay;
return true;
}var gMonths = new Array("一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一月","十二月");with (document) {
write("<Div id='VicPopCal' style='OVERFLOW:hidden;POSITION:absolute;VISIBILITY:hidden;border:2px ridge;z-index:100;'>");
write("<table border='0' bgcolor='#cccccc'>");
write("<TR>");
write("<td valign='middle' align='center'><input type='button' name='PrevMonth' value='<' style='height:20;width:20;FONT:bold' onClick='fPrevMonth()'>");
write(" <SELECT name='tbSelYear' onChange='fUpdateCal(tbSelYear.value, tbSelMonth.value)' Victor='Won'>");
for(i=giYear-20;i<giYear+30;i++)
write("<OPTION value='"+i+"'>"+i+" 年</OPTION>");
write("</SELECT>");
write(" <select name='tbSelMonth' onChange='fUpdateCal(tbSelYear.value, tbSelMonth.value)' Victor='Won'>");
for (i=0; i<12; i++)
write("<option value='"+(i+1)+"'>"+gMonths[i]+"</option>");
write("</SELECT>");
write(" <input type='button' name='PrevMonth' value='>' style='height:20;width:20;FONT:bold' onclick='fNextMonth()'>");
write("</td>");
write("</TR>");write("<tr>");
write("<td>");
write("<select valign='middle' align='center' name='tbSelHour' Victor='Won'>")
for(i=0;i<24;i++)
{
if(i<10) write("<OPTION value='0"+i+"'>0"+i+" 时</OPTION>");
else write("<OPTION value='"+i+"'>"+i+" 时</OPTION>");
}
write("</SELECT>");
write("<select valign='middle' align='center' name='tbSelMinute' Victor='Won'>")
for(i=0;i<60;i++)
{
if(i<10) write("<OPTION value='0"+i+"'>0"+i+" 分</OPTION>");
else write("<OPTION value='"+i+"'>"+i+" 分</OPTION>");
}
write("</SELECT>");
write("<select valign='middle' align='center' name='tbSelSecond' Victor='Won'>")
for(i=0;i<60;i++)
{
if(i<10) write("<OPTION value='0"+i+"'>0"+i+" 秒</OPTION>");
else write("<OPTION value='"+i+"'>"+i+" 秒</OPTION>");
}
write("</SELECT>");
write("</td>");
write("</tr>");write("<TR>");
write("<td align='center'>");
write("<DIV style='background-color:teal'><table width='100%' border='0'>");
fDrawCal(giYear, giMonth, 20, '12');
write("</table></DIV>");
write("</td>");
write("</TR><TR><TD align='center'>");
write("<TABLE width='100%'><TR><TD align='center'>");
write("<B style='cursor:hand' onclick='fSetDate(0,0,0,00,00,00)' onMouseOver='this.style.color=gcToggle' onMouseOut='this.style.color=0'>清空</B>");
write("</td><td algin='center'>");
write("<B style='cursor:hand' onclick='fSetDate(giYear,giMonth,giDay,giHour,giMinute,giSecond)' onMouseOver='this.style.color=gcToggle' onMouseOut='this.style.color=0'>今天: "+giHour+":"+giMinute+":"+giSecond+"</B>");
write("</td></tr></table>");
write("</TD></TR>");
write("</TABLE></Div>");
}
woneinwy： 和我的需求还是有很大差异的，不过很感谢！
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;
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='1' 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'/>"));
}
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'/>"));
}
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));
}
</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>
那我要点上面的刻度来回填文本框，可否实现呢
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>
<!--Added by chouchy-->
<div style="position:absolute;width:100px;top:10px;left:10px"><input type="text" id="sTime"/>
</div></body>
</html>
大家都是用了VML啊。我想用这个来选 一天中的24小时，但是表盘只有12小时怎么办呢
<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"/><!--Added -->
<select id="noonselect"><option value="AM">A.M.</option><option value="PM">P.M.</option></select><!--Added -->
</div>
</body>
</html>
然后修改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++;
}
}
通过下拉框选择AM或者片面；如果 当前时间是AM,且选择 AM的话；则指针在走；
否则只显示表盘；但是我选择第二次的时候，指针不走了，请问是怎么会事呢？下面是我改的代码，谢谢：<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;
j=0;
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
var t=document.createElement("div");
var p={//根据你的时钟大小调整坐标数值
x:Array(93,135,98,63),
y:Array(70,105,140,105)
}
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;
var dt=new Date();
var h0=dt.getHours() ;
if(h0<=12)
{
document.getElementById('noonselect').value = 'AM';
t.innerText=(i%12==0)?"12":i%12;
}
else
{
document.getElementById('noonselect').value = 'PM';
t.innerText=(i%12==0)?"24":i%12+12;
}
div1.appendChild(t);
j++;
}
}
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 init2()
{
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
var t=document.createElement("div");
var p={//根据你的时钟大小调整坐标数值
x:Array(93,135,98,63),
y:Array(70,105,140,105)
}
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;
if(document.getElementById('noonselect').value == 'AM')
{
t.innerText=(i%12==0)?"12":i%12;
}
else
{
t.innerText=(i%12==0)?"24":i%12+12;
}
div1.appendChild(t);
j++;
}
}
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
} }
function showtime()
{
var dt=new Date();
var h0=dt.getHours() ;
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;
}
function showlabel()
{
var dt=new Date();
var h=dt.getHours() ;
if((h<=12&&document.getElementById('noonselect').value == 'AM')||(h>12&&document.getElementById('noonselect').value == 'PM'))
{
init();
}
else
{
init2();
}
}
</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"/><!--Added -->
<select id="noonselect" onchange="showlabel();"><option value="AM">A.M.</option><option value="PM">P.M.</option></select><!--Added -->
</div>
</body>
</html>