Set the clock to the correct time by winding it up

I have created a vintage-inspired clock using javascript and css.

function updateClock() {
    var now = moment(),
        second = now.seconds() * 6, 
        minute = now.minutes() * 6, 
        hour = now.hours() % 12 / 12 * 360 + 90 + minute / 12;

    document.getElementById("hour").style.transform = 'rotate(' + hour + 'deg)';
    document.getElementById("minute").style.transform = 'rotate(' + minute + 'deg)';
}

function timedUpdate() {
    updateClock();
    setTimeout(timedUpdate, 1000);
}

timedUpdate();

I am looking to incorporate a winding effect, where the clocks initially start at 12:00 and slowly animate to display the current time (similar to the clocks on this page: )

Here's the Fiddle

javascriptcssmomentjs

Answer №1

Seems like the CSS transition was the missing piece you needed. 

-webkit-transition: 0.5s all

Now, your content will smoothly rotate over 0.5 seconds. I've gone ahead and included it in your fiddle with the necessary webkit prefix:

https://jsfiddle.net/pw8bfjq2/1/

Answer №2

Make changes to the JavaScript function updateClock() by including seconds as well.

It seems there is an issue with the counting of minutes and hours.

function updateClock() {

  var now = moment(),
      second = now.seconds() * 6, 
      minute = now.minutes() * 6, 
      hour = now.hours() * 30;
console.log(hour);
  document.getElementById("hour").style.transform = 'rotate(' + hour + 'deg)';
  document.getElementById("minute").style.transform = 'rotate(' + minute + 'deg)';
  document.getElementById("second").style.transform = 'rotate(' + second + 'deg)';
}

function timedUpdate() {
  updateClock();
  setTimeout(timedUpdate, 1000);
}

timedUpdate();
body {
      background-color: #252525;
    }

    .clock{
      width: 180px;
      height: 180px;
      position: relative;
      border: 1px solid red;
      border-radius:50%
      

    }

    .hour{
      width: 0;
      height: 0;
      position: absolute;
      top: 50%;
      left: 50%;
      margin: -4px 0 -4px -25%;
      padding: 4px 0 4px 25%;
      background: #fff;
      -webkit-transform-origin: 100% 50%;
      -ms-transform-origin: 100% 50%;
      transform-origin: 100% 50%;
    }

    .minute{
      width: 0;
      height: 0;
      position: absolute;
      top: 50%;
      left: 50%;
      margin: -40% -3px 0;
      padding: 40% 2px 0;
      background: #fff;
      -webkit-transform-origin: 50% 100%;
      -ms-transform-origin: 50% 100%;
      transform-origin: 50% 100%;
    }
    
    .second{
      width: 0;
      height: 0;
      position: absolute;
      top: 50%;
      left: 50%;
      margin: -40% -3px 0;
      padding: 40% 1px 0;
      background: #fff;
      -webkit-transform-origin: 50% 100%;
      -ms-transform-origin: 50% 100%;
      transform-origin: 50% 100%;
    }
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment.min.js"></script>
  <div class="clock">
    <div id="hour" class="hour"></div>
    <div id="minute" class="minute"></div>
     <div id="second" class="second"></div>
  </div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Tips on updating route and content dynamically without triggering a page reload while ensuring search engine indexing compatibility

I am curious to find a way to change the URL displayed and have it reflect different content on the page, all while ensuring that it is search engine friendly for indexing by robots. I have experimented with using AJAX for dynamic data loading and angular ...

javascriptphpjqueryangularjsajax

How to efficiently store and manage a many-to-many relationship in PostgreSQL with TypeORM

I have a products entity defined as follows: @Entity('products') export class productsEntity extends BaseEntity{ @PrimaryGeneratedColumn() id: number; //..columns @ManyToMany( type => Categories, categoryEntity => cat ...

javascripttypescriptnestjstypeorm

What is the best method for assigning real-life units, such as centimeters or millimeters, to a dimension

Is there a way to set the height of an img in millimeters, regardless of the device being used? Currently, setting the CSS rule height: 10mm; actually translates to height: 37.8px, as explained in this link: http://css-tricks.com/the-lengths-of-css/ If p ...

jqueryhtmlcssresponsive-designmedia-queries

Create a div that pops up when clicked, just like the Fancybox jQuery feature

I'm looking to create a popup div with an elastic effect similar to jQuery's fancybox. I've tried using the following code, but it doesn't seem to work... Here is the HTML: <a href="#" id="LoginAnchorLink">ClickME</a> < ...

jqueryhtmlcssfancybox

Customizing TinyMCE's font style menu options

Our platform utilizes TinyMCE as in-place editors to allow users to make live edits to content. However, a challenge arises when using a dark background with light text, as TinyMCE defaults to using this text color rather than black. https://i.sstatic.net ...

cssreactjstypescripttinymce

How to Stop Fixed Elements in iOS from Zooming

I'm currently working on a responsive website with a fixed header and navigation. Is there a way to allow users to zoom in on the page's content without affecting the fixed elements? Thanks for any help! ...

cssioszoomingresponsive-designcss-position

Getting the entire data block in ReactJS: A step-by-step guide

I have encountered an issue with a component I created that only displays the value of block[0], rather than showing the entire block value. For instance, if I input: HI Stackoverflow It only shows "HI" and not the complete content of the field. Is th ...

javascripthtmlreactjs

State in Vuex is not kept intact after redirection to another page

Inside my Vue.js application, I have created a method for logging in users. This method sends a POST request to the server with the username and password, stores the returned data in Vuex store, and then redirects the user to the home page: login: func ...

javascriptvue.jsvuex

Display a modal as the first screen appears in a React Native application

Trying to implement a non-animating modal before the main screen loads on my react-native app. The goal is to display a login screen in a modal view if no user is logged in. Encountering an issue where the main screen briefly appears before the modal, ins ...

javascriptreactjsreact-native

When my viewport's size is less than 998px, a blank space appears

While configuring media queries in my HTML and CSS project, everything seemed to be working well. However, I noticed that when I shrink the screen, there is an empty white space on the right side and a horizontal scroll bar appears at the bottom without an ...

htmlcsswhitespaceviewport

What's the issue with my ExpressJS req.query not functioning as expected?

My NodeJS repl setup includes an input, button, and h1 element. The goal is to update the HTML inside the h1 element with the value of the input upon button click. Here's a glimpse of my code: index.js: const Database = require("@replit/database ...

javascripthtmlnode.jsajaxexpress

Angular restricts the use of the svg namespace in the $sce service for security reasons

I have a project in Angular Material where I am using an md-icon with a specific svg structure: <md-icon class="ic1" md-svg-src='data:image/svg+xml, <svg xmlns="https://www.w3.org/2000/svg" viewBox="0 0 32 32"> <ellipse ry="16" rx=" ...

javascriptangularjssvgangularjs-material

Identifying the hashKey and selected option in a dropdown menu

My attempt to set the selected option for the select menu is not working because the data in the ng-model that I am sending has a different $$hashKey compared to the data in the select menu, and the $$hashKey holds the values. <select class="form-contr ...

javascriptjsonangularjs

Changing an object into an array for saving and transforming it back to an array for usage in JavaScript

I am dealing with a unique situation where I have an object created from dynamic checkboxes in Angular. The structure of the object looks like this: {"United States":true,"Canada":true,"Australia":false} While this format works well for storing values, I ...

javascriptarraysangularjsobjectmongoose

How to sort WordPress RSS feed in alphabetical order using JavaScript

Currently using WP, but feeling limited due to restricted access to PHP and plugins. Searching for a JAVASCRIPT code solution to fetch RSS feed from a URL and organize the feed titles in ALPHABETICAL order. The JS code can be inserted into the footer and ...

javascriptwordpressrssalphabetical

Updating the information displayed in one section by selecting a button on the Google Maps infowindow located in a separate section

My webpage is divided into multiple divisions. One division contains a map using the Google Maps API with markers. When I click on a marker, an info window opens up. Now, I am attempting to place a button inside that info window which, when clicked, will ...

javascriptjqueryhtmlgoogle-mapsweb

Position the button to the right using the Bootstrap float-right class

Currently, I am utilizing reactstrap within my React component. My primary intention is to position a button to the right side of the container but unfortunately, the following code doesn't achieve the desired result: <td class="col-md-4 clearfix" ...

cssbootstrap-4

Arrange an asynchronous function in Node.js

I have been attempting to set up a schedule for an asynchronous function (with async/await return type) to run every two minutes. Although I have tried using the generic setInterval, as well as various node modules such as node-schedule, cron, node-cron, ...

javascriptnode.jsasync-awaitcron

How can I implement a for loop in Node.js?

I am currently experiencing an issue with my for loop while attempting to retrieve data from MongoDB and display it in the browser. The problem is that it only iterates through once, resulting in only the first entry being output. Strangely enough, when ...

javascriptnode.jsexpress

Using HTML and JavaScript, we can set two different color values - one for the background and one for the h1 title

I am trying to save two values, one for the h1 tag and one for the body background. I want the user to select color 1 and color 2. When I press the third button, all changes should be applied and the colors should change. I have attempted this but with no ...

javascripthtmlcss