打开APP
userphoto
未登录

开通VIP,畅享免费电子书等14项超值服

开通VIP
一个漂亮的页面日历+时钟_javascript_博客-java,j2ee,java框架,s...
<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(", ")
  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>

'引用http://www.52515.net:8088/file.asp?fileid=3935392672713d323030372d322d3926626f61726469643d3431

本站仅提供存储服务,所有内容均由用户发布,如发现有害或侵权内容,请点击举报
打开APP,阅读全文并永久保存 查看更多类似文章
猜你喜欢
类似文章
【热】打开小程序,算一算2024你的财运
面试官:你可以用纯 CSS 判断鼠标进入的方向吗?
╭※╯如何运用代码制作音画日志╭※╯
多张图片重叠制作大图音画代码
用代码给图片加透明边框
几组制作代码音动画的代码
代码制作大图音画教程
更多类似文章 >>
生活服务
热点新闻
分享 收藏 导长图 关注 下载文章
绑定账号成功
后续可登录账号畅享VIP特权!
如果VIP功能使用有故障,
可点击这里联系客服!

联系客服