分享
 
 
 

JavaScript 寫時鍾日曆

王朝html/css/js·作者佚名  2006-01-08
窄屏简体版  字體: |||超大  

另一種日曆寫法!

效率很不錯的哦。

<!--

http://dwin.net

http://dewin.tk

Copyright(c) 1998-2004 dewin all rights reserved

Start 2003-06-21 00:08

Finish 2003-06-22 02:50 Calendar

Finish 2003-06-22 15:35 Time

Finish 2003-06-22 18:55 Second Edit

Finish 2003-06-23 02:49 Last Edit

Finish 2003-06-25 10:10 emu <select>

-->

<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;height:180'>

<v:RoundRect style='position:absolute;left:0;top:0;width:180;height:180' fillcolor='white' strokecolor='#D0D0BF'>

<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)'>

<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>

<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>

<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'>

<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>

<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%'>

<script>

/*

for(i=0;i<6;i++)document.write(",&nbsp;")

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%;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)

/* 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%;height:11%;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%;height: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%;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>

<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)'>

<script>

var iHTML = "<div style='width:100%;height:9%'>"

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;height:180;text-align:center' fillcolor='white' strokecolor='#D0D0BF'>

<input id='iTime' style='position:relative;top:83%;width:60%;height:10%;font-size:9pt;border:1 solid #7F9DB9;text-align:right'>

</v:RoundRect>

<span style='position:absolute;left:3%;top:-5;width:35;height:17;font-size:9pt;background:white;color:#0046D5;text-align:center'>Date</span>

<span style='position:absolute;left:56%;top:-5;width:35;height:17;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;height: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;height:1;' strokecolor='#ACA899'/>")

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>")

/* 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>

 
 
 
免责声明:本文为网络用户发布,其观点仅代表作者个人观点,与本站无关,本站仅提供信息存储服务。文中陈述内容未经本站证实,其真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
2023年上半年GDP全球前十五强
 百态   2023-10-24
美众议院议长启动对拜登的弹劾调查
 百态   2023-09-13
上海、济南、武汉等多地出现不明坠落物
 探索   2023-09-06
印度或要将国名改为“巴拉特”
 百态   2023-09-06
男子为女友送行,买票不登机被捕
 百态   2023-08-20
手机地震预警功能怎么开?
 干货   2023-08-06
女子4年卖2套房花700多万做美容:不但没变美脸,面部还出现变形
 百态   2023-08-04
住户一楼被水淹 还冲来8头猪
 百态   2023-07-31
女子体内爬出大量瓜子状活虫
 百态   2023-07-25
地球连续35年收到神秘规律性信号,网友:不要回答!
 探索   2023-07-21
全球镓价格本周大涨27%
 探索   2023-07-09
钱都流向了那些不缺钱的人,苦都留给了能吃苦的人
 探索   2023-07-02
倩女手游刀客魅者强控制(强混乱强眩晕强睡眠)和对应控制抗性的关系
 百态   2020-08-20
美国5月9日最新疫情:美国确诊人数突破131万
 百态   2020-05-09
荷兰政府宣布将集体辞职
 干货   2020-04-30
倩女幽魂手游师徒任务情义春秋猜成语答案逍遥观:鹏程万里
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案神机营:射石饮羽
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案昆仑山:拔刀相助
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案天工阁:鬼斧神工
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案丝路古道:单枪匹马
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:与虎谋皮
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:李代桃僵
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:指鹿为马
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案金陵:小鸟依人
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案金陵:千金买邻
 干货   2019-11-12
 
推荐阅读
 
 
 
>>返回首頁<<
 
靜靜地坐在廢墟上,四周的荒凉一望無際,忽然覺得,淒涼也很美
© 2005- 王朝網路 版權所有