用raphaeljs库写一个时钟

最新推荐文章于 2024-11-02 12:42:04 发布

王建野

最新推荐文章于 2024-11-02 12:42:04 发布

阅读量681

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/jianye5461/article/details/32709949

版权

在做图表中用到raphaeljs图表库，在查相关资料时做了个下面的的小练习，效果如下图

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>时钟</title>
    <script src="chart/raphael.js"></script>
    <script type="text/javascript">

        window.onload = function () {
            var originX = 300, originY = 200, backgroundWidth = 680, backgroundHeight = 480;
            var r = 100;
            var paper = Raphael(document.getElementById("paper"), backgroundWidth, backgroundHeight);
            paper.rect(0, 0, backgroundWidth, backgroundHeight, 10).attr({ fill: "#F2F1D7", stroke: "none" });
            paper.circle(originX, originY, r).attr("stroke", "red").attr("fill","white");
            var secondHand = paper.path("M" + originX + "," + originY + " v " + (r - 10));//秒针
            var minuteHand = paper.path("M" + originX + "," + originY + " v " + (-(r - 20))).attr("stroke-width", 3).attr("stroke","green");
            var hourHand = paper.path("M" + originX + "," + originY + " v " + (-(r - 40))).attr("stroke-width", 3).attr("stroke", "red");
            var timeText = paper.text(originX - 5, originY - r - 30, new Date().toLocaleTimeString()).attr("font-size",20);
            for (var i = 0; i < 12; i++) {
                paper.path("M" + (originX + r - 8) + "," + originY + "h 8").rotate(30 * i, originX, originY);
            }
            function setPosition() {
                var currentDate = new Date();
                minuteHand.attr("transform", "r " + ((currentDate.getMinutes() * 6)) + " " + originX + " " + originY);
                secondHand.attr("transform", "r " + ((currentDate.getSeconds() * 6)) + " " + originX + " " + originY);
                hourHand.attr("transform", "r " + ((currentDate.getHours() * 6)) + " " + originX + " " + originY);
                timeText.attr("text", currentDate.toLocaleTimeString());
            }
            setPosition();
            window.setInterval(function () {
                setPosition();
            }, 1000);
            
        };
    </script>
</head>
<body>
<div id="paper">

</div>
</body>
</html>