·您的位置: 首页 » 资源教程 » 发表文章 » 漂亮的Javascript液晶时钟

漂亮的Javascript液晶时钟

类别: JavaScript  评论数:1 总得分:3
    相信大家都会喜欢以下效果演示中的液晶时钟,这可是用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>

  现在运行一下看看,效果还挺满意吧。
相关附件:
  • 图片:
-= 资 源 教 程 =-
文 章 搜 索
关键词:
类型:
范围:
纯粹空间 softpure.com
Copyright © 2006-2008 暖阳制作 版权所有
QQ: 15242663 (拒绝闲聊)  Email: faisun@sina.com
 纯粹空间 - 韩国酷站|酷站欣赏|教程大全|资源下载|免费博客|美女壁纸|设计素材|技术论坛   Valid XHTML 1.0 Transitional
百度搜索 谷歌搜索 Alexa搜索 | 粤ICP备19116064号-1