| | | 漂亮的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代码： <![CDATA[
<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>
]]>
现在运行一下看看，效果还挺不错吧。
| | | 感谢
访问天极网，如果您觉得该文章涉及版权问题，请看这里！
|
|
