d3画时钟
程序员文章站
2024-03-18 12:56:52
...
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.axis path,.axis line{
fill:none;
stroke:black;
shape-rendering:crispEdges;
}
.axis text{
font-family:sans-serif;
font-size:11px;
}
.time{
font-family: cursive;
font-size:40px;
stroke: black;
stroke-width:2;
}
</style>
</head>
<body>
<script type="text/javascript" src = "http://d3js.org/d3.v3.min.js" charset = "utf-8"></script>
<script type="text/javascript">
var width = 500;
var height = 500;
var svg = d3.select("body")
.append("svg")
.attr("width",width)
.attr("height",height)
function getTimeString(){
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(getTimeString());
setInterval(updateTime,1000);
function updateTime(){
timeText.text(getTimeString());
}
</script>
</body>
</html>运行结果如下图所示：
推荐阅读