Question

我有一个使用Raphaël库的数字时钟代码，它自己打印而不是每次更换自己，是否有人知道如何编辑代码以便替换而不是写入？

HTML文件中引用的

JS文件：

window .onload= function (){
var paper = new Raphael( 0,0, 400, 400);
var backGround = paper.rect(0,0,400,400);
   backGround.attr({ fill: "none"});
function startTime() {
var today=new Date();
var h=today.getHours();
var m=today.getMinutes();
var s=today.getSeconds();
m = checkTime(m);
s = checkTime(s);
var dig = h+":"+m+":"+s;
var display = paper.text(200, 200, dig).attr({text:dig});
 }
  function checkTime(i) {
     if (i<10) {i = "0" + i};  // add zero in front of numbers < 10
       return i;
    }
 setInterval(function(){
 startTime();
 },1000);
 };

HTML文件：

<!DOCTYPE html>
<html>
<head>
<script src="digital.js" type="text/javascript"></script>
<script src="raphael-min.js" type="text/javascript"> </script>

</head>

</html>

谢谢

Answer 1

这不是真正的动画，因为你正在绘制时钟图像。

paper.text正在做的是在画布上每秒在已经存在的文本上绘制一个新文本。

使用display.attr('text', dig);而不是您可以编辑现有文字。

这是更正后的代码：

window .onload= function (){
var paper = new Raphael( 0,0, 400, 400);
var backGround = paper.rect(0,0,400,400);
var display = paper.text(200, 200, "00:00:00").attr({text:"00:00:00"});
   backGround.attr({ fill: "none"});
function startTime() {
var today=new Date();
var h=today.getHours();
var m=today.getMinutes();
var s=today.getSeconds();
m = checkTime(m);
s = checkTime(s);
var dig = h+":"+m+":"+s;
display.attr('text', dig);
}
function checkTime(i) {
     if (i<10) {i = "0" + i};  // add zero in front of numbers < 10
       return i;
}
setInterval(function(){
  startTime();
},1000);
};

JS动画自己写而不是替换

1 个答案: