网页各种特效-网页特效代码_第1页
网页各种特效-网页特效代码_第2页
网页各种特效-网页特效代码_第3页
网页各种特效-网页特效代码_第4页
网页各种特效-网页特效代码_第5页
已阅读5页，还剩96页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

1、年月日时分秒的即时显示<html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312"><title>网页特效观止|JsCode.CN|-年月日时分秒的即时显示</title></head><body onload=startclock()><form name="clock"><script language="JavaScrip

2、t">var timerID = null;var timerRunning = false;function stopclock ()if(timerRunning)clearTimeout(timerID);timerRunning = false;function startclock () stopclock();showtime();function showtime () var now = new Date();var hours = now.getHours();var minutes = now.getMinutes();var seconds = now.g

3、etSeconds()var timeValue = now.getYear()+"年"+(now.getMonth()+1)+"月"+now.getDate()+"日" +(hours >= 12) ? " 下午 " : " 上午 " )timeValue += (hours >12) ? hours -12 :hours)timeValue += (minutes < 10) ? ":0" : ":") + minutestimeVa

4、lue += (seconds < 10) ? ":0" : ":") + secondsdocument.clock.thetime.value = timeValue;timerID = setTimeout("showtime()",1000);timerRunning = true;</script><input name="thetime" style="font-size: 9pt;color:#000000;border:1px solid #FFFFFF; ; &q

5、uot; size="28"></form></body></html>外圈是年月日内圈为JavaScript时钟<html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312"><title>网页特效|-外圈是年月日内圈为JavaScript时钟</title><SCRIPT language=JavaScript>/clock

6、dCol='000000'/date colour.fCol='6666FF'/face colour.sCol='000000'/seconds colour.mCol='000000'/minutes colour.hCol='000000'/hours colour.ClockHeight=40;ClockWidth=40;ClockFromMouseY=0;ClockFromMouseX=100;/Alter nothing below! Alignments will be lost!d=new Arra

7、y("SUNDAY","MONDAY","TUESDAY","WEDNSEDAY","THURSDAY","FRIDAY","SATURDAY");m=new Array("JANUARY","FEBRUARY","MARCH","APRIL","MAY","JUNE","JULY","AUGUST"

8、;,"SEPTEMBER","OCTOBER","NOVEMBER","DECEMBER");date=new Date();day=date.getDate();year=date.getYear();if (year < 2000) year=year+1900;TodaysDate=" "+ddate.getDay()+" "+day+" "+mdate.getMonth()+" "+year;D=TodaysDate.sp

9、lit('');H='.'H=H.split('');M='.'M=M.split('');S='.'S=S.split('');Face='1 2 3 4 5 6 7 8 9 10 11 12'font='Arial'size=1;speed=0.6;ns=(document.layers);ie=(document.all);Face=Face.split(' ');n=Face.length;a=size*10;/ymouse=0

10、;/xmouse=0;ymouse=190;xmouse=80;scrll=0;props="<font face="+font+" size="+size+" color="+fCol+"><B>"props2="<font face="+font+" size="+size+" color="+dCol+"><B>"Split=360/n;Dsplit=360/D.length;Han

11、dHeight=ClockHeight/4.5HandWidth=ClockWidth/4.5HandY=-7;HandX=-2.5;scrll=0;step=0.06;currStep=0;y=new Array();x=new Array();Y=new Array();X=new Array();for (i=0; i < n; i+)yi=0;xi=0;Yi=0;Xi=0Dy=new Array();Dx=new Array();DY=new Array();DX=new Array();for (i=0; i < D.length; i+)Dyi=0;Dxi=0;DYi=

12、0;DXi=0if (ns)for (i=0; i < D.length; i+)document.write('<layer name="nsDate'+i+'" top=0 left=0 height='+a+' width='+a+'><center>'+props2+Di+'</font></center></layer>');for (i=0; i < n; i+)document.write('<l

13、ayer name="nsFace'+i+'" top=0 left=0 height='+a+' width='+a+'><center>'+props+Facei+'</font></center></layer>');for (i=0; i < S.length; i+)document.write('<layer name=nsSeconds'+i+' top=0 left=0 width=15 heigh

14、t=15><font face=Arial size=3 color='+sCol+'><center><b>'+Si+'</b></center></font></layer>');for (i=0; i < M.length; i+)document.write('<layer name=nsMinutes'+i+' top=0 left=0 width=15 height=15><font face=Arial

15、size=3 color='+mCol+'><center><b>'+Mi+'</b></center></font></layer>');for (i=0; i < H.length; i+)document.write('<layer name=nsHours'+i+' top=0 left=0 width=15 height=15><font face=Arial size=3 color='+hCol+'&

16、gt;<center><b>'+Hi+'</b></center></font></layer>');if (ie)document.write('<div id="Od" style="position:absolute;top:0px;left:0px"><div style="position:relative">');for (i=0; i < D.length; i+)document

17、.write('<div id="ieDate" style="position:absolute;top:0px;left:0;height:'+a+'width:'+a+'text-align:center">'+props2+Di+'</B></font></div>');document.write('</div></div>');document.write('<div id=&q

18、uot;Of" style="position:absolute;top:0px;left:0px"><div style="position:relative">');for (i=0; i < n; i+)document.write('<div id="ieFace" style="position:absolute;top:0px;left:0;height:'+a+'width:'+a+'text-align:center&qu

19、ot;>'+props+Facei+'</B></font></div>');document.write('</div></div>');document.write('<div id="Oh" style="position:absolute;top:0px;left:0px"><div style="position:relative">');for (i=0; i < H.le

20、ngth; i+)document.write('<div id="ieHours" style="position:absolute;width:16px;height:16px;font-family:Arial;font-size:16px;color:'+hCol+'text-align:center;font-weight:bold">'+Hi+'</div>');document.write('</div></div>');docu

21、ment.write('<div id="Om" style="position:absolute;top:0px;left:0px"><div style="position:relative">');for (i=0; i < M.length; i+)document.write('<div id="ieMinutes" style="position:absolute;width:16px;height:16px;font-family:

22、Arial;font-size:16px;color:'+mCol+'text-align:center;font-weight:bold">'+Mi+'</div>');document.write('</div></div>')document.write('<div id="Os" style="position:absolute;top:0px;left:0px"><div style="position

23、:relative">');for (i=0; i < S.length; i+)document.write('<div id="ieSeconds" style="position:absolute;width:16px;height:16px;font-family:Arial;font-size:16px;color:'+sCol+'text-align:center;font-weight:bold">'+Si+'</div>');docume

24、nt.write('</div></div>')/ (ns)?window.captureEvents(Event.MOUSEMOVE):0;/function Mouse(evnt)/ ymouse = (ns)?evnt.pageY+ClockFromMouseY-(window.pageYOffset):event.y+ClockFromMouseY;/ xmouse = (ns)?evnt.pageX+ClockFromMouseX:event.x+ClockFromMouseX;/(ns)?window.onMouseMove=Mouse:do

25、cument.onmousemove=Mouse;function ClockAndAssign()time = new Date ();secs = time.getSeconds();sec = -1.57 + Math.PI * secs/30;mins = time.getMinutes();min = -1.57 + Math.PI * mins/30;hr = time.getHours();hrs = -1.575 + Math.PI * hr/6+Math.PI*parseInt(time.getMinutes()/360;if (ie)Od.style.top=window.

26、document.body.scrollTop;Of.style.top=window.document.body.scrollTop;Oh.style.top=window.document.body.scrollTop;Om.style.top=window.document.body.scrollTop;Os.style.top=window.document.body.scrollTop;for (i=0; i < n; i+) var F=(ns)?document.layers'nsFace'+i:ieFacei.style; F.top=yi + Clock

27、Height*Math.sin(-1.0471 + i*Split*Math.PI/180)+scrll; F.left=xi + ClockWidth*Math.cos(-1.0471 + i*Split*Math.PI/180); for (i=0; i < H.length; i+) var HL=(ns)?document.layers'nsHours'+i:ieHoursi.style; HL.top=yi+HandY+(i*HandHeight)*Math.sin(hrs)+scrll; HL.left=xi+HandX+(i*HandWidth)*Math.

28、cos(hrs); for (i=0; i < M.length; i+) var ML=(ns)?document.layers'nsMinutes'+i:ieMinutesi.style; ML.top=yi+HandY+(i*HandHeight)*Math.sin(min)+scrll; ML.left=xi+HandX+(i*HandWidth)*Math.cos(min); for (i=0; i < S.length; i+) var SL=(ns)?document.layers'nsSeconds'+i:ieSecondsi.sty

29、le; SL.top=yi+HandY+(i*HandHeight)*Math.sin(sec)+scrll; SL.left=xi+HandX+(i*HandWidth)*Math.cos(sec); for (i=0; i < D.length; i+) var DL=(ns)?document.layers'nsDate'+i:ieDatei.style; DL.top=Dyi + ClockHeight*1.5*Math.sin(currStep+i*Dsplit*Math.PI/180)+scrll; DL.left=Dxi + ClockWidth*1.5*M

30、ath.cos(currStep+i*Dsplit*Math.PI/180); currStep-=step;function Delay()scrll=(ns)?window.pageYOffset:0;Dy0=Math.round(DY0+=(ymouse)-DY0)*speed);Dx0=Math.round(DX0+=(xmouse)-DX0)*speed);for (i=1; i < D.length; i+)Dyi=Math.round(DYi+=(Dyi-1-DYi)*speed);Dxi=Math.round(DXi+=(Dxi-1-DXi)*speed);y0=Math

31、.round(Y0+=(ymouse)-Y0)*speed);x0=Math.round(X0+=(xmouse)-X0)*speed);for (i=1; i < n; i+)yi=Math.round(Yi+=(yi-1-Yi)*speed);xi=Math.round(Xi+=(xi-1-Xi)*speed);ClockAndAssign();setTimeout('Delay()',50);if (ns|ie)window.onload=Delay;</SCRIPT></head><body></body></

32、html>很不错的一款日期输入控件，可以输入当前的时间<html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312"><title>网页特效代码|JsCode.CN|-又一款日期输入控件，可以输入当前的时间</title></head><body><form name="form1" method="post" action=

33、""> <p> <input type="text" name="textfield" onFocus="CalendarWebControl.show(this,true,this.value);"> 日期时间输入</p> <p> <input type="text" name="textfield2" onFocus="CalendarWebControl.show(this,false,this.va

34、lue);">日期输入</p></form><script language="javascript">function atCalendarControl() var calendar=this; this.calendarPad=null; this.prevMonth=null; this.nextMonth=null; this.prevYear=null; this.nextYear=null; this.goToday=null; this.calendarClose=null; this.calendarAb

35、out=null; this.head=null; this.body=null; this.today=; this.currentDate=; this.sltDate; this.target; this.source; /* 加入日历底板及阴影 */ this.addCalendarPad=function() document.write("<div id='divCalendarpad' style='position:absolute;top:100;left:0;width:255;height:187;display:none;'

36、;>"); document.write("<iframe frameborder=0 height=189 width=250></iframe>"); document.write("<div style='position:absolute;top:2;left:2;width:250;height:187;background-color:#336699;'></div>"); document.write("</div>"); cal

37、endar.calendarPad=document.all.divCalendarpad; /* 加入日历面板 */ this.addCalendarBoard=function() var BOARD=this; var divBoard=document.createElement("div"); calendar.calendarPad.insertAdjacentElement("beforeEnd",divBoard); divBoard.style.cssText="position:absolute;top:0;left:0;w

38、idth:250;height:187;border:0 outset;background-color:buttonface;" var tbBoard=document.createElement("table"); divBoard.insertAdjacentElement("beforeEnd",tbBoard); tbBoard.style.cssText="position:absolute;top:2;left:2;width:248;height:10;font-size:9pt;" tbBoard.cel

39、lPadding=0; tbBoard.cellSpacing=1; /* 设置各功能按钮的功能 */ /* Calendar About Button */ trRow = tbBoard.insertRow(0); calendar.calendarAbout=calendar.insertTbCell(trRow,0,"-","center"); calendar.calendarAbout.title="帮助 快捷键:H" calendar.calendarAbout.onclick=function()calendar.ab

40、out(); /* Calendar Head */ tbCell=trRow.insertCell(1); tbCell.colSpan=5; tbCell.bgColor="#99CCFF" tbCell.align="center" tbCell.style.cssText = "cursor:default" calendar.head=tbCell; /* Calendar Close Button */ tbCell=trRow.insertCell(2); calendar.calendarClose = calenda

41、r.insertTbCell(trRow,2,"x","center"); calendar.calendarClose.title="关闭 快捷键:ESC或X" calendar.calendarClose.onclick=function()calendar.hide(); /* Calendar PrevYear Button */ trRow = tbBoard.insertRow(1); calendar.prevYear = calendar.insertTbCell(trRow,0,"<<"

42、;,"center"); calendar.prevYear.title="上一年 快捷键:" calendar.prevYear.onmousedown=function() calendar.currentDate0-; calendar.show(calendar.target,calendar.returnTime,calendar.currentDate0+"-"+calendar.formatTime(calendar.currentDate1)+"-"+calendar.formatTime(cale

43、ndar.currentDate2),calendar.source); /* Calendar PrevMonth Button */ calendar.prevMonth = calendar.insertTbCell(trRow,1,"<","center"); calendar.prevMonth.title="上一月 快捷键:" calendar.prevMonth.onmousedown=function() calendar.currentDate1-; if(calendar.currentDate1=0) ca

44、lendar.currentDate1=12; calendar.currentDate0-; calendar.show(calendar.target,calendar.returnTime,calendar.currentDate0+"-"+calendar.formatTime(calendar.currentDate1)+"-"+calendar.formatTime(calendar.currentDate2),calendar.source); /* Calendar Today Button */ calendar.goToday = c

45、alendar.insertTbCell(trRow,2,"今天","center",3); calendar.goToday.title="选择今天 快捷键:T" calendar.goToday.onclick=function() if(calendar.returnTime) calendar.sltDate=calendar.today0+"-"+calendar.formatTime(calendar.today1)+"-"+calendar.formatTime(calendar.

46、today2)+" "+calendar.formatTime(calendar.today3)+":"+calendar.formatTime(calendar.today4) else calendar.sltDate=calendar.today0+"-"+calendar.formatTime(calendar.today1)+"-"+calendar.formatTime(calendar.today2); calendar.target.value=calendar.sltDate; calendar.

47、hide(); /calendar.show(calendar.target,calendar.today0+"-"+calendar.today1+"-"+calendar.today2,calendar.source); /* Calendar NextMonth Button */ calendar.nextMonth = calendar.insertTbCell(trRow,3,"&gt;","center"); calendar.nextMonth.title="下一月 快捷键:&qu

48、ot; calendar.nextMonth.onmousedown=function() calendar.currentDate1+; if(calendar.currentDate1=13) calendar.currentDate1=1; calendar.currentDate0+; calendar.show(calendar.target,calendar.returnTime,calendar.currentDate0+"-"+calendar.formatTime(calendar.currentDate1)+"-"+calendar.

49、formatTime(calendar.currentDate2),calendar.source); /* Calendar NextYear Button */ calendar.nextYear = calendar.insertTbCell(trRow,4,"&gt;&gt;","center"); calendar.nextYear.title="下一年 快捷键:" calendar.nextYear.onmousedown=function() calendar.currentDate0+; calenda

50、r.show(calendar.target,calendar.returnTime,calendar.currentDate0+"-"+calendar.formatTime(calendar.currentDate1)+"-"+calendar.formatTime(calendar.currentDate2),calendar.source); trRow = tbBoard.insertRow(2); var cnDateName = new Array("日","一","二",&quo

51、t;三","四","五","六"); for (var i = 0; i < 7; i+) tbCell=trRow.insertCell(i) tbCell.innerText=cnDateNamei; tbCell.align="center" tbCell.width=35; tbCell.style.cssText="cursor:default;border:1 solid #99CCCC;background-color:#99CCCC;" /* Calendar B

52、ody */ trRow = tbBoard.insertRow(3); tbCell=trRow.insertCell(0); tbCell.colSpan=7; tbCell.height=97; tbCell.vAlign="top" tbCell.bgColor="#F0F0F0" var tbBody=document.createElement("table"); tbCell.insertAdjacentElement("beforeEnd",tbBody); tbBody.style.cssText

53、="position:relative;top:0;left:0;width:245;height:103;font-size:9pt;" tbBody.cellPadding=0; tbBody.cellSpacing=1; calendar.body=tbBody; /* Time Body */ trRow = tbBoard.insertRow(4); tbCell=trRow.insertCell(0); calendar.prevHours = calendar.insertTbCell(trRow,0,"-","center&qu

54、ot;); calendar.prevHours.title="小时调整 快捷键:Home" calendar.prevHours.onmousedown=function()calendar.currentDate3-;if(calendar.currentDate3=-1) calendar.currentDate3=23;calendar.bottom.innerText=calendar.formatTime(calendar.currentDate3)+":"+calendar.formatTime(calendar.currentDate4)

55、; tbCell=trRow.insertCell(1); calendar.nextHours = calendar.insertTbCell(trRow,1,"+","center"); calendar.nextHours.title="小时调整 快捷键:End" calendar.nextHours.onmousedown=function()calendar.currentDate3+;if(calendar.currentDate3=24) calendar.currentDate3=0;calendar.bottom.i

56、nnerText=calendar.formatTime(calendar.currentDate3)+":"+calendar.formatTime(calendar.currentDate4); tbCell=trRow.insertCell(2); tbCell.colSpan=3; tbCell.bgColor="#99CCFF" tbCell.align="center" tbCell.style.cssText = "cursor:default" calendar.bottom=tbCell; tbC

57、ell=trRow.insertCell(3); calendar.prevMinutes = calendar.insertTbCell(trRow,3,"-","center"); calendar.prevMinutes.title="分钟调整 快捷键:PageUp" calendar.prevMinutes.onmousedown=function()calendar.currentDate4-;if(calendar.currentDate4=-1) calendar.currentDate4=59;calendar.bot

58、tom.innerText=calendar.formatTime(calendar.currentDate3)+":"+calendar.formatTime(calendar.currentDate4); tbCell=trRow.insertCell(4); calendar.nextMinutes = calendar.insertTbCell(trRow,4,"+","center"); calendar.nextMinutes.title="分钟调整 快捷键:PageDown" calendar.nex

59、tMinutes.onmousedown=function()calendar.currentDate4+;if(calendar.currentDate4=60) calendar.currentDate4=0;calendar.bottom.innerText=calendar.formatTime(calendar.currentDate3)+":"+calendar.formatTime(calendar.currentDate4); /* 加入功能按钮公共样式 */ this.insertTbCell=function(trRow,cellIndex,TXT,tr

60、Align,tbColSpan) var tbCell=trRow.insertCell(cellIndex); if(tbColSpan!=undefined) tbCell.colSpan=tbColSpan; var btnCell=document.createElement("button"); tbCell.insertAdjacentElement("beforeEnd",btnCell); btnCell.value=TXT; btnCell.style.cssText="width:100%;border:1 outset;b

61、ackground-color:buttonface;" btnCell.onmouseover=function() btnCell.style.cssText="width:100%;border:1 outset;background-color:#F0F0F0;" btnCell.onmouseout=function() btnCell.style.cssText="width:100%;border:1 outset;background-color:buttonface;" / btnCell.onmousedown=functi

62、on() / btnCell.style.cssText="width:100%;border:1 inset;background-color:#F0F0F0;" / btnCell.onmouseup=function() btnCell.style.cssText="width:100%;border:1 outset;background-color:#F0F0F0;" btnCell.onclick=function() btnCell.blur(); return btnCell; this.setDefaultDate=function() var dftDate=new Date(); calendar.today0=dftDate.getYear(); calenda

人人文库> 全部分类> 教育资料 > 辅导培训

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论