我正在使用Raphael为我的网站制作一个简单的时钟。我试图绘制秒针,让它像普通时钟一样打勾。
以下是我正在运行的代码:
window.onload = function() {
var paper = new Raphael(0, 0, 400, 400);
var backGround = paper.rect(0, 0, 400, 400);
backGround.attr({
fill: "orange"
});
var face = paper.circle(100, 100, 95);
face.attr({
"fill": "#f5f5f5",
"stroke": "#ff0000",
"stroke-width": "3"
})
var hand = paper.path("M100 110L100 25");
hand.attr({
stroke: "#ffff00",
"stroke-width": 1
});
function startTime() {
var hands = now.getSeconds();
hands = checkTime(hands);
hand.animate({
transform: ['r', ((hands * 6) - 180), 200, 200]
});
setTimeout(function() {
startTime()
}, 1000);
function checkTime(i) {
if (i < 10) {
i = "0" + i
};
return i;
}
startTime();
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.4/raphael-min.js"></script>
答案 0 :(得分:0)
window.onload = function() {
var paper = new Raphael(0, 0, 400, 400);
var backGround = paper.rect(0, 0, 400, 400);
backGround.attr({
fill: "orange"
});
var face = paper.circle(100, 100, 95);
face.attr({
"fill": "#f5f5f5",
"stroke": "#ff0000",
"stroke-width": "3"
})
var hand = paper.path("M100 110L100 25");
hand.attr({
stroke: "#000000",
"stroke-width": 1
});
function startTime() {
var now = new Date(),
hands = now.getSeconds();
hand.animate({
transform: ['r', ((hands * 6) - 180), 100, 100]
});
setTimeout(function() {
startTime()
}, 1000);
}
startTime();
}
&#13;
<script src="https://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.4/raphael-min.js"></script>
&#13;