::烟舞者::

   

------------------------------------------

-=网页设计=-

 
电子时钟
作者:半支烟  发表时间:2004-11-13

 

在网页中加入一个电子时钟还是蛮时尚的,重要运用JS函数调用已做好的图片。代码如下:

<title>电子时钟</title>
<script language="javascript">
<!--//
img = new Array()
for(var i=0; i <= 14; i++) {
img[i] = new Image()
}
img[1].src = "dg0.gif"
img[2].src = "dg1.gif"
img[3].src = "dg2.gif"
img[4].src = "dg3.gif"
img[5].src = "dg4.gif"
img[6].src = "dg5.gif"
img[7].src = "dg6.gif"
img[8].src = "dg7.gif"
img[9].src = "dg8.gif"
img[10].src = "dg9.gif"
img[11].src = "dgon.gif"
img[12].src = "dgoff.gif"
img[13].src = "dgam.gif"
img[14].src = "dgpm.gif"
var base = "dg"
var space = "space.gif" 
var per = false

function go() {
per = true
start()
}

function start() {
	if(per == true) {
var now = new Date()
var hours = now.getHours();
var ampm = (hours < 12) ? "am" : "pm"
hours = (hours > 12) ? (hours - 12) + "" : hours + ""
hours = (hours == "0") ? "12" : hours
hours = (hours < 10) ? "0" + hours : hours + ""
var minutes = now.getMinutes();
minutes = (minutes < 10) ? "0" + minutes : minutes + ""
var seconds = now.getSeconds();
seconds = (seconds < 10) ? "0" + seconds : seconds + ""
document.one.src = (hours.charAt(0)=="0") ? space : add(hours.charAt(0))
document.two.src = add(hours.charAt(1))
document.three.src = (now.getSeconds() % 2) ? add("on") : add("off")
document.four.src = add(minutes.charAt(0))
document.five.src = add(minutes.charAt(1))
document.six.src = add(ampm)
setTimeout("start()",1000)
}
}

function add(it) {
return base + it + ".gif"
}

//-->
</script>
</head>

<body bgcolor="#CCCCCC" onLoad="go()">
<br>
<br>
<center>
<table>
<tr>
<td bgcolor=black align="center" valign="middle" height=21>
<img src="space.gif" width=16 height=21 alt="clock" name="one">
<img src="space.gif" width=16 height=21 alt="clock" name="two">
<img src="space.gif" width=14 height=21 alt="clock" name="three">
<img src="space.gif" width=16 height=21 alt="clock" name="four">
<img src="space.gif" width=16 height=21 alt="clock" name="five">
<img src="space.gif" width=16 height=21 alt="clock" name="six"> 
</td>
</tr>
</table>
</body>


点这里效果演示:

----------------------------------------
 

 

半支烟发表于:JS/CSS/XHTML  


 
留言内容(共有条)


{CommentAuthor}评论说:
{CommentContent}

--- {CommentTime} {CommentUrl}


 

流年--似水


也说--几句


 来来--往往


 

 快速--登陆

*用户名:
*密   码:

 


日志--搜索


踩上--几脚

 
zzj 最新的 20 条日志
 

 

 

Designed By UBABY--2005