从这里开始：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编辑尺寸？
答案 0 :(得分：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的行，因为这是你要保留的分钟弧。然后测试并查看它是否有效。
如果你想摆脱圆圈周围的小圆点，你也可以注释每次调用标记。你的选择;在你测试的时候，不要生成那些小点可能是有意义的。他们通过svg源滚动PITA。
希望有所帮助！