Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Oct 2013
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Clock rotation help! :( (SVG IMAGE)

    So I'm working on a project for university, we have to design different concepts for clocks. Mine was a microwave ha, the dials turning, representing minutes, seconds and hours.

    The dials aren't moving? Can anyone see the problem?
    Heres a link to my JSBin, http://jsbin.com/OjUzewO/2/edit?js,output

    But if that doesn't load, I'll post a snippet now of the javascript code!

    Thanks!

    Code:
     
    function updateclock ()
    {
    var currentTime = new Date();
    var currentHours = currentTime.getHours();
    var currentMinutes = currentTime.getMinutes();
    var currentSeconds = currentTime.getSeconds();
    var handRotation = 0; //the degrees the hand is rotated
     
    var secondsHand = document.getElementById("seconds");
    var minutesHand = document.getElementById("minutes");
    var hoursHand = document.getElementById("hours");
      
    //rotation for the seconds
      handRotation = currentSeconds*6+currentTime.getMilliseconds()/1000*6; //adds 6 degrees to the rotation
      if (handRotation > 359)
        {
          handRotation = 0;
        }
     
      secondsHand.setAttribute('transform', 'rotate('+handRotation+', 1262.67, 614');
     
     
     
    //rotation for the minutes
      handRotation = currentMinutes*6+currentTime.getSeconds()/59*6; //adds 6 degrees to the rotation
      if (handRotation > 359)
        {
          handRotation = 0;
        }
     
      minsHand.setAttribute('transform', 'rotate('+handRotation+', 1265.33, 418.5');
     
     
     
    //rotation for the hours
      handRotation = currentHours*30+currentTime.getMinutes()/59*6; //adds 6 degrees to the rotation
      if (handRotation > 359)
        {
          handRotation = 0;
        }
     
      hoursHand.setAttribute('transform', 'rotate('+handRotation+', 1261.33, 276.5');
     
    }
     
    setInterval(updateClock, 20);

  • #2
    New to the CF scene
    Join Date
    Oct 2013
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Any help please? anyone? My work is due sunday, and I've been doing so much research. Can't find anything!

  • #3
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,274
    Thanks
    28
    Thanked 271 Times in 265 Posts
    Quote Originally Posted by fraged View Post
    Any help please? anyone? My work is due sunday, and I've been doing so much research. Can't find anything!
    minsHand should be minutesHand. Also, your transform attribute values are malformed; a right parenthesis character is missing from the end of each rotate function value. With those things fixed, your dial rotates, though not in place.

    Edit: Note: Only the bottom dial rotates.

    Edit: Nevermind. The other two look like they're animating. Just really, really slowly.
    Last edited by Arbitrator; 10-26-2013 at 12:47 AM. Reason: See the post.
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • Users who have thanked Arbitrator for this post:

    fraged (10-26-2013)

  • #4
    New to the CF scene
    Join Date
    Oct 2013
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Arbitrator View Post
    minsHand should be minutesHand. Also, your transform attribute values are malformed; a right parenthesis character is missing from the end of each rotate function value. With those things fixed, your dial rotates, though not in place.

    Edit: Note: Only the bottom dial rotates.

    Edit: Nevermind. The other two look like they're animating. Just really, really slowly.
    Mind sharing the code you got?
    Tried doing just now, getting errors! Thanks so much!!

  • #5
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,274
    Thanks
    28
    Thanked 271 Times in 265 Posts
    Quote Originally Posted by fraged View Post
    Mind sharing the code you got?
    Tried doing just now, getting errors! Thanks so much!!
    I fixed the four errors and left comments to show where they were: http://jsbin.com/OjUzewO/11/edit.
    For every complex problem, there is an answer that is clear, simple, and wrong.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •