图片无缝连接，动态显示时间

最新推荐文章于 2021-06-04 18:11:14 发布

原创最新推荐文章于 2021-06-04 18:11:14 发布 · 1.3k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#generator #javascript #date #html #border #function

web编程专栏收录该内容

31 篇文章

订阅专栏

本文介绍了一个使用纯JavaScript实现的数字时钟项目。该时钟能够实时更新显示当前时间，并通过更换不同的图片文件来展示时间的变化。文章展示了如何利用JavaScript操作DOM元素来实现这一功能。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> New Document </TITLE> <META NAME="Generator" CONTENT="EditPlus"> <META NAME="Author" CONTENT=""> <META NAME="Keywords" CONTENT=""> <META NAME="Description" CONTENT=""> <SCRIPT LANGUAGE="JavaScript"> function init(){ var date=new Date(); if(date.getHours()<=12){ //am var d1 = Math.floor(date.getHours()/10); var d2 = date.getHours()%10; document.images[8].src="cam.gif"; if(date.getHours()==12&&date.getSeconds()>0){//变成pm document.images[8].src="cpm.gif"; } } else { var d1 = Math.floor((date.getHours()-12)/10); var d2 = (date.getHours()-12)%10; document.images[8].src="cpm.gif"; } var m1 = Math.floor(date.getMinutes()/10); var m2 = date.getMinutes()%10; var s1 = Math.floor(date.getSeconds()/10); var s2 = date.getSeconds()%10; var str1= "c"+d1+".gif"; var str2= "c"+d2+".gif"; var str3= "c"+m1+".gif"; var str4= "c"+m2+".gif"; var str5= "c"+s1+".gif"; var str6= "c"+s2+".gif"; document.images[0].src=str1; document.images[1].src=str2; document.images[2].src="colon.gif"; document.images[3].src=str3; document.images[4].src=str4; document.images[5].src="colon.gif"; document.images[6].src=str5; document.images[7].src=str6; //document.images[8].src="cpm.gif"; setTimeout("init()",1000); } </SCRIPT> </HEAD> <BODY onload ="init()" > <br> <br> <br> <br> <center> !--> 表格图片无缝连接 <-- <table border="0" cellspacing="0" cellpadding="0"> <tr> <td> <img src="" id="1"/></td> <td> <img src="" id="2"/></td> <td> <img src="" id="3"/></td> <td> <img src="" id="4"/></td> <td> <img src="" id="5"/></td> <td> <img src="" id="6"/></td> <td> <img src="" id="7"/></td> <td> <img src="" id="8"/></td> <td> <img src="" id="9"/></td> </tr> </table> </center> </BODY> </HTML>