d3画时钟

来源：互联网发布：java项目名命名规则编辑：程序博客网时间：2024/06/05 17:39

代码如下：

<!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>

运行结果如下图所示：

这里写图片描述

阅读全文

0 0