Hello and welcome to our community! Is this your first visit?
Enjoy an ad free experience by logging in. Not a member yet? Register.

# Thread: Clock rotation help! :( (SVG IMAGE)

1. ## 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);```

• Any help please? anyone? My work is due sunday, and I've been doing so much research. Can't find anything!

• Originally Posted by fraged
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.

• ## Users who have thanked Arbitrator for this post:

fraged (10-26-2013)

• Originally Posted by Arbitrator
`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!!

• Originally Posted by fraged
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.

•

#### Posting Permissions

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