D3------实时更新时间

D3.js 实现实时更新时间教程

最新推荐文章于 2024-07-10 11:49:32 发布

原创最新推荐文章于 2024-07-10 11:49:32 发布 · 420 阅读

1 ·

CC 4.0 BY-SA版权

D3 专栏收录该内容

6 篇文章

订阅专栏

本文通过五个步骤详细介绍了如何使用D3.js在网页上实现实时更新时间的功能，包括添加画布、获取时间、显示时间、添加样式以及创建实时更新函数。重点提到了setInterval()函数的正确使用方法，以确保时间每秒更新一次。

一：实现效果

具体的实现效果如上图所示，时分秒都以两位数显示。

二：代码分析

在网页上实时显示时间目前我知道的有两种方法：一种是用JQuery，另一种就是使用D3。JQuery忘的差不多了，所以就不贴代码了。

使用D3实时更新的步骤：

（1）添加画布。（使用D3添加图形或者文本这一步可以说是必不可少的）

<script>
			var width=500;
			var height=500;
			var svg=d3.select("body").append("svg")
						.attr("width",width)
						.attr("height",height);
		</script>

（2）获取时间。（因为要做的是实时更新时间，所以把获取时间放到一个函数里面代码会比较简洁）

<script>
			function getTime(){
				var time=new Date();
				var hours=time.getHours();
				var minutes=time.getMinutes();
				var seconds=time.getSeconds();
				hours=hours<10?"0"+hours:hours;
				minutes=minutes<10?"0"+minutes:minutes;
				seconds=seconds<10?"0"+seconds:seconds;
				return hours+":"+minutes+":"+seconds;
			}
			
		</script>

（3）显示时间。（获取到时间自然就要显示出来看获取的是否是想要的）

<script>
			var timeText=svg.append("text")
				.attr("x",100)
				.attr("y",100)
				.text(getTime());
		</script>

这样我们就能看到画布上显示出一个时间了。如下图：

时间获取到了，但是显示出来的是不是太小了。为了更加美观，可以添加样式。

（4）添加样式。（添加样式之后一定要应用样式）

<style>
			.time{
				font-family: sans-serif;
				font-size: 40px;
				stroke: black;
				stroke-width: 2px;
			}
		</style>

再次看一下展示效果，

那么再次出现一个问题，出现的时间是固定的，并不是实时更新的。所以就要写一个可以实时更新时间的函数。

（5）实时更新函数。（也就是将实时获取的时间显示到文本上）

<script>
			function updateTime(){
				timeText.text(getTime());
			}
			//实时更新，每秒更新一次
			setInterval(updateTime,1000);
		</script>

至此，就可以实时更新时间了。

全部代码展示如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="d3.js"></script>
		<style>
			.time{
				font-family: sans-serif;
				font-size: 40px;
				stroke: black;
				stroke-width: 2px;
			}
		</style>
	</head>
	<body>
		<script>
			//添加画布
			var width=500;
			var height=500;
			var svg=d3.select("body").append("svg")
						.attr("width",width)
						.attr("height",height);
			//获取当前时间
			function getTime(){
				var time=new Date();
				var hours=time.getHours();
				var minutes=time.getMinutes();
				var seconds=time.getSeconds();
				hours=hours<10?"0"+hours:hours;
				minutes=minutes<10?"0"+minutes:minutes;
				seconds=seconds<10?"0"+seconds:seconds;
				return hours+":"+minutes+":"+seconds;
			}
			//在当前文本上显示时间
			var timeText=svg.append("text")
				.attr("x",100)
				.attr("y",100)
				.attr("class","time")
				.text(getTime());
			//更新时间
			function updateTime(){
				timeText.text(getTime());
			}
			//实时更新，每秒更新一次
			setInterval(updateTime,1000);
		</script>
	</body>
</html>

三：总结

代码中最需要注意的一点是setInterval()中参数的设置，比如setInterval(updateTime,1000)，第一个参数是执行函数，比如updateTime是执行函数，一定不要加后面的括号，加上括号函数自动就执行了，此时传的参数就不是updateTime这个函数体了，而是updateTime返回的值。第二个参数是以毫秒为单位的，所以1000就代表是一秒。