点滴积累【JS】---JS小功能(setInterval实现图片效果显示时间)

效果:

代码:

 1 <head runat="server">
 2     <title></title>
 3     <script type="text/javascript">
 4         function toDou(n) {
 5             if (n < 10) {
 6                 return '0' + n;
 7             }
 8             else {
 9                 return '' + n;
10             }
11         }
12         setInterval(
13         window.onload = function () {
14             var aImg = document.getElementsByTagName('img');
15             var oDate = new Date();
16             var str = toDou(oDate.getHours()) + toDou(oDate.getMinutes()) + toDou(oDate.getSeconds());
17             for (var i = 0; i < str.length; i++) {
18                 aImg[i].src = 'Images/Number1/' + str[i] + '.jpg';
19             }
20         }, 1000);
21 
22     </script>
23 </head>
24 <body style="background-color: Black;">
25     <div style="text-align: center; line-height: 600px">
26         <img src="Images/Number1/0.jpg" /><img src="Images/Number1/0.jpg" /><span style="font-size: 77px;
27             color: White; text-align: center; line-height: 2px;">:</span><img src="Images/Number1/0.jpg" /><img
28                 src="Images/Number1/0.jpg" /><span style="font-size: 77px; color: White;">:</span><img
29                     src="Images/Number1/0.jpg" /><img src="Images/Number1/0.jpg" />
30     </div>
31 </body>


 

原文地址:https://www.cnblogs.com/xinchun/p/3443626.html