非常，非常漂亮的时钟日历

我不是鱼

UID: 2
帖子: 1402
积分: 3221
在线时间: 2077小时
注册时间: 2006-05-16
最后登录: 2019-01-15

1^# 我不是鱼发表于2006-08-18

非常，非常漂亮的时钟日历

提示：您可以先修改部分代码再运行

<script>var NowTime = new Date().valueOf()</script><br />
<html xmlns:v><br />
<style><br />
v\:*{behavior:url(#default#VML)}<br />
</style><br />
<br />
<br />
<body><br />
<v:group coordorigin="0,0" coordsize="360,180" onmouseover=HeightLight() onmouseout=HeightLight() style='position:absolute;left:20;top:60;width:360;height:180'><br />
<v:RoundRect style='position:absolute;left:0;top:0;width:180;height:180' fillcolor='white' strokecolor='#D0D0BF'><br />
<input id='iYears' style='position:absolute;left:53%;top:10%;width:33%;height:11%;overflow:hidden;font-size:9pt;border:1 solid #7F9DB9' onkeydown='if(event.keyCode==13)ShowDate(this.value,iMonths.selectedIndex)'><br />
<span onmouseover='this.filters.alpha.opacity=70' onmouseout='this.filters.alpha.opacity=100' style='position:absolute;left:87%;top:10%;width:9%;height:5%;background:#FFD000;overflow:hidden;filter:alpha(opacity=100);font-size:7pt;text-align:center;color:white' onclick=ShowDate(++iYears.value,iMonths.selectedIndex)>▲</span><br />
<span onmouseover='this.filters.alpha.opacity=70' onmouseout='this.filters.alpha.opacity=100' style='position:absolute;left:87%;top:16%;width:9%;height:5%;background:#FFD000;overflow:hidden;filter:alpha(opacity=100);font-size:8pt;text-align:center;color:white' onclick=ShowDate(--iYears.value,iMonths.selectedIndex)>▼</span><br />
<span style='position:absolute;left:5%;top:26%;width:90%;height:66%;border-left:1 inset #716F64;border-top:1 inset #716F64;border-right:1 inset #F1EFE2;border-bottom:1 inset #F1EFE2;overflow:hidden'><br />
  <table style='position:absolute;left:0;top:0;width:100%;height:12%;color:#D8E4F8;background:#7A96DF;font-size:9pt;text-align:center'><tr><td>S</td><td>M</td><td>T</td><td>W</td><td>T</td><td>F</td><td>S</td></tr></table><br />
  <span id='iCalendar' onclick=if(event.srcElement.nodeName=="SPAN")DayChoose(parseInt(event.srcElement.innerHTML)) style='position:absolute;left:0;top:18%;width:200%;height:82%'><br />
  <script><br />
  /*<br />
  for(i=0;i<6;i++)document.write(", ")<br />
  for(i=1;i<56;i++) document.write((i+5)%13==0?"<br>,"+(i-6*parseInt((i+5)/13)):","+(i-6*parseInt((i+5)/13)))<br />
  */<br />
<br />
  /* Calendar HTML start */<br />
  var iHTML=""<br />
  for(i=1;i<=31;i++){<br />
  iHTML+="<td><span>"+i+"</span></td>"<br />
  if(i%7==0)iHTML+="</tr><tr>"<br />
  }<br />
  iHTML+="</tr></table>"<br />
  document.write("<table style='position:absolute;left:0;top:17%;width:50%;height:85%;font-size:9pt;text-align:center;' cellSpacing=0><tr>"+iHTML+"<table style='position:absolute;left:50%;top:0;width:50%;height:85%;font-size:9pt;text-align:center;' cellSpacing=0><tr>"+iHTML)<br />
  /* Calendar HTML end */<br />
<br />
  DateArray = []<br />
  for(i=0;i<31;i++){//Collect days <td> to an Array<br />
  DateArray[i*2]=iCalendar.childNodes[1].rows[parseInt(i/7)].cells[i%7].firstChild<br />
  DateArray[i*2+1]=iCalendar.childNodes[2].rows[parseInt(i/7)].cells[i%7].firstChild<br />
  }<br />
  </script><br />
  </span><br />
</span><br />
<br />
<br />
<div style='position:absolute;left:5%;top:10%;width:44%;height:11%;border:1 solid #7F9DB9;font-size:9pt' onclick=iMonths.style.display=(iMonths.style.display=='none')?'block':'none'><br />
  <input style='position:absolute;left:0;top:0;width:100%;height:100%;border:0;font-size:9pt'><br />
  <span onmouseover='this.filters.alpha.opacity=70' onmouseout='this.filters.alpha.opacity=100' style='position:absolute;right:0;top:0;width:25%;height:100%;background:#87CEFA;filter:alpha(opacity=100);'><span style='position:absolute;top:30%;width:100%;height:100%;text-align=center;color:white'>▼</span></span><br />
  <span id=iMonths style='position:absolute;left:0;top:110%;width:100%;height:900%;background:#FFEB87;display:none;border:1 solid #ADFF2F;font-size:9pt' onmouseover="if(event.srcElement.nodeName=='DIV'){event.srcElement.style.background='#FF69B4';event.srcElement.style.color='white'}" onmouseout="if(event.srcElement.nodeName=='DIV'){event.srcElement.style.background='';event.srcElement.style.color=''}" onclick='iMonths.selectedIndex=1+event.srcElement.offsetTop/event.srcElement.offsetHeight;ShowDate(iYears.value,iMonths.selectedIndex)'><br />
  <script><br />
  var iHTML = "<div style='width:100%;height:9%'>"<br />
  var MonthsArray = ["January",'February','March','April','May','June','July','Auguest','September','October','November','December']<br />
  document.write(iHTML+MonthsArray.join("</div>"+iHTML))<br />
  </script></div><br />
  </span><br />
</div><br />
<br />
<br />
</v:RoundRect><br />
<br />
<v:RoundRect style='position:absolute;left:190;top:0;width:170;height:180;text-align:center' fillcolor='white' strokecolor='#D0D0BF'><br />
<input id='iTime' style='position:relative;top:83%;width:60%;height:10%;font-size:9pt;border:1 solid #7F9DB9;text-align:right'><br />
</v:RoundRect><br />
<br />
<span style='position:absolute;left:3%;top:-5;width:35;height:17;font-size:9pt;background:white;color:#0046D5;text-align:center'>Date</span><br />
<span style='position:absolute;left:56%;top:-5;width:35;height:17;font-size:9pt;background:white;color:#0046D5;text-align:center'>Time</span><br />
<br />
<script><br />
<br />
/* Clock HTML start */<br />
function CalX(t,r,k){return parseInt(1+Math.sin(t*2*Math.PI/k)*r)}<br />
function CalY(t,r,k){return parseInt(1-Math.cos(t*2*Math.PI/k)*r)}<br />
<br />
for(i=0;i<60;i++)<br />
if(i%5 == 0) document.write("<v:rect style='position:absolute;left:"+(CalX(i,128*.48,60)+269)+";top:"+(CalY(i,128*.48,60)+72)+";width:2;height:2;' strokecolor='#00FFFF'/>")<br />
else document.write("<v:rect style='position:absolute;left:"+(CalX(i,128*.48,60)+270)+";top:"+(CalY(i,128*.48,60)+73)+";width:1;height:1;' strokecolor='#ACA899'/>")<br />
document.write("<v:group id=iMinute coordsize='128 128' coordorigin='-64 -64' style='position:absolute;left:206;top:9;width:128;height:128;'><v:polyline points='-3,1 1,-49 5,0 1,10 -3,1' strokecolor='#FF00FF' fillcolor='#FFFF00'><v:shadow on='T' type='single' color='#0000FF' opacity='0.3'/></v:polyline></v:group><v:group id=iHour coordsize='128 128' coordorigin='-64 -64' style='position:absolute;left:206;top:9;width:128;height:128;'><v:polyline points='-5,1 1,-34 7,0 1,8 -5,1' strokecolor='#FF00FF' fillcolor='#FFFF00' style='position:absolute;left:0;top:0;'><v:shadow on='T' type='single' color='#FF00FF' opacity='0.3'/></v:polyline></v:group><v:group id=iSecond coordsize='100 100' style='position:absolute;left:206;top:9;width:128;height:128;'><v:line from='50 50' to='50 10' strokecolor='#0000FF' style='position:absolute;left:0;top:0;'/></v:group>")<br />
/* Clock HTML end */<br />
<br />
setInterval(GetTime,1000)<br />
// use the rotation to control the time <group> object<br />
function GetTime(){<br />
t = new Date(NowTime+=1000) <br />
iSecond.style.rotation = t.getSeconds()*6<br />
iMinute.style.rotation = t.getMinutes()*6+t.getSeconds()/10<br />
iHour.style.rotation = t.getHours()*30+t.getMinutes()/2<br />
iTime.value = t.toLocaleString().match(/\d+:\d+/)+':'+t.getSeconds()<br />
}<br />
</script><br />
<br />
</v:group><br />
<br />
<br />
<br />
<br />
<br />
<br />
<script language="JavaScript"><br />
<br />
function ShowDate(oYear,oMonth){<br />
var oDays = new Date(oYear,oMonth,0).getDate()<br />
var oFirstDay = 7-new Date(oYear,oMonth-1).getDay()<br />
iCalendar.style.left = -iCalendar.offsetWidth*.07143*oFirstDay<br />
for(i=0;i<6;i++) DateArray[i+56].style.visibility = (parseInt(i/2)+29>oDays)?'hidden':'visible'//29->31<br />
iMonths.parentNode.firstChild.value = MonthsArray[oMonth-1];<br />
if(BackDay>oDays) DayChoose(oDays)<br />
}<br />
<br />
var BackDay = 0<br />
<br />
function DayChoose(objnum){<br />
if(BackDay==objnum) return<br />
for(i=1;i<=2;i++){<br />
if(BackDay){<br />
DateArray[BackDay*2-i].style.background = ''<br />
DateArray[BackDay*2-i].style.color = 'black'<br />
}<br />
DateArray[objnum*2-i].style.background = '#0054E3'<br />
DateArray[objnum*2-i].style.color = 'white'<br />
}<br />
BackDay = objnum<br />
}<br />
<br />
<br />
//document.write("&#",t.getMonth()+12992,"&#",t.getDate()+13279,"&#",t.getHours()+13144)<br />
function window.onload(){<br />
var t = new Date(NowTime)<br />
iYears.value = t.getFullYear()<br />
iMonths.selectedIndex = t.getMonth()+1<br />
setTimeout("ShowDate("+t.getFullYear()+","+(t.getMonth()+1)+")",10)<br />
DayChoose(t.getDate())<br />
}<br />
<br />
<br />
<br />
<br />
function HeightLight(){<br />
var obj = event.srcElement<br />
var obj2 = event.fromElement<br />
if(obj.nodeName=="INPUT"){<br />
obj.style.color = 'white'<br />
obj.style.background = '#FFB0F8'<br />
}<br />
if(obj2.nodeName=="INPUT"){<br />
obj2.style.color = ''<br />
obj2.style.background = ''<br />
}<br />
}<br />
<br />
<br />
<br />
<br />
window.onerror = ReturnTrue;<br />
window.onhelp = ReturnFalse;<br />
document.ondragstart = ReturnFalse;<br />
document.oncontextmenu = ReturnFalse;<br />
document.onselectstart = ReturnFalse;<br />
<br />
function document.onkeydown(){<br />
with(event){<br />
if((keyCode&&(event.ctrlKey||altKey)) || (keyCode>=112 && keyCode<=123)){<br />
keyCode = 0;<br />
ReturnFalse();<br />
}<br />
}<br />
}<br />
<br />
<br />
function ReturnTrue(){<br />
event.returnValue = true;<br />
}<br />
<br />
function ReturnFalse(){<br />
event.returnValue = false;<br />
}<br />
</script>

提示：您可以先修改部分代码再运行

如履薄冰