【前端】手写数字时钟·教程

一颗不甘坠落的流星

已于 2024-02-19 15:22:34 修改

阅读量1.4k

点赞数 3

分类专栏：工作随记

于 2021-02-04 19:40:35 首次发布

本文链接：https://blog.csdn.net/qq_45677671/article/details/113663019

版权

js 数字时钟

工作随记专栏收录该内容

69 篇文章 3 订阅

订阅专栏

文章目录

效果图：

在这里插入图片描述

需求分析：

通过date获取时间
通过间隔定时器setInterval动态获取时间
间隔定时器setInterval间隔设置为1000毫秒（1秒）获取一次时间
为了样式好看，我们这是用数字图片来代替数字的

源代码：

HTML部分

	<div id="div">
		<img src="img/0.png" />
		<img src="img/0.png" />
		时
		<img src="img/0.png" />
		<img src="img/0.png" />
		分
		<img src="img/0.png" />
		<img src="img/0.png" />
		秒
	</div>

css部分

<style>
/*无*/    
</style>

JavaScript部分

<script>
	// 需求:数码时钟
	var date = new Date();
	var imgArr = document.getElementsByTagName('img');//获取img图片的一个集合
	var hours,minutes,seconds;
	var timre = setInterval(function () {
		date = new Date();
		// 获取小时
		hours = date.getHours();
		
		imgArr[0].src = "img/" + parseInt(hours / 10) + ".png"
		imgArr[1].src = "img/" + hours % 10 + ".png"
		// 获取分钟
		minutes = date.getMinutes();
		imgArr[2].src = "img/" + parseInt(minutes / 10) + ".png"
		imgArr[3].src = "img/" + minutes % 10 + ".png"
		// 获取秒
		seconds = date.getSeconds();
		imgArr[4].src = "img/" + parseInt(seconds / 10) + ".png"
		imgArr[5].src = "img/" + seconds % 10 + ".png"
		console.log(hours);
		console.log(minutes);
		console.log(seconds);
	}, 1000)
</script>

总代码

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
</head>
<body>
	<div id="div">
		<img src="img/0.png" />
		<img src="img/0.png" />
		时
		<img src="img/0.png" />
		<img src="img/0.png" />
		分
		<img src="img/0.png" />
		<img src="img/0.png" />
		秒
	</div>
</body>

</html>
<script>
	// 需求:数码时钟
	var date = new Date();
	var imgArr = document.getElementsByTagName('img');//获取img图片的一个集合
	var hours,minutes,seconds;
	var timre = setInterval(function () {
		date = new Date();
		// 获取小时
		hours = date.getHours();
		
		imgArr[0].src = "img/" + parseInt(hours / 10) + ".png"
		imgArr[1].src = "img/" + hours % 10 + ".png"
		// 获取分钟
		minutes = date.getMinutes();
		imgArr[2].src = "img/" + parseInt(minutes / 10) + ".png"
		imgArr[3].src = "img/" + minutes % 10 + ".png"
		// 获取秒
		seconds = date.getSeconds();
		imgArr[4].src = "img/" + parseInt(seconds / 10) + ".png"
		imgArr[5].src = "img/" + seconds % 10 + ".png"
	}, 1000)
</script>

所用图片：

在这里插入图片描述

由于你们没有图片，直接复制代码，展示不出效果，大家可以自己找几张图片来代替，稍微修改下即可，只要能看得懂代码，修改起来莫得问题啦

一颗不甘坠落的流星

关注

3
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
3
评论
【前端】手写数字时钟·教程

文章目录效果图：需求分析：源代码：所用图片：效果图：需求分析：通过date获取时间通过间隔定时器setInterval动态获取时间间隔定时器setInterval间隔设置为1000毫秒（1秒）获取一次时间为了样式好看，我们这是用数字图片来代替数字的源代码：HTML部分 <div id="div"> <img src="img/0.png" /> <img src="img/0.png" /> 时 <img src="img
复制链接

扫一扫