首页 >> 读书频道 >> 电脑 >> 用JavaScript创建超酷时钟背景特效
 
· JavaScript另类
· JavaScript通用
· 用JAVASCRIPT实
· 用JavaScript实
· 几个Javascript
· JavaScript支持
· javascript做的
· 一个通用验证javasc
· javascript 扫
· HTML文档中用Java
· Trim Functio
· Javascript的h
 
· 素质教育在美国
· 全唐诗卷四十六
· 韩剧《布拉格恋人》剧情介
· 夜航船[作者:明·张岱]
· 局外人[作者:韩·可爱淘
· 现场流行病学
· 源氏物语[日本:紫式部]
· 红楼梦:120回全本[清
· 武林寓言故事
· 2006高考录取规则
· 首批中国世界名牌产品和2
· 济南美食大全
 
· (出租)中动商场部分及写
· (出租)中动动漫基地&#
· 喜剧学院
· 《善德女王》剧情介绍
· 魔女18号 剧情
· 丑女无敌剧情介绍
· 魔女幼熙剧情介绍
· 龙游天下剧情介绍
· 震撼世界的七日剧情介绍
· 静静的白桦林剧情介绍
· 心情日记—老公今天我想对
· 旗舰剧情介绍
欢迎来到月影社区!如果您觉得这里不错,请推荐给您的朋友们。月影社区:http://wf66.com/

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


查看有无更新版本

关键字:JavaScript 2006-8-28

 

我们经常会在页面中添加一些JavaScript代码用来显示时间。但是有时加入一些代码可能会影响页面的布局。现在给你一段代码,它将给你生成一个跳动的时钟,而且时钟是叠加在背景上的,再也不用担心布局上的问题了。
一、把下面的代码加到<head></head>区域中:

<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>

二、在<body></body>直接加入如下代码:

<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>

注:"font-size:120px"是用来设置字体的大小,color:FF8888是用来设置字体颜色的。

三、最后把<body>中内容改为:

<body bgcolor="#ffffff" onLoad="clockon()">
注:<body bgcolor="#ffffff" onLoad="clockon()">中的"#ffffff" 是网页的背景颜色代码,可以自行修改。
提醒:该效果所显示的时钟是利用层来定位的,所以你可在Dreamweaver中移动时钟的位置;另外,时钟具有阴影效果,这些都是可以自行修改的。如果大家有什么疑问可以跟我们交流。

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

[ 1 ]
用JavaScript创建超酷时钟背景特效 num

打印本页 关闭

关于我们版权声明本站导航友情连结作品演示 TOP↑