Javascript 我如何逆时针编辑极轴时钟？_Javascript_Html_Css

Javascript 我如何逆时针编辑极轴时钟？

javascript html css

Javascript 我如何逆时针编辑极轴时钟？,javascript,html,css,Javascript,Html,Css,从这里开始：拉斐尔极钟 window.onload=函数（）{ var r=拉斐尔（“持有人”，600600）， R=200， init=true， param={stroke:#fff”，“stroke width:30}，哈希=document.location.hash， marksAttr={fill:hash | |“#444”，笔划：“none”}， html=[ 文件.getElementById（“h”），文件.getElementById（“m”）， document.

从这里开始：


拉斐尔极钟
window.onload=函数（）{
var r=拉斐尔（“持有人”，600600），
R=200，
init=true，
param={stroke:#fff”，“stroke width:30}，
哈希=document.location.hash，
marksAttr={fill:hash | |“#444”，笔划：“none”}，
html=[
文件.getElementById（“h”），
文件.getElementById（“m”），
document.getElementById（“s”），
文件.getElementById（“d”），
document.getElementById（“mnth”），
document.getElementById（“ampm”）
];
//自定义属性
r、 customAttributes.arc=函数（值、总计、r）{
var alpha=360/总*值，
a=（90-alpha）*Math.PI/180，
x=300+R*数学cos（a），
y=300-R*数学sin（a），
color=“hsb（“.concat（数学圆整（R）/200，”，值/总数，”，.75）”），
路径
如果（总==值）{
路径=[“M”，300300-R]，“A”，R，R，0，1，1299.99300-R]；
}否则{
路径=[“M”，300300-R]，“A”，R，R，0，+（α>180），1，x，y]；
}
返回{path:path，stroke:color}；
};
提款（R，60）；
var sec=r.path（）.attr（param）.attr（{arc:[0,60,r]}）；
R-=40；
提款（R，60）；
var min=r.path（）.attr（param）.attr（{arc:[0,60,r]}）；
R-=40；
提款（R，12）；
var hor=r.path（）.attr（param）.attr（{arc:[0,12,r]}）；
R-=40；
提款（R，31）；
var day=r.path（）.attr（param）.attr（{arc:[0,31,r]}）；
R-=40；
提款（R，12）；
var mon=r.path（）.attr（param）.attr（{arc:[0,12,r]}）；
var pm=r.circle（30030016）.attr（{stroke:“none”，fill:Raphael.hsb2rgb（15/2001.75）.hex}）；
html[5].style.color=Raphael.hsb2rgb（15/200,1,75）.hex；
函数updateVal（值、总计、R、手、id）{
如果（总计==31）{//month
var d=新日期；
d、 设定日期（1）；
d、 setMonth（d.getMonth（）+1）；
d、 设定日期（-1）；
总计=d.getDate（）；
}
var color=“hsb”（.concat（数学四舍五入（R）/200，”，值/总数，.75）”；
if（init）{
动画（{arc:[value，total，R]}，900，“>”）；
}否则{
如果（！value | | value==总计）{
价值=总价值；
动画（{arc:[value，total，R]}，750，“bounce”，函数（）{
attr（{arc:[0，total，R]}）；
});
}否则{
动画（{arc:[value，total，R]}，750，“弹性”）；
}
}
html[id]。innerHTML=（值<10？：“）+值；
html[id].style.color=Raphael.getRGB（color）.hex；
}
功能提取标记（R，总计）{
如果（总计==31）{//month
var d=新日期；
d、 设定日期（1）；
d、 setMonth（d.getMonth（）+1）；
d、 设定日期（-1）；
总计=d.getDate（）；
}
var color=“hsb”（.concat（数学圆（R）/200，.1，.75）”，
out=r.set（）；
对于（var值=0；值<总计；值++）{
var alpha=360/总*值，
a=（90-alpha）*Math.PI/180，
x=300+R*数学cos（a），
y=300-R*Math.sin（a）；
向外推（右圆（x，y，2）.attr（marksAttr））；
}
返回；
}
（功能（）{
var d=新日期，
am=（d.getHours（）<12），
h=d.getHours（）%12 | | 12；
updateVal（d.getSeconds（），60200，sec，2）；
updateVal（d.getMinutes（），60160，min，1）；
更新值（h，12，120，hor，0）；
updateVal（d.getDate（），31,80，day，3）；
updateVal（d.getMonth（）+1,12,40,mon,4）；
pm[（上午？“隐藏”：“显示”）（）；
html[5]。innerHTML=am？“am”：“PM”；
setTimeout（arguments.callee，1000）；
init=false；
})();
};
#持有者{
高度：600px；
余量：-300px 0-300px；
宽度：600px；
}
#时间{
文本对齐：居中；
字体：100 3em“Helvetica Neue”，Helvetica，Arial，无衬线；
}
::  · /
演示-JavaScript向量库

我怎样才能得到分钟数并逆时针转动它

下面是我正在拍摄的一个小图片：

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

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

#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)
}