您现在的位置是: 软件 > 设计在线 > 网页陶吧 > 技术平台 > JavaScript > 正文
·速成电脑精英(包分配)白领高薪一族从这里开始



-CorelDRAW 11抢鲜试用手记
-全Flash网站制作剖析
-Photoshop 路径手册
-C++ Builder界面设计专辑

漂亮的Javascript液晶时钟
2002-09-17· ·暖阳··天极设计在线

  相信大家都会喜欢以下效果演示中的液晶时钟,这可是用JavaScript语言和图片做出来的哦!下面让我们一起来制作吧。

  效果演示:


  制作步骤:

  1) 首先准备好13幅液晶数字的图片,它们的显示效果和名称如下表所示,你可以点击这里下载它们,并把它们放到"lcnumber"文件夹中:

(c0.gif) (c1.gif) (c2.gif) (c3.gif) (c4.gif)
(c5.gif) (c6.gif) (c7.gif) (c8.gif) (c9.gif)
(cam.gif) (cpm.gif) (colon.gif)    

  2) 现在我们开始编写JavaScript代码: <SCRIPT language="JavaScript"> <!-- var NumSrc="lcnumber/c0.gif"; //这是图片"c0.gif"的路径. /* 以下用"replace()"(字符串替换)和"eval()"(执行字符串)函数, 令变量 c0,c1,...,c9分别是图片"c0.gif","c1.gif",...,"c9.gif"的路径, 并把对应的图象预加载入缓存. "cam.gif","cpm.gif"和"colon.gif"不必预加载,因为它们的路径很少变化或不变: */ for(i=0;i<=9;i++){ eval("var c"+i+"=new Image(); c"+i+".src=NumSrc.replace('c0.gif','c'+i+'.gif');" ); } //以下写入时钟各图片,并给它们命名: document.write('<table border="0" cellspacing="0" bgcolor=black height=1><tr>'); document.write('<td><img src='+NumSrc+' id="lch1"></td>'); document.write('<td><img src='+NumSrc+' id="lch2"></td>'); document.write('<td><img src='+NumSrc.replace("c0.gif","colon.gif")+'></td>'); document.write('<td><img src='+NumSrc+' id="lcm1"></td>'); document.write('<td><img src='+NumSrc+' id="lcm2"></td>'); document.write('<td><img src='+NumSrc.replace("c0.gif","colon.gif")+'></td>'); document.write('<td><img src='+NumSrc+' id="lcs1"></td>'); document.write('<td><img src='+NumSrc+' id="lcs2"></td>'); document.write('<td><img src='+NumSrc.replace("c0.gif","cam.gif") +           ' id="lcapm"></td>'); document.write('</tr></table>'); //以下函数更改相应图片的路径,使图片的显示和当前时间相符: function timerun(){ //取得当前时间: now=new Date(); myhour=now.getHours(); myminute=now.getMinutes(); mysecond=now.getSeconds(); //判断是上午还是下午: if(myhour<12)  lcapm.src=NumSrc.replace("c0.gif","cam.gif"); else  lcapm.src=NumSrc.replace("c0.gif","cpm.gif"); if(myhour>12)  myhour-=12; //改变小时数图片: lch1.src=eval("c"+Math.floor(myhour/10)+".src"); lch2.src=eval("c"+myhour%10+".src"); //改变分钟数图片: lcm1.src=eval("c"+Math.floor(myminute/10)+".src"); lcm2.src=eval("c"+myminute%10+".src"); //改变秒钟数图片: lcs1.src=eval("c"+Math.floor(mysecond/10)+".src"); lcs2.src=eval("c"+mysecond%10+".src"); //循环运行本函数: setTimeout("timerun()",500); } timerun(); //触发"timerun()"函数的运行. //--> </script>
  现在运行一下看看,效果还挺不错吧。

【责任编辑:Shiny】
【发表评论】【关闭窗口】
■ 相关内容
 制作精美的flash桌面时钟
 体验Flash MX(8):控制时钟Timer
 Flash高级实例:精美时钟的制作(下)
 Flash高级实例:精美时钟的制作
感谢 访问天极网,如果您觉得该文章涉及版权问题,请看这里!