2

从这里：http ://raphaeljs.com/polar-clock.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Raphaël · Polar Clock</title>
        <link rel="stylesheet" href="demo.css" media="screen">
        <link rel="stylesheet" href="demo-print.css" media="print">
        <script src="raphael.js"></script>
        <script>
            window.onload = function () {
                var r = Raphael("holder", 600, 600),
                    R = 200,
                    init = true,
                    param = {stroke: "#fff", "stroke-width": 30},
                    hash = document.location.hash,
                    marksAttr = {fill: hash || "#444", stroke: "none"},
                    html = [
                        document.getElementById("h"),
                        document.getElementById("m"),
                        document.getElementById("s"),
                        document.getElementById("d"),
                        document.getElementById("mnth"),
                        document.getElementById("ampm")
                    ];
                // Custom Attribute
                r.customAttributes.arc = function (value, total, R) {
                    var alpha = 360 / total * value,
                        a = (90 - alpha) * Math.PI / 180,
                        x = 300 + R * Math.cos(a),
                        y = 300 - R * Math.sin(a),
                        color = "hsb(".concat(Math.round(R) / 200, ",", value / total, ", .75)"),
                        path;
                    if (total == value) {
                        path = [["M", 300, 300 - R], ["A", R, R, 0, 1, 1, 299.99, 300 - R]];
                    } else {
                        path = [["M", 300, 300 - R], ["A", R, R, 0, +(alpha > 180), 1, x, y]];
                    }
                    return {path: path, stroke: color};
                };

                drawMarks(R, 60);
                var sec = r.path().attr(param).attr({arc: [0, 60, R]});
                R -= 40;
                drawMarks(R, 60);
                var min = r.path().attr(param).attr({arc: [0, 60, R]});
                R -= 40;
                drawMarks(R, 12);
                var hor = r.path().attr(param).attr({arc: [0, 12, R]});
                R -= 40;
                drawMarks(R, 31);
                var day = r.path().attr(param).attr({arc: [0, 31, R]});
                R -= 40;
                drawMarks(R, 12);
                var mon = r.path().attr(param).attr({arc: [0, 12, R]});
                var pm = r.circle(300, 300, 16).attr({stroke: "none", fill: Raphael.hsb2rgb(15 / 200, 1, .75).hex});
                html[5].style.color = Raphael.hsb2rgb(15 / 200, 1, .75).hex;

                function updateVal(value, total, R, hand, id) {
                    if (total == 31) { // month
                        var d = new Date;
                        d.setDate(1);
                        d.setMonth(d.getMonth() + 1);
                        d.setDate(-1);
                        total = d.getDate();
                    }
                    var color = "hsb(".concat(Math.round(R) / 200, ",", value / total, ", .75)");
                    if (init) {
                        hand.animate({arc: [value, total, R]}, 900, ">");
                    } else {
                        if (!value || value == total) {
                            value = total;
                            hand.animate({arc: [value, total, R]}, 750, "bounce", function () {
                                hand.attr({arc: [0, total, R]});
                            });
                        } else {
                            hand.animate({arc: [value, total, R]}, 750, "elastic");
                        }
                    }
                    html[id].innerHTML = (value < 10 ? "0" : "") + value;
                    html[id].style.color = Raphael.getRGB(color).hex;
                }

                function drawMarks(R, total) {
                    if (total == 31) { // month
                        var d = new Date;
                        d.setDate(1);
                        d.setMonth(d.getMonth() + 1);
                        d.setDate(-1);
                        total = d.getDate();
                    }
                    var color = "hsb(".concat(Math.round(R) / 200, ", 1, .75)"),
                        out = r.set();
                    for (var value = 0; value < total; value++) {
                        var alpha = 360 / total * value,
                            a = (90 - alpha) * Math.PI / 180,
                            x = 300 + R * Math.cos(a),
                            y = 300 - R * Math.sin(a);
                        out.push(r.circle(x, y, 2).attr(marksAttr));
                    }
                    return out;
                }

                (function () {
                    var d = new Date,
                        am = (d.getHours() < 12),
                        h = d.getHours() % 12 || 12;
                    updateVal(d.getSeconds(), 60, 200, sec, 2);
                    updateVal(d.getMinutes(), 60, 160, min, 1);
                    updateVal(h, 12, 120, hor, 0);
                    updateVal(d.getDate(), 31, 80, day, 3);
                    updateVal(d.getMonth() + 1, 12, 40, mon, 4);
                    pm[(am ? "hide" : "show")]();
                    html[5].innerHTML = am ? "AM" : "PM";
                    setTimeout(arguments.callee, 1000);
                    init = false;
                })();
            };
        </script>
        <style media="screen">
            #holder {
                height: 600px;
                margin: -300px 0 0 -300px;
                width: 600px;
            }
            #time {
                text-align: center;
                font: 100 3em "Helvetica Neue", Helvetica, Arial, sans-serif;
            }
        </style>
    </head>
    <body>
        <div id="holder"></div>
        <div id="time">
            <span id="h"></span>:<span id="m"></span>:<span id="s"></span> <span id="ampm"></span> · <span id="d"></span>/<span id="mnth"></span>
        </div>
        <p id="copy">Demo of <a href="http://raphaeljs.com/">Raphaël</a>—JavaScript Vector Library</p>
    </body>
</html>

我将如何只获得分钟并逆时针转动它？

这是我正在拍摄的一些图片：http: //i.imgur.com/Pvmkvs7.png

是否还有一种方法可以轻松编辑他的颜色或使用 CSS 编辑大小？

4

1 回答 1

1

首先，下载所有内容以便进行编辑。您将需要 html 源代码、样式表和脚本文件 (raphael.js)。然后我们就可以开始工作了。

让我们一一解决每个问题。

要翻转时钟，我们可以在 onload 函数中编辑极坐标数学（这让我们不得不思考），或者我们可以使用带有 scaleX 的 css3 转换属性（以及它是浏览器特定的别名）。我发现后者更平易近人和直观。

#holder svg  //apply to any elements of type svg within the element with the id 'holder'
{
    transform:scaleX(-1);
    -webkit-transform:scaleX(-1);//for chrome and safari
    -ms-transform:scaleX(-1);//IE 9
    -ms-filter: "FlipH";//IE 8 (not sure if it also applies to 7)
}

接下来，您只想显示分钟。为此，我们需要删除绘制其他弧线的代码。有两个地方引用了这些弧线；在 onload 中各一次（即“var sec = r.path().blahblahblah”）和更新期间一次（对 updateval() 的调用）。注释掉所有这些行，除了那些引用 min 的行，因为那是你想要保留的分钟弧。然后测试，看看它是否有效。

如果您想摆脱圆圈周围的小点，您还可以注释掉每个调用drawmarks。你的选择; 在您进行测试时，不生成那些小点可能是有意义的。他们使滚动 svg 源成为 PITA。

希望有帮助！

于 2013-05-22T03:21:00.663 回答