Javascript，在手表上增加小时

大家好，玩javascript和raphael。事实上，我很快就要完成我的网站游戏了，但我只是有一个功能上的小问题

我做了一个能报时的钟。我试图让它成为这样，当用户点击一个按钮，它实际上增加了一个额外的时钟小时。希望当我弄明白这一点后，我可以开始这样做，以便用户可以添加分钟是很好的，但一步一步。我尝试了很多不同的版本，但我似乎无法运行代码。我认为我走在正确的道路上，如果有人能看一下并给我一些帮助，那将是非常棒的

正如你所看到的，我在顶部做了一些功能，尝试在用户每次点击右侧按钮时添加一个小时，同时左侧按钮会将时间重置为正常时间

    if(hou >= 24)
    {
        hou-= 24;   
    }   

---

还使用了一些简单的代码，以确保它不会在24小时内运行，因此不会像35:22:12等那样运行。但由于某些原因，按钮不起作用。这方面的任何帮助都会很好。感谢您增加了变量值，但没有将该值添加到实际显示的小时数中

我编辑了您的脚本，它现在可以正常工作了：

window.onload = function() {

    var paper = new Raphael(0, 0, 900, 900);
    var backGround = paper.rect(0, 0, 900, 900);
    var incHour = 0;
    var hourBut = paper.rect(404,280, 30,30).attr("fill","white").attr("cursor", "pointer");
    var btnReset = paper.rect(165,280,30,30).attr("fill","white").attr("cursor", "pointer"); 

    hourBut.node.onclick = function() {
        incHour += 1;
    };

    btnReset.node.onclick = function() {
        incHour = 0;
    }



  var face = paper.circle(100, 100, 95);
  face.attr({
    "fill": "#f5f5f5",
    "stroke": "#444444",
    "stroke-width": "10"
  })

  var secondHand = paper.path("M100 110L100 25");
  secondHand.attr({
    stroke: "#ffff00",
    "stroke-width": 2
  });

  var minHand = paper.path('M100,100L99,100L99,20L100,17L101,20L101,100L100,100');
  minHand.attr({
    stroke: "#12184D",
    "stroke-width": 2
  });

  var hourHand = paper.path('M100,100L98,100L98,45L100,40L102,45L102,100L100,100');
  hourHand.attr({
    stroke: "#12184D",
    "stroke-width": 4
  });

  var pin = paper.circle(100, 100, 5);
    pin.attr("fill", "#000000");    

    var startpos;
    var startpos1;
    var endpos;
    var endpos1;
    for(i=0;i<12;i++){
        startpos = 100+Math.round(70*Math.cos(30*i*Math.PI/180));
        startpos1 = 100+Math.round(70*Math.sin(30*i*Math.PI/180));
        endpos = 100+Math.round(90*Math.cos(30*i*Math.PI/180));
        endpos1 = 100+Math.round(90*Math.sin(30*i*Math.PI/180));    
        paper.path('M'+startpos+' '+startpos1+'L'+endpos+' '+endpos1).attr({ stroke: '#cc33ff'});
    }


    var digTime = paper.text(360, 300, "").attr({'font-size': 10, 'fill': 'black', "stroke-width": 1, stroke: "black"});    

    startTime();

  function startTime() {
    var now = new Date();
    var hou = now.getHours();
    var min = now.getMinutes();
    var sec = now.getSeconds();
    var addedHour_byHour = calHourAdded_byHour(incHour);
    if(hou >= 24)
        {
            hou-= 24;   
        }   

    secondHand.animate({
        transform: [ 'r',6 * sec,100,100]
        });

    minHand.animate({
        transform: [ 'r', 6 * min, 100,100]
        }); 

    hourHand.animate({
        transform: [ 'r', 30 * (hou + incHour), 100,100] //added the relevant variable
        });

    digTime.attr("text", (hou + incHour) + ":" + min + ":" + sec); //added the relevant variable

    setTimeout(function() {
      startTime()
    }, 1000);

  }

    function calHourAdded_byHour(hourHand)
    {
        return hourHand%24;
    }

}

window.onload=function（）{
var纸张=新拉斐尔（0,0,900,900）；
var backGround=paper.rect（0,0,900,900）；
var-incHour=0；
var hourBut=paper.rect（404280,30,30）.attr（“填充”、“白色”）.attr（“光标”、“指针”）；
var btnReset=paper.rect（165280,30,30）.attr（“填充”、“白色”）.attr（“光标”、“指针”）；
hourBut.node.onclick=函数（）{
英寸+=1；
};
btnReset.node.onclick=函数（）{
英寸=0；
}
变量面=纸。圆（10010095）；
face.attr({
“填充”：“#f5”，
“笔划”：“#4444”，
“笔划宽度”：“10”
})
var二手=纸张路径（“M100 110L100 25”）；
二手的({
笔划：“ffff00”，
“笔划宽度”：2
});
var minHand=paper.path（'m100100l99100l99,20L100,17L101,20l101100l100100'）；
minHand.attr({
笔划：“12184D”，
“笔划宽度”：2
});
var hourHand=paper.path（'m100100l98100l98,45L100,40L102,45l102100l00100'）；
hourHand.attr({
笔划：“12184D”，
“笔划宽度”：4
});
var引脚=纸张圆（100100,5）；
pin.attr（“填充”、“000000”）；
var startpos；
var startpos1；
var endpos；
var-endpos1；
对于（i=0；i=24）
{
侯-=24；
}   
二手的({
变换：['r'，6*秒，100100]
});
肉食动物({
变换：['r'，6*min，100100]
}); 
hourHand.animate({
转换：['r'，30*（侯+英寸），100100]//添加了相关变量
});
digTime.attr（“text”，（hou+incHour）+“：“+min+”：“+sec）；//添加了相关变量
setTimeout（函数（）{
开始时间（）
}, 1000);
}
功能按小时计算小时数（小时数）
{
返回小时数和%24；
}
}

incHour的值在增加，但你没有重新绘制时钟。@william.taylor.09不确定你的意思是什么，你会谈论什么函数？这非常感谢，但这让我意识到if语句不起作用，在获取用于绘制时钟的所有值之前，最好将时间添加到日期上。这将让JS Date对象处理到第二天的溢出。