Question

嗨，大家好好玩javascript和raphael。我实际上非常接近完成我的网站游戏，但我只是有一个功能的小问题。

我已经制作了一个告诉时间的时钟。我试图这样做，当用户点击一个按钮时，它实际上会在时钟上增加一个小时。希望当我想到这一点时，我可以开始制作它，这样用户可以添加分钟很好，但一步一步。我尝试了很多不同的版本，但我似乎无法运行代码。我想我正走在正确的道路上，如果有人能看到并给我一些帮助，那就太棒了。

Code

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

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

还使用了一些简单的代码，以确保它不会超过24小时peroid所以它不会像35:22:12那样击中等等。但由于某种原因按钮不起作用。这个领域的任何帮助都会很棒。谢谢

Answer 1

您正在递增变量值，但您并未将该值添加到实际显示的小时。

我编辑了您的脚本，它现在按预期工作：

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;
    }

}

Javascript，加入观看时间

1 个答案: