一:实现效果
具体的实现效果如上图所示,时分秒都以两位数显示。
二:代码分析
在网页上实时显示时间目前我知道的有两种方法:一种是用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就代表是一秒。