您的位置: 首页 > 软件教程 > Javascript教程专题 > 用JavaScript创建超酷时钟背景特效

用JavaScript创建超酷时钟背景特效

7.8分
出处:网络 时间:2011-05-04

您可能感兴趣的话题: JavaScript  

核心提示:我们经常会在页面中添加一些JavaScript代码用来显示时间。但是有时加入一些代码可能会影响页面的布局。现在给你一段代码,它将给你生成一个跳动的时钟,而且时钟是叠加在背景上的,再也不用担心布局上的问题了。

  我们经常会在页面中添加一些JavaScript代码用来显示时间。但是有时加入一些代码可能会影响页面的布局。现在给你一段代码,它将给你生成一个跳动的时钟,而且时钟是叠加在背景上的,再也不用担心布局上的问题了。

  一、把下面的代码加到<head></head>区域中:

[code]  <script language=JavaScript>
<!--//

  function clockon() {
thistime= new Date()
var hours=thistime.getHours()
var minutes=thistime.getMinutes()
var seconds=thistime.getSeconds()
if (eval(hours) <10) {hours="0"+hours}
if (eval(minutes) < 10) {minutes="0"+minutes}
if (seconds < 10) {seconds="0"+seconds}
thistime = hours+":"+minutes+":"+seconds

  if(document.all) {
bgclocknoshade.innerHTML=thistime
bgclockshade.innerHTML=thistime
}

  if(document.layers) {
document.bgclockshade.document.write(´<div id="bgclockshade" style="position:absolute;visibility:visible;font-family:Verdana;color:FFAAAAA;font-size:120px;top:10px;left:152px">´+thistime+´</div>´)
document.bgclocknoshade.document.write(´<div id="bgclocknoshade" style="position:absolute;visibility:visible;font-family:Verdana;color:DDDDDD;font-size:120px;top:10px;left:150px">´+thistime+´</div>´)
document.close()
}
var timer=setTimeout("clockon()",200)
}

  //-->
</script>
[/code][button value="复制代码"]

 

二、<body></body>直接加入如下代码:

[code]  <div id="bgclockshade" style="position:absolute;visibility:visible;font-family:Arial;color:FF8888;font-size:120px;top:102px;left:152px"></div>

  <div id="bgclocknoshade" style="position:absolute;visibility:visible;font-family:Arial;color:DDDDDD;font-size:120px;top:100px;left:150px"></div>

  
<div id="mainbody" style="position:absolute; visibility:visible">
</div>
[/code][button value="复制代码"]

 

  注:"font-size:120px"是用来设置字体的大小,color:FF8888是用来设置字体颜色的。

 

  三、最后把<body>中内容改为:

<body bgcolor="#ffffff" onLoad="clockon()">

 

  注:<body bgcolor="#ffffff" onLoad="clockon()">中的"#ffffff" 是网页的背景颜色代码,可以自行修改。

 

  提醒:该效果所显示的时钟是利用层来定位的,所以你可在Dreamweaver中移动时钟的位置;另外,时钟具有阴影效果,这些都是可以自行修改的。如果大家有什么疑问可以跟我们交流。

 

网友评论
多特网友 2014-05-03 23:32:36 回复
这个很简单,实际,很容易懂,对我很有用哟
多特网友 2013-07-04 10:06:25 回复
怎么用不起呢
多特网友 2012-12-17 11:06:32 回复
怎么不能用啊
多特网友 2013-07-04 10:06:25 回复
怎么用不起呢
多特网友 2012-12-17 11:06:32 回复
怎么不能用啊
多特网友 2014-05-03 23:32:36 回复
这个很简单,实际,很容易懂,对我很有用哟
精品软件课程
更多 >
Adobe Flash,是Macromedi... [详细]
Dreamweaver是网页制作和管理的所见... [详细]
MySQL是一个小型关系型数据库管理系统,被... [详细]
PHP是一种 HTML 内嵌式的语言,是一种... [详细]
HTML的中文叫做“超文本标记语言”。是用来... [详细]
Dreamweaver是网页制作和管理的所见... [详细]