📄 有阴影的钟表-javascript实例.htm
字号:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<!-- saved from url=(0067)http://www.hongen.com/pc/homepage/javascript/sample/showldclock.htm -->
<HTML><HEAD><TITLE>洪恩在线 - Javascript实例</TITLE>
<META http-equiv=Content-Type content="text/html; charset=gb2312"><LINK
href="有阴影的钟表-Javascript实例.files/home.css" rel=stylesheet>
<META content=电脑乐园,电脑,乐园,交互教程,交互,教程,教育,javascript,javascript实例,网页制作
name=keywords><LINK href="有阴影的钟表-Javascript实例.files/homepage.css"
rel=stylesheet>
<SCRIPT language=javaScript>if(document.layers){ alert("此效果在Netscape浏览器中不能实现！");}</SCRIPT>
<STYLE type=text/css>.time {
FONT-WEIGHT: bold; FONT-SIZE: 18pt; COLOR: #ff0000; FONT-FAMILY: Comic Sans Ms
}
</STYLE>
<SCRIPT language=JavaScript>var ctimer;function init(){if (document.all){tim2.style.left=tim1.style.posLeft;tim2.style.top=tim1.style.posTop+tim1.offsetHeight-6;settimes();}}function settimes(){var time= new Date();hours= time.getHours();mins= time.getMinutes();secs= time.getSeconds();if (hours<10)hours="0"+hours;if(mins<10)mins="0"+mins;if (secs<10)secs="0"+secs;tim1.innerHTML=hours+":"+mins+":"+secstim2.innerHTML=hours+":"+mins+":"+secsctimer=setTimeout('settimes()',960);}</SCRIPT>
<META content="MSHTML 6.00.2600.0" name=GENERATOR></HEAD>
<BODY bgColor=#ffffff onload=init()>
<SCRIPT language=Javascript src="有阴影的钟表-Javascript实例.files/head.js"></SCRIPT>
<TABLE height=20 cellSpacing=0 cellPadding=0 width=760 align=center border=0>
<TBODY>
<TR bgColor=#cfdfff>
<TD class=p1 align=left height=20><IMG height=8
src="有阴影的钟表-Javascript实例.files/blank.gif" width=12><FONT
color=#000000><FONT color=#ff9966>当前位置</FONT>：<A class=under
href="http://www.hongen.com/default.htm">洪恩在线</A> -> <A class=under
href="http://www.hongen.com/pc/index.htm">电脑乐园</A> ->
JavaScript实例</FONT></TD></TR></TBODY></TABLE>
<TABLE cellSpacing=0 cellPadding=0 width=760 align=center border=0>
<TBODY>
<TR>
<TD vAlign=top width=207><IMG height=13
src="有阴影的钟表-Javascript实例.files/bule.gif" width=207></TD>
<TD width=1 bgColor=#a8a8ab><IMG height=1
src="E:\杨勇\Web程序设计课件\有阴影的钟表-Javascript实例.files\blank(1).gif" width=1></TD>
<TD align=right width=530 height=22><IMG height=20
src="有阴影的钟表-Javascript实例.files/js.gif" width=186></TD>
<TD width=22><IMG height=1
src="E:\杨勇\Web程序设计课件\有阴影的钟表-Javascript实例.files\blank(1).gif"
width=1></TD></TR></TBODY></TABLE>
<TABLE cellSpacing=0 cellPadding=0 width=760 align=center border=0>
<TBODY>
<TR>
<TD width=124><IMG height=1
src="E:\杨勇\Web程序设计课件\有阴影的钟表-Javascript实例.files\blank(1).gif" width=1></TD>
<TD width=636 background=有阴影的钟表-Javascript实例.files/line.gif height=27><IMG
height=1 src="E:\杨勇\Web程序设计课件\有阴影的钟表-Javascript实例.files\blank(1).gif"
width=1></TD></TR></TBODY></TABLE>
<TABLE cellSpacing=0 cellPadding=0 width=760 align=center border=0>
<TBODY>
<TR>
<TD class=p3 align=middle width=711><B> 有阴影的钟表</B></TD>
<TD width=1 bgColor=#a8a8ab><IMG height=1
src="E:\杨勇\Web程序设计课件\有阴影的钟表-Javascript实例.files\blank(1).gif" width=1></TD>
<TD class=p2 width=48><IMG height=1
src="E:\杨勇\Web程序设计课件\有阴影的钟表-Javascript实例.files\blank(1).gif"
width=1></TD></TR></TBODY></TABLE>
<TABLE cellSpacing=0 cellPadding=0 width=760 align=center border=0>
<TBODY>
<TR>
<TD vAlign=top align=middle> </TD>
<TD> </TD>
<TD align=middle width=28 bgColor=#5f74bf><IMG height=49
src="有阴影的钟表-Javascript实例.files/bule1.gif" width=28></TD>
<TD align=middle width=37> </TD></TR>
<TR>
<TD vAlign=top align=middle>
<TABLE cellSpacing=0 cellPadding=0 width="100%" border=0>
<TBODY>
<TR align=middle>
<TD>
<TABLE cellSpacing=0 cellPadding=0 width=110 border=0>
<TBODY>
<TR align=middle bgColor=#5f74bf>
<TD class=p1 align=right><B><FONT color=#ffffff>效 果 演
示</FONT></B><FONT color=#ffffff>：</FONT></TD>
<TD class=p1 width=11><IMG height=18
src="有阴影的钟表-Javascript实例.files/bule2.gif"
width=11></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></TD>
<TD>
<P> </P>
<P> </P>
<DIV class=time id=tim1
style="LEFT: 411px; WIDTH: 10px; POSITION: absolute; TOP: 300px; HEIGHT: 10px"></DIV>
<DIV class=time id=tim2
style="FILTER: flipv() alpha(opacity=40); FONT-STYLE: italic; POSITION: absolute"></DIV>
</TD>
<TD align=middle width=28 bgColor=#5f74bf> </TD>
<TD align=middle width=37> </TD></TR>
<TR>
<TD vAlign=top align=middle>
<TABLE cellSpacing=0 cellPadding=0 width="100%" border=0>
<TBODY>
<TR>
<TD height=30> </TD></TR>
<TR align=middle>
<TD>
<TABLE cellSpacing=0 cellPadding=0 width=110 border=0>
<TBODY>
<TR align=middle bgColor=#5f74bf>
<TD class=p1 align=right><B><FONT
color=#ffffff>源代码如下</FONT></B><FONT color=#ffffff>：</FONT></TD>
<TD class=p1 width=11><IMG height=18
src="有阴影的钟表-Javascript实例.files/bule2.gif"
width=11></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></TD>
<TD class=p2 vAlign=top width=457><B><BR><BR></B><SPAN class=p1><FONT
color=#6633ff><BR>这段程序放在<head>与</head>之间</FONT></SPAN><BR>
<FORM>
<P><TEXTAREA onmouseover=this.focus() style="BACKGROUND-COLOR: #d5e9fd" onfocus=this.select() name=textarea rows=12 wrap=VIRTUAL cols=50><style type="text/css">
<!--
.time{
font-family : Comic Sans Ms;
font-size : 18pt;
font-weight : bold;
color: #00008D;
}
-->
</style>
<script Language="JavaScript">
var ctimer;
function init(){
if (document.all){
tim2.style.left=tim1.style.posLeft;
tim2.style.top=tim1.style.posTop+tim1.offsetHeight-6;
settimes();
}
}
function settimes(){
var time= new Date();
hours= time.getHours();
mins= time.getMinutes();
secs= time.getSeconds();
if (hours<10)
hours="0"+hours;
if(mins<10)
mins="0"+mins;
if (secs<10)
secs="0"+secs;
tim1.innerHTML=hours+":"+mins+":"+secs
tim2.innerHTML=hours+":"+mins+":"+secs
ctimer=setTimeout('settimes()',960);
}
</script></TEXTAREA> </P>
<P><SPAN class=p1><FONT
color=#6633ff>这段程序放在<body>与</body>之间</FONT></SPAN></P>
<P><TEXTAREA onmouseover=this.focus() style="BACKGROUND-COLOR: #d5e9fd" onfocus=this.select() name=textarea2 rows=12 wrap=VIRTUAL cols=50><div Id="tim1" Style="position:absolute; width:10; height:10; top:10; left:50"
class="time"></div>
<div Id="tim2" Style="position:absolute; filter:flipv() alpha(opacity=40); font-style:italic"
class="time"></div>
<div Id="instructions"
</div></TEXTAREA> </P>
<P><SPAN class=p1><FONT color=#6633ff>这段程序放在<body
****>里</FONT></SPAN></P>
<P><TEXTAREA onmouseover=this.focus() style="BACKGROUND-COLOR: #d5e9fd" onfocus=this.select() name=textarea3 rows=1 wrap=VIRTUAL cols=50>onLoad="init()"</TEXTAREA>
</P></FORM><BR></TD>
<TD align=middle width=28 bgColor=#5f74bf> </TD>
<TD align=middle width=37> </TD></TR>
<TR>
<TD vAlign=bottom align=middle>
<TABLE cellSpacing=0 cellPadding=0 width=238 border=0>
<TBODY>
<TR align=middle>
<TD>
<TABLE class=p2 cellSpacing=0 cellPadding=0 width=110 border=0>
<TBODY>
<TR align=middle bgColor=#5f74bf>
<TD class=p1 align=right><B><FONT
color=#ffffff>源程序讲解：</FONT></B></TD>
<TD class=p1 width=11><IMG height=18
src="有阴影的钟表-Javascript实例.files/bule2.gif"
width=11></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></TD>
<TD class=p2 vAlign=top width=457> </TD>
<TD align=middle width=28 bgColor=#5f74bf><IMG height=49
src="有阴影的钟表-Javascript实例.files/bule1.gif" width=28></TD>
<TD align=middle width=37> </TD></TR></TBODY></TABLE>
<TABLE class=p2 cellSpacing=0 cellPadding=0 width=760 align=center border=0>
<TBODY>
<TR>
<TD class=p2 align=right width=693><BR>
<TABLE cellSpacing=0 cellPadding=0 width=650 border=0>
<TBODY>
<TR>
<TD>
<TABLE class=p2 cellSpacing=1 borderColorDark=#666666 cellPadding=1
width="100%" borderColorLight=#666666 border=1>
<TBODY>
<TR>
<TD width=337>
<P><!-- .time<BR>{ font-family : Comic Sans Ms; font-size :
18pt; font-weight : bold; color: #00008D; } -->
<BR></style><BR></P></TD>
<TD width=298>定义一些样式，如字体，字号。</TD></TR>
<TR bgColor=#cfdfff>
<TD width=337><script Language="JavaScript"> <BR>var
ctimer; <BR></TD>
<TD width=298>定义一个变量。</TD></TR>
<TR>
<TD width=337>function init()<BR>{ if (document.all){
tim2.style.left=tim1.style.posLeft;
tim2.style.top=tim1.style.posTop+<BR>tim1.offsetHeight-6;
settimes(); } } <BR></TD>
<TD width=298>定义一个函数，获得tim2的位置。</TD></TR>
<TR bgColor=#cfdfff>
<TD width=337>function settimes()<BR>{ var time= new Date();
<BR>hours= time.getHours(); <BR>mins=
time.getMinutes();<BR>secs= time.getSeconds();<BR>if
(hours<10) hours="0"+hours;<BR>if(mins<10)
mins="0"+mins; <BR>if (secs<10)
secs="0"+secs;<BR>tim1.innerHTML=<BR>hours+":"+mins+":"+secs
<BR>tim2.innerHTML=<BR>hours+":"+mins+":"+secs
ctimer=setTimeout('settimes()',960); }
<BR></script><BR></TD>
<TD width=298>定义一个函数，功能是获得当前系统的时间。</TD></TR>
<TR>
<TD width=337><div Id="tim1" Style="position:absolute;
width:10; height:10; top:10; left:50"
class="time"></div><BR></TD>
<TD width=298>定义tim1层的位置。</TD></TR>
<TR bgColor=#cfdfff>
<TD width=337><div Id="tim2" Style="position:absolute;
filter:flipv() alpha(opacity=40); font-style:italic"
class="time"></div><BR></div> </TD>
<TD
width=298>定义第二层的一些样式，如垂直翻转，透明度等。</TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE><BR><BR></TD>
<TD class=p2 width=18> </TD>
<TD class=p2 width=1 bgColor=#a8a8ab><IMG height=1
src="E:\杨勇\Web程序设计课件\有阴影的钟表-Javascript实例.files\blank(1).gif" width=1></TD>
<TD class=p2 width=48> </TD></TR></TBODY></TABLE>
<TABLE cellSpacing=0 cellPadding=0 width=760 align=center border=0>
<TBODY>
<TR bgColor=#5f74bf>
<TD> </TD></TR></TBODY></TABLE>
<P> </P></BODY></HTML>
⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -