JS项目之数码时钟

最新推荐文章于 2022-08-18 23:41:47 发布

知途。

最新推荐文章于 2022-08-18 23:41:47 发布

阅读量171

点赞数

文章标签： js css javascript html

本文链接：https://blog.csdn.net/weixin_44465745/article/details/107336869

版权

数码时钟

代码
- 图片资源

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>数码时钟</title>
	<style>
		img {
			width:50px; 
			height:50px;
		}
	</style>
	<script>
		function toDou(n){
			if(n<10){
				return '0'+n;
			}
			else{
				return ''+n;
			}
		}
	
		window.onload=function(){
			var aImg=document.getElementsByTagName('img');
			
			function tick(){
				var oDate=new Date();
				
				var str=toDou(oDate.getHours())+toDou(oDate.getMinutes())+toDou(oDate.getSeconds());
				for(var i=0;i<aImg.length;i++)
				{
					aImg[i].src='img/'+str[i]+'.jpg';
				}
			}
			setInterval(tick,1000);
			tick();
		};
	</script>
</head>

<body style="background:black; color:while; font-size:50px;">
	<img src="img/0.jpg" />
	<img src="img/0.jpg" />
	:
	<img src="img/0.jpg" />
	<img src="img/0.jpg" />
	:
	<img src="img/0.jpg" />
	<img src="img/0.jpg" />
</body>
</html>

图片资源

在这里插入图片描述

知途。

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JS项目之数码时钟

数码时钟代码图片资源代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>数码时钟</title> <style> img { width:50px;
复制链接

扫一扫