我该如何按逆时针方向编辑极钟呢?
How would I go about editing the polar clock counter clockwise?
从这里: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>
我怎样才能只得到分钟并把它逆时针转呢?
这是我正在谈论的小图像:https://i.stack.imgur.com/A8rfZ.png
是否还有一种方法可以轻松编辑颜色或使用CSS编辑大小?
首先,下载所有内容以便进行编辑。您需要html源代码、样式表和脚本文件(拉斐尔.js)。然后我们可以开始工作了。
让我们一个一个地看。
要翻转时钟,我们可以在onload函数中编辑极性数学(这使我们不得不思考),或者,我们可以使用css3转换属性(以及它的浏览器特定别名)与scaleX。我发现后者更平易近人,更直观。
#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。
希望有帮助!
相关文章:
- CKEditor Widget-阻止编辑可编辑元素本身
- 如何在angularJS中编辑时,如果DB中的值为true,则设置复选框,如果值为false,则取消选中复选框
- 高亮显示时编辑文本大小和颜色
- 剑道UI内联编辑:如何在点击其他按钮时隐藏按钮
- 将事件聚焦/模糊在可编辑内容的元素上
- 点击后隐藏潜水?(但如果Div是一面旗帜呢?)
- 编辑HTML表的源数据
- ExtJS网格单元格编辑器,防止焦点松动问题
- 如何在visualstudio中调试web api时编辑javascript文件
- 具有所有样式的文本正在复制到可编辑文本区域
- 可以't使用PHP使用Froala编辑器上传图像URL
- 用Greasemonkey编辑专栏
- 如何在corona sdk中从CK编辑器中检索数据
- 基于数据类型的编辑框的汇总列表
- 如何使用jQuery可编辑插件检查ajax是否成功完成
- 错误:[$compile:nonassign]表达式'未定义'与指令'内容可编辑'是不可
- 如何在ng-reeat中使用ng-switch来编辑JSON API数据
- 如何获取经过编辑的文本
- 我该如何按逆时针方向编辑极钟呢?
- 为孩子们创建一个JavaScript拖放编辑器,想要包含JSHint来检查语法-我该怎么做呢?