Click here to Skip to main content
15,068,929 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
Hi all, I have some jquery in a project I found online which renders a clock
var prop = 'transform';
$('#hour')[0].style[prop] = 'rotate(' + hourAngle + 'deg)';
$('#minute')[0].style[prop] = 'rotate(' + angle * minute + 'deg)';
$('#second')[0].style[prop] = 'rotate(' + angle * second + 'deg)';


I would like to get rid of the jquery and use raw javascript so I tried this

var hour = document.getElementById('hour');
var minute = document.getElementById('minute');
var second = document.getElementById('second');

hour.style[prop] = 'rotate(' + hourAngle + 'deg)';
minute.style[prop] = 'rotate(' + angle * minute + 'deg)';
second.style[prop] = 'rotate(' + angle * second + 'deg)';


but it doesn't work - no error just nothing happens

What I have tried:

var hour = document.getElementById('hour');
var minute = document.getElementById('minute');
var second = document.getElementById('second');

hour.style[prop] = 'rotate(' + hourAngle + 'deg)';
minute.style[prop] = 'rotate(' + angle * minute + 'deg)';
second.style[prop] = 'rotate(' + angle * second + 'deg)';
Posted
Updated 9-Sep-21 3:55am
Comments
Member 15329613 9-Sep-21 8:49am
   
It looks like there are more than one controls that have an id of "hour".
Richard Deeming 9-Sep-21 9:04am
   
That code works fine for me. Can you create a JSFiddle to demonstrate the problem?
pkfox 9-Sep-21 9:11am
   
How do I do that Richard ?
Richard Deeming 9-Sep-21 9:13am
   
JSFiddle - Code Playground[^]

Once you've created a demo, click the "Save" button, and then copy the URL and paste it here.
pkfox 9-Sep-21 9:51am
   
As the div contains a local image Richard I don't think I can use JSFiddle
Richard Deeming 9-Sep-21 9:52am
   
Just replace the image with a solid block, or use a placholder image from the web.
pkfox 9-Sep-21 9:18am
   
The div has an image as shown
<div id="hour"><img src="~/paulrhayes.com-experiments-master/clock/images/hourHand.png" /></div>
Member 15329613 9-Sep-21 9:34am
   
The url is bad.
pkfox 9-Sep-21 9:43am
   
It's not bad on my box - this works
$('#hour')[0].style[prop] = 'rotate(' + hourAngle + 'deg)';

This dosen't
var hour = document.getElementById('hour');
hour.style[prop] = 'rotate(' + hourAngle + 'deg)';

Rather than using element.style[prop] = ..., I suspect you need to use element.style.setProperty(prop, ...);.

Here's a simple analog clock demo:
HTML
<div id="clock">
    <div id="hour-hand"></div>
    <div id="minute-hand"></div>
    <div id="second-hand"></div>
</div>
CSS
#clock {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 400px;
    height: 400px;
    border: 4px solid black;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    --hour: 0;
    --minute: 0;
    --second: 0;
}
#hour-hand, #minute-hand, #second-hand {
    position: absolute;
    top: 50%;
    left: 50%;
    height: var(--height);
    transform-origin: top left;
    transform: rotate(var(--angle)) translateY(calc(var(--height) / -2));
}
#hour-hand {
    --height: 8px;
    width: 40%;
    background-color: black;
    --hour-angle: calc(360deg * var(--hour) / 12);
    --minute-angle: calc(30deg * var(--minute) / 60);
    --angle: calc(var(--hour-angle) + var(--minute-angle) - 90deg);
}
#minute-hand {
    --height: 4px;
    width: 45%;
    background-color: blue;
    --minute-angle: calc(360deg * var(--minute) / 60);
    --second-angle: calc(6deg * var(--second) / 60);
    --angle: calc(var(--minute-angle) + var(--second-angle) - 90deg);
}
#second-hand {
    --height: 2px;
    width: 50%;
    background-color: silver;
    --second-angle: calc(360deg * var(--second) / 60);
    --angle: calc(var(--second-angle) - 90deg);
}
JavaScript
const clock = document.getElementById("clock");

const updateClock = function(){
    const now = new Date();
    clock.style.setProperty("--hour", now.getHours());
    clock.style.setProperty("--minute", now.getMinutes());
    clock.style.setProperty("--second", now.getSeconds());
};

updateClock();
setInterval(updateClock, 1000);
Edit fiddle - JSFiddle - Code Playground[^]
   
Comments
pkfox 9-Sep-21 10:32am
   
What are the double minuses for ?
pkfox 9-Sep-21 10:45am
   
I have it working now Richard - there were some vars declared in the top of the script which conflicted with mine - slaps forehead - thanks for all your help - learnt a few things today - need beer.
Here is an easier way: https://www.worldtimeserver.com/clocks/[^].
   
Comments
pkfox 9-Sep-21 10:32am
   
No fun in that Richard :-)

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)




CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900