当前位置:萝卜系统下载站 > 技术开发教程 > 详细页面

通过JS代码制作背景时钟效果

通过JS代码制作背景时钟效果

更新时间:2023-06-19 文章作者:未知 信息来源:网络 阅读次数:

编程(Programming)是编定程序的中文简称,就是让计算机代码解决某个问题,对某个计算体系规定一定的运算方式,使计算体系按照该计算方式运行,并最终得到相应结果的过程。为了使计算机能够理解(understand)人的意图,人类就必须将需解决的问题的思路、方法和手段通过计算机能够理解的形式告诉计算机,使得计算机能够根据人的指令一步一步去工作,完成某种特定的任务。这种人和计算体系之间交流的过程就是编程。

【实例名称】

通过JS代码制作背景时钟效果

【实例描述】

在页面上显示时间是网站常见的特效:本例介绍如何在页面的背景上显示时钟,以增加页面的三维效果。

【实例代码】

<html> <head> <TITLE>背景时钟-本站(www.xue51.com)</title> <script language=javaScript> function clockView() { 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("clockView()",1000); } </script>

  需要在body中添加三个div,代码如下所示: </head> <body onLoad="clockView()"> <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:dffdff;font-size:120px;top:100px;left:150px"></div> <div id="mainbody" style="position:absolute; visibility:visible"> </div> </body> </html>

【运行效果】

 背景时钟运行效果

【难点剖析】

本例的难点有两个:时间的获取与变化、三维样式显示。获取时间时,考虑到显示的美观性,需要在个位数的时间前加“o”,以转化成两位数的表示形式。因为时间是变化的,所以需要使用“setTimeout”定时器循环显示时间,注意定时器的定时单位设置为1000毫秒.正好等于一秒。三维样式主要依赖于css的定义,可参考代码中的div样式设置。

【源码下载】

为了JS代码的准确性,请点击:背景时钟 进行本实例源码下载 


使用编程语言写的程序,由于每条指令都对应计算机一个特定的基本动作,所以程序占用内存少、执行效率高。

温馨提示:喜欢本站的话,请收藏一下本站!

本类教程下载

系统下载排行

网站地图xml | 网站地图html