在做图表中用到raphaeljs图表库，在查相关资料时做了个下面的的小练习，效果如下图
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>时钟</title>
<script src="chart/raphael.js"></script>
<script type="text/javascript">
window.onload = function () {
var originX = 300, originY = 200, backgroundWidth = 680, backgroundHeight = 480;
var r = 100;
var paper = Raphael(document.getElementById("paper"), backgroundWidth, backgroundHeight);
paper.rect(0, 0, backgroundWidth, backgroundHeight, 10).attr({ fill: "#F2F1D7", stroke: "none" });
paper.circle(originX, originY, r).attr("stroke", "red").attr("fill","white");
var secondHand = paper.path("M" + originX + "," + originY + " v " + (r - 10));//秒针
var minuteHand = paper.path("M" + originX + "," + originY + " v " + (-(r - 20))).attr("stroke-width", 3).attr("stroke","green");
var hourHand = paper.path("M" + originX + "," + originY + " v " + (-(r - 40))).attr("stroke-width", 3).attr("stroke", "red");
var timeText = paper.text(originX - 5, originY - r - 30, new Date().toLocaleTimeString()).attr("font-size",20);
for (var i = 0; i < 12; i++) {
paper.path("M" + (originX + r - 8) + "," + originY + "h 8").rotate(30 * i, originX, originY);
}
function setPosition() {
var currentDate = new Date();
minuteHand.attr("transform", "r " + ((currentDate.getMinutes() * 6)) + " " + originX + " " + originY);
secondHand.attr("transform", "r " + ((currentDate.getSeconds() * 6)) + " " + originX + " " + originY);
hourHand.attr("transform", "r " + ((currentDate.getHours() * 6)) + " " + originX + " " + originY);
timeText.attr("text", currentDate.toLocaleTimeString());
}
setPosition();
window.setInterval(function () {
setPosition();
}, 1000);
};
</script>
</head>
<body>
<div id="paper">
</div>
</body>
</html>
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
