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

本文通过五个步骤详细介绍了如何使用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就代表是一秒。

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值