一个基于WEB的js时间控件的实现
2007-04-19 14:45
1041 查看
主要使用了VML标记，支持IE5.5以上版本
具体实现代码：
<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=90, dkd=16, xkd=4;hkd=10//dkd时刻度长度、xkd分刻度长度
var seclen=0.8, minlen=0.6, hourlen=0.5;
j=0;
a=0;
var sh;
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)+";' strokecolor='green' strokeweight='2' fillcolor='white'/>"));
//a++;
var dt=new Date();
var h0=dt.getHours() ;
var mark=1;
if(h0<12)
{
document.getElementById('noonselect').value = 'AM';
mark=1;
}
else
{
document.getElementById('noonselect').value = 'PM';
mark=2;
}
for(var i=0;i<24;i++)
{
if(i%2==0)
{
var ang=Math.PI/6.0;var px=banj*Math.cos(i/2*ang);var py=banj*Math.sin(i/2*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='black' strokeweight='2' onclick='javascript:hh="+(i/2+3)%12+";mm=0;if(document.getElementById(/"noonselect/").value == /"PM/"){hh+=12;}'/>")); // onclick method is Added
var t=document.createElement("div");
var p={//根据你的时钟大小调整坐标数值
x:Array(93,158,98,33),
y:Array(40,105,173,105)
}
if(i%6==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(h0<12)
{
t.innerText=(i%24==0)?"12":(i/2)%12;
}
else
{
t.innerText=(i%24==0)?"24":(i/2)%12+12;
}
div1.appendChild(t);
j++;
}
}
else
{
var ang=Math.PI/12.0;var px=banj*Math.cos(i*ang);var py=banj*Math.sin(i*ang);var sca=1.0-hkd/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.5' onclick='javascript:hh="+((i-1)/2+3)%12+";mm=30;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;
var sh = parseInt((i+15)/5);
if(mark==1 &&(sh==12))
sh -=12;
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='black' strokeweight='1' onclick='javascript:hh="+sh+";mm="+(i+15)%5*12+"'/>")); // 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' />";
var dt=new Date();
var h=dt.getHours();
var m=dt.getMinutes();
hh=h;
mm=m;
showtime();
sh =setInterval("showtime();",1000);
}
function init2()
{
if(document.getElementById('noonselect').value == 'AM')
{
div1.childNodes[2].innerText="12";
div1.childNodes[9].innerText="3";
div1.childNodes[16].innerText="6";
div1.childNodes[23].innerText="9";;
}
else
{
div1.childNodes[2].innerText="24";
div1.childNodes[9].innerText="15";
div1.childNodes[16].innerText="18";
div1.childNodes[23].innerText="21";
}
div1.all.hpoint.style.display="none";
div1.all.mpoint.style.display="none";
div1.all.spoint.style.display="none";
hh=0;mm=0;
}
function init1()
{
if(document.getElementById('noonselect').value == 'AM')
{
div1.childNodes[2].innerText="12";
div1.childNodes[9].innerText="3";
div1.childNodes[16].innerText="6";
div1.childNodes[23].innerText="9";;
}
else
{
div1.childNodes[2].innerText="24";
div1.childNodes[9].innerText="15";
div1.childNodes[16].innerText="18";
div1.childNodes[23].innerText="21";
}
div1.all.hpoint.style.display="";
div1.all.mpoint.style.display="";
div1.all.spoint.style.display="";
var dt=new Date();
var h=dt.getHours();
var m=dt.getMinutes();
hh=h;
mm=m;
}
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
if(document.getElementById('noonselect').value == 'AM'&&hh>=12)
{
hh -=12;
}
else if(document.getElementById('noonselect').value == 'PM'&&hh<12)
{
hh +=12;
}
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'))
{
init1();
}
else
{
init2();
}
}
function add()
{
mm++;
}
function low()
{
mm--;
}
</script>
</head>
<body style='margin:1;cursor:default' vlink=#3732CD link='#3732CD' onload="init();">
<br>
<span style='width:250;height:250;background-color:white;border:1 solid gray;color:black;overflow:hidden'>
<p ><input type="text" id="sTime" style="width=40" readonly /><!--Added -->
<input type="button" value="+" onclick="add();">
<input type="button" value="-" onclick="low();">
<select id="noonselect" onchange="showlabel();"><option value="AM">A.M.</option><option value="PM">P.M.</option></select></p>
<div style='width:250;height:250;background-color:white;border:0 solid gray;color:black;overflow:hidden' id="div1">
</div>
</span>
</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=90, dkd=16, xkd=4;hkd=10//dkd时刻度长度、xkd分刻度长度
var seclen=0.8, minlen=0.6, hourlen=0.5;
j=0;
a=0;
var sh;
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)+";' strokecolor='green' strokeweight='2' fillcolor='white'/>"));
//a++;
var dt=new Date();
var h0=dt.getHours() ;
var mark=1;
if(h0<12)
{
document.getElementById('noonselect').value = 'AM';
mark=1;
}
else
{
document.getElementById('noonselect').value = 'PM';
mark=2;
}
for(var i=0;i<24;i++)
{
if(i%2==0)
{
var ang=Math.PI/6.0;var px=banj*Math.cos(i/2*ang);var py=banj*Math.sin(i/2*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='black' strokeweight='2' onclick='javascript:hh="+(i/2+3)%12+";mm=0;if(document.getElementById(/"noonselect/").value == /"PM/"){hh+=12;}'/>")); // onclick method is Added
var t=document.createElement("div");
var p={//根据你的时钟大小调整坐标数值
x:Array(93,158,98,33),
y:Array(40,105,173,105)
}
if(i%6==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(h0<12)
{
t.innerText=(i%24==0)?"12":(i/2)%12;
}
else
{
t.innerText=(i%24==0)?"24":(i/2)%12+12;
}
div1.appendChild(t);
j++;
}
}
else
{
var ang=Math.PI/12.0;var px=banj*Math.cos(i*ang);var py=banj*Math.sin(i*ang);var sca=1.0-hkd/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.5' onclick='javascript:hh="+((i-1)/2+3)%12+";mm=30;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;
var sh = parseInt((i+15)/5);
if(mark==1 &&(sh==12))
sh -=12;
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='black' strokeweight='1' onclick='javascript:hh="+sh+";mm="+(i+15)%5*12+"'/>")); // 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' />";
var dt=new Date();
var h=dt.getHours();
var m=dt.getMinutes();
hh=h;
mm=m;
showtime();
sh =setInterval("showtime();",1000);
}
function init2()
{
if(document.getElementById('noonselect').value == 'AM')
{
div1.childNodes[2].innerText="12";
div1.childNodes[9].innerText="3";
div1.childNodes[16].innerText="6";
div1.childNodes[23].innerText="9";;
}
else
{
div1.childNodes[2].innerText="24";
div1.childNodes[9].innerText="15";
div1.childNodes[16].innerText="18";
div1.childNodes[23].innerText="21";
}
div1.all.hpoint.style.display="none";
div1.all.mpoint.style.display="none";
div1.all.spoint.style.display="none";
hh=0;mm=0;
}
function init1()
{
if(document.getElementById('noonselect').value == 'AM')
{
div1.childNodes[2].innerText="12";
div1.childNodes[9].innerText="3";
div1.childNodes[16].innerText="6";
div1.childNodes[23].innerText="9";;
}
else
{
div1.childNodes[2].innerText="24";
div1.childNodes[9].innerText="15";
div1.childNodes[16].innerText="18";
div1.childNodes[23].innerText="21";
}
div1.all.hpoint.style.display="";
div1.all.mpoint.style.display="";
div1.all.spoint.style.display="";
var dt=new Date();
var h=dt.getHours();
var m=dt.getMinutes();
hh=h;
mm=m;
}
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
if(document.getElementById('noonselect').value == 'AM'&&hh>=12)
{
hh -=12;
}
else if(document.getElementById('noonselect').value == 'PM'&&hh<12)
{
hh +=12;
}
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'))
{
init1();
}
else
{
init2();
}
}
function add()
{
mm++;
}
function low()
{
mm--;
}
</script>
</head>
<body style='margin:1;cursor:default' vlink=#3732CD link='#3732CD' onload="init();">
<br>
<span style='width:250;height:250;background-color:white;border:1 solid gray;color:black;overflow:hidden'>
<p ><input type="text" id="sTime" style="width=40" readonly /><!--Added -->
<input type="button" value="+" onclick="add();">
<input type="button" value="-" onclick="low();">
<select id="noonselect" onchange="showlabel();"><option value="AM">A.M.</option><option value="PM">P.M.</option></select></p>
<div style='width:250;height:250;background-color:white;border:0 solid gray;color:black;overflow:hidden' id="div1">
</div>
</span>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 一个基于WEB的js时间控件的实现
- 一个基于JS日历的WebControl日历控件
- 利用JS实现Web日历控件（包括日期和时间）
- JS代码，将终端用户（Web 页面的查看者）的计算机时间置于一个按钮 Web 服务器控件上
- [J2EE]实现一个最简单的基于Servlet的web程序
- 基于jquery实现智能提示控件intellSeach.js
- 基于Java web服务器简单实现一个Servlet容器
- 基于Server-Sent Event的简单聊天室 Web 2.0时代，即时通信已经成为必不可少的网站功能，那实现Web即时通信的机制有哪些呢？在这门项目课中我们将一一介绍。最后我们将会实现一个基于Server-Sent Event和Flask简单的在线聊天室。
- 基于innerHTML中的script广告实现代码[广告全部放在一个js里面] 原创
- 基于jquery，9行js轻松实现tab控件
- 一个PDF合并操作实现类，利用iTextSharp控件实现(http://www.diybl.com/course/4_webprogram/asp.net/asp_netxl/2008109/149644.html)
- 基于JS分页控件实现简单美观仿淘宝分页按钮效果
- 一个Web页面中调用多个js脚本和梅花雨日历控件的使用
- (NodeJS学习文章收集三) node.js基于express框架搭建一个简单的注册登录Web功能
- Android基于WebView的Java和JS相互调用实现步骤，附带精简可行的DEMO
- 一个优雅的js日期时间控件
- 分享一个基于 Node.js 的 Web 开发框架 - Nokitjs
- 一个基于JS的日期选择控件
- 基于JS的WEB会议室预订拖拽式图形界面的实现
- 基于JS的WEB会议室预订拖拽式图形界面的实现