非常，非常漂亮的时钟日历
时间：2007-02-18 来源：PHP爱好者
提示：您可以先修改部分代码再运行 <script>var NowTime = new Date().valueOf()</script>
<html xmlns:v>
<style>
v:*{behavior:url(#default#VML)}
</style>
<body>
<v:group coordorigin="0,0" coordsize="360,180" onmouseover=HeightLight() onmouseout=HeightLight() style='position:absolute;left:20;top:60;width:360;
<v:RoundRect style='position:absolute;left:0;top:0;width:180;
<input id='iYears' style='position:absolute;left:53%;top:10%;width:33%;overflow:hidden;font-size:9pt;border:1 solid #7F9DB9' onkeydown='if(event.keyCode==13)ShowDate(this.value,iMonths.selectedIndex)'>
<span onmouseover='this.filters.alpha.opacity=70' onmouseout='this.filters.alpha.opacity=100' style='position:absolute;left:87%;top:10%;width:9%;background:#FFD000;overflow:hidden;filter:alpha(opacity=100);font-size:7pt;text-align:center;color:white' onclick=ShowDate(++iYears.value,iMonths.selectedIndex)>▲</span>
<span onmouseover='this.filters.alpha.opacity=70' onmouseout='this.filters.alpha.opacity=100' style='position:absolute;left:87%;top:16%;width:9%;background:#FFD000;overflow:hidden;filter:alpha(opacity=100);font-size:8pt;text-align:center;color:white' onclick=ShowDate(--iYears.value,iMonths.selectedIndex)>▼</span>
<span style='position:absolute;left:5%;top:26%;width:90%;border-left:1 inset #716F64;border-top:1 inset #716F64;border-right:1 inset #F1EFE2;border-bottom:1 inset #F1EFE2;overflow:hidden'>
<table style='position:absolute;left:0;top:0;width:100%;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>
<span id='iCalendar' onclick=if(event.srcElement.nodeName=="SPAN")DayChoose(parseInt(event.srcElement.innerHTML)) style='position:absolute;left:0;top:18%;width:200%;
<script>
/*
for(i=0;i<6;i++)document.write(", ")
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)))
*/
/* Calendar HTML start */
var iHTML=""
for(i=1;i<=31;i++){
iHTML+="<td><span>"+i+"</span></td>"
if(i%7==0)iHTML+="</tr><tr>"
}
iHTML+="</tr></table>"
document.write("<table style='position:absolute;left:0;top:17%;width:50%;font-size:9pt;text-align:center;' cellSpacing=0><tr>"+iHTML+"<table style='position:absolute;left:50%;top:0;width:50%;font-size:9pt;text-align:center;' cellSpacing=0><tr>"+iHTML)
/* Calendar HTML end */
DateArray = []
for(i=0;i<31;i++){//Collect days <td> to an Array
DateArray[i*2]=iCalendar.childNodes[1].rows[parseInt(i/7)].cells[i%7].firstChild
DateArray[i*2+1]=iCalendar.childNodes[2].rows[parseInt(i/7)].cells[i%7].firstChild
}
</script>
</span>
</span>
<!-- emu the <select> start -->
<div style='position:absolute;left:5%;top:10%;width:44%;border:1 solid #7F9DB9;font-size:9pt' onclick=iMonths.style.display=(iMonths.style.display=='none')?'block':'none'>
<input style='position:absolute;left:0;top:0;width:100%;border:0;font-size:9pt'>
<span onmouseover='this.filters.alpha.opacity=70' onmouseout='this.filters.alpha.opacity=100' style='position:absolute;right:0;top:0;width:25%;background:#87CEFA;filter:alpha(opacity=100);'><span style='position:absolute;top:30%;width:100%;text-align=center;color:white'>▼</span></span>
<span id=iMonths style='position:absolute;left:0;top:110%;width:100%;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)'>
<script>
var iHTML = "<div style='width:100%;"
var MonthsArray = ["January",'February','March','April','May','June','July','Auguest','September','October','November','December']
document.write(iHTML+MonthsArray.join("</div>"+iHTML))
</script></div>
</span>
</div>
<!-- emu the <select> end -->
</v:RoundRect>
<v:RoundRect style='position:absolute;left:190;top:0;width:170;text-align:center' fillcolor='white' strokecolor='#D0D0BF'>
<input id='iTime' style='position:relative;top:83%;width:60%;font-size:9pt;border:1 solid #7F9DB9;text-align:right'>
</v:RoundRect>
<span style='position:absolute;left:3%;top:-5;width:35;font-size:9pt;background:white;color:#0046D5;text-align:center'>Date</span>
<span style='position:absolute;left:56%;top:-5;width:35;font-size:9pt;background:white;color:#0046D5;text-align:center'>Time</span>
<script>
/* Clock HTML start */
function CalX(t,r,k){return parseInt(1+Math.sin(t*2*Math.PI/k)*r)}
function CalY(t,r,k){return parseInt(1-Math.cos(t*2*Math.PI/k)*r)}
for(i=0;i<60;i++)
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;' strokecolor='#00FFFF'/>")
else document.write("<v:rect style='position:absolute;left:"+(CalX(i,128*.48,60)+270)+";top:"+(CalY(i,128*.48,60)+73)+";width:1;' strokecolor='#ACA899'/>")
document.write("<v:group id=iMinute coordsize='128 128' coordorigin='-64 -64' style='position:absolute;left:206;top:9;width: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;'><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;'><v:line from='50 50' to='50 10' strokecolor='#0000FF' style='position:absolute;left:0;top:0;'/></v:group>")
/* Clock HTML end */
setInterval(GetTime,1000)
// use the rotation to control the time <group> object
function GetTime(){
t = new Date(NowTime+=1000)
iSecond.style.rotation = t.getSeconds()*6
iMinute.style.rotation = t.getMinutes()*6+t.getSeconds()/10
iHour.style.rotation = t.getHours()*30+t.getMinutes()/2
iTime.value = t.toLocaleString().match(/d+:d+/)+':'+t.getSeconds()
}
</script>
</v:group>
<script language="JavaScript">
function ShowDate(oYear,oMonth){
var oDays = new Date(oYear,oMonth,0).getDate()
var oFirstDay = 7-new Date(oYear,oMonth-1).getDay()
iCalendar.style.left = -iCalendar.offsetWidth*.07143*oFirstDay
for(i=0;i<6;i++) DateArray[i+56].style.visibility = (parseInt(i/2)+29>oDays)?'hidden':'visible'//29->31
iMonths.parentNode.firstChild.value = MonthsArray[oMonth-1];
if(BackDay>oDays) DayChoose(oDays)
}
var BackDay = 0
function DayChoose(objnum){
if(BackDay==objnum) return
for(i=1;i<=2;i++){
if(BackDay){
DateArray[BackDay*2-i].style.background = ''
DateArray[BackDay*2-i].style.color = 'black'
}
DateArray[objnum*2-i].style.background = '#0054E3'
DateArray[objnum*2-i].style.color = 'white'
}
BackDay = objnum
}
//document.write("&#",t.getMonth()+12992,"&#",t.getDate()+13279,"&#",t.getHours()+13144)
function window.onload(){
var t = new Date(NowTime)
iYears.value = t.getFullYear()
iMonths.selectedIndex = t.getMonth()+1
setTimeout("ShowDate("+t.getFullYear()+","+(t.getMonth()+1)+")",10)
DayChoose(t.getDate())
}
function HeightLight(){
var obj = event.srcElement
var obj2 = event.fromElement
if(obj.nodeName=="INPUT"){
obj.style.color = 'white'
obj.style.background = '#FFB0F8'
}
if(obj2.nodeName=="INPUT"){
obj2.style.color = ''
obj2.style.background = ''
}
}
window.onerror = ReturnTrue;
window.onhelp = ReturnFalse;
document.ondragstart = ReturnFalse;
document.oncontextmenu = ReturnFalse;
document.onselectstart = ReturnFalse;
function document.onkeydown(){
with(event){
if((keyCode&&(event.ctrlKey||altKey)) || (keyCode>=112 && keyCode<=123)){
keyCode = 0;
ReturnFalse();
}
}
}
function ReturnTrue(){
event.returnValue = true;
}
function ReturnFalse(){
event.returnValue = false;
}
</script>
提示：您可以先修改部分代码再运行
<html xmlns:v>
<style>
v:*{behavior:url(#default#VML)}
</style>
<body>
<v:group coordorigin="0,0" coordsize="360,180" onmouseover=HeightLight() onmouseout=HeightLight() style='position:absolute;left:20;top:60;width:360;
<v:RoundRect style='position:absolute;left:0;top:0;width:180;
<input id='iYears' style='position:absolute;left:53%;top:10%;width:33%;overflow:hidden;font-size:9pt;border:1 solid #7F9DB9' onkeydown='if(event.keyCode==13)ShowDate(this.value,iMonths.selectedIndex)'>
<span onmouseover='this.filters.alpha.opacity=70' onmouseout='this.filters.alpha.opacity=100' style='position:absolute;left:87%;top:10%;width:9%;background:#FFD000;overflow:hidden;filter:alpha(opacity=100);font-size:7pt;text-align:center;color:white' onclick=ShowDate(++iYears.value,iMonths.selectedIndex)>▲</span>
<span onmouseover='this.filters.alpha.opacity=70' onmouseout='this.filters.alpha.opacity=100' style='position:absolute;left:87%;top:16%;width:9%;background:#FFD000;overflow:hidden;filter:alpha(opacity=100);font-size:8pt;text-align:center;color:white' onclick=ShowDate(--iYears.value,iMonths.selectedIndex)>▼</span>
<span style='position:absolute;left:5%;top:26%;width:90%;border-left:1 inset #716F64;border-top:1 inset #716F64;border-right:1 inset #F1EFE2;border-bottom:1 inset #F1EFE2;overflow:hidden'>
<table style='position:absolute;left:0;top:0;width:100%;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>
<span id='iCalendar' onclick=if(event.srcElement.nodeName=="SPAN")DayChoose(parseInt(event.srcElement.innerHTML)) style='position:absolute;left:0;top:18%;width:200%;
<script>
/*
for(i=0;i<6;i++)document.write(", ")
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)))
*/
/* Calendar HTML start */
var iHTML=""
for(i=1;i<=31;i++){
iHTML+="<td><span>"+i+"</span></td>"
if(i%7==0)iHTML+="</tr><tr>"
}
iHTML+="</tr></table>"
document.write("<table style='position:absolute;left:0;top:17%;width:50%;font-size:9pt;text-align:center;' cellSpacing=0><tr>"+iHTML+"<table style='position:absolute;left:50%;top:0;width:50%;font-size:9pt;text-align:center;' cellSpacing=0><tr>"+iHTML)
/* Calendar HTML end */
DateArray = []
for(i=0;i<31;i++){//Collect days <td> to an Array
DateArray[i*2]=iCalendar.childNodes[1].rows[parseInt(i/7)].cells[i%7].firstChild
DateArray[i*2+1]=iCalendar.childNodes[2].rows[parseInt(i/7)].cells[i%7].firstChild
}
</script>
</span>
</span>
<!-- emu the <select> start -->
<div style='position:absolute;left:5%;top:10%;width:44%;border:1 solid #7F9DB9;font-size:9pt' onclick=iMonths.style.display=(iMonths.style.display=='none')?'block':'none'>
<input style='position:absolute;left:0;top:0;width:100%;border:0;font-size:9pt'>
<span onmouseover='this.filters.alpha.opacity=70' onmouseout='this.filters.alpha.opacity=100' style='position:absolute;right:0;top:0;width:25%;background:#87CEFA;filter:alpha(opacity=100);'><span style='position:absolute;top:30%;width:100%;text-align=center;color:white'>▼</span></span>
<span id=iMonths style='position:absolute;left:0;top:110%;width:100%;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)'>
<script>
var iHTML = "<div style='width:100%;"
var MonthsArray = ["January",'February','March','April','May','June','July','Auguest','September','October','November','December']
document.write(iHTML+MonthsArray.join("</div>"+iHTML))
</script></div>
</span>
</div>
<!-- emu the <select> end -->
</v:RoundRect>
<v:RoundRect style='position:absolute;left:190;top:0;width:170;text-align:center' fillcolor='white' strokecolor='#D0D0BF'>
<input id='iTime' style='position:relative;top:83%;width:60%;font-size:9pt;border:1 solid #7F9DB9;text-align:right'>
</v:RoundRect>
<span style='position:absolute;left:3%;top:-5;width:35;font-size:9pt;background:white;color:#0046D5;text-align:center'>Date</span>
<span style='position:absolute;left:56%;top:-5;width:35;font-size:9pt;background:white;color:#0046D5;text-align:center'>Time</span>
<script>
/* Clock HTML start */
function CalX(t,r,k){return parseInt(1+Math.sin(t*2*Math.PI/k)*r)}
function CalY(t,r,k){return parseInt(1-Math.cos(t*2*Math.PI/k)*r)}
for(i=0;i<60;i++)
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;' strokecolor='#00FFFF'/>")
else document.write("<v:rect style='position:absolute;left:"+(CalX(i,128*.48,60)+270)+";top:"+(CalY(i,128*.48,60)+73)+";width:1;' strokecolor='#ACA899'/>")
document.write("<v:group id=iMinute coordsize='128 128' coordorigin='-64 -64' style='position:absolute;left:206;top:9;width: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;'><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;'><v:line from='50 50' to='50 10' strokecolor='#0000FF' style='position:absolute;left:0;top:0;'/></v:group>")
/* Clock HTML end */
setInterval(GetTime,1000)
// use the rotation to control the time <group> object
function GetTime(){
t = new Date(NowTime+=1000)
iSecond.style.rotation = t.getSeconds()*6
iMinute.style.rotation = t.getMinutes()*6+t.getSeconds()/10
iHour.style.rotation = t.getHours()*30+t.getMinutes()/2
iTime.value = t.toLocaleString().match(/d+:d+/)+':'+t.getSeconds()
}
</script>
</v:group>
<script language="JavaScript">
function ShowDate(oYear,oMonth){
var oDays = new Date(oYear,oMonth,0).getDate()
var oFirstDay = 7-new Date(oYear,oMonth-1).getDay()
iCalendar.style.left = -iCalendar.offsetWidth*.07143*oFirstDay
for(i=0;i<6;i++) DateArray[i+56].style.visibility = (parseInt(i/2)+29>oDays)?'hidden':'visible'//29->31
iMonths.parentNode.firstChild.value = MonthsArray[oMonth-1];
if(BackDay>oDays) DayChoose(oDays)
}
var BackDay = 0
function DayChoose(objnum){
if(BackDay==objnum) return
for(i=1;i<=2;i++){
if(BackDay){
DateArray[BackDay*2-i].style.background = ''
DateArray[BackDay*2-i].style.color = 'black'
}
DateArray[objnum*2-i].style.background = '#0054E3'
DateArray[objnum*2-i].style.color = 'white'
}
BackDay = objnum
}
//document.write("&#",t.getMonth()+12992,"&#",t.getDate()+13279,"&#",t.getHours()+13144)
function window.onload(){
var t = new Date(NowTime)
iYears.value = t.getFullYear()
iMonths.selectedIndex = t.getMonth()+1
setTimeout("ShowDate("+t.getFullYear()+","+(t.getMonth()+1)+")",10)
DayChoose(t.getDate())
}
function HeightLight(){
var obj = event.srcElement
var obj2 = event.fromElement
if(obj.nodeName=="INPUT"){
obj.style.color = 'white'
obj.style.background = '#FFB0F8'
}
if(obj2.nodeName=="INPUT"){
obj2.style.color = ''
obj2.style.background = ''
}
}
window.onerror = ReturnTrue;
window.onhelp = ReturnFalse;
document.ondragstart = ReturnFalse;
document.oncontextmenu = ReturnFalse;
document.onselectstart = ReturnFalse;
function document.onkeydown(){
with(event){
if((keyCode&&(event.ctrlKey||altKey)) || (keyCode>=112 && keyCode<=123)){
keyCode = 0;
ReturnFalse();
}
}
}
function ReturnTrue(){
event.returnValue = true;
}
function ReturnFalse(){
event.returnValue = false;
}
</script>
提示：您可以先修改部分代码再运行
相关阅读 更多 +
