js to realize a simple disc clock

js to realize a simple disc clock

This article shares the specific code of js to implement a simple disc clock for your reference. The specific content is as follows

Preview image:

Code:

CSS:

<style>
        .disc {
            position: relative;
            margin: 200px auto;
            width: 300px;
            height: 300px;
            border: 1px solid #000;
            border-radius: 50%;
        }
        
        .axis {
            position: absolute;
            top: 150px;
            left: 150px;
            transform: translate(-50%, -50%);
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background-color: #000;
        }
        
        .hourHand {
            position: absolute;
            top: 150px;
            left: 147px;
            width: 6px;
            height: 80px;
            background-color: #000;
            transform-origin: 3px 0;
        }
        
        .minuteHand {
            position: absolute;
            top: 150px;
            left: 148px;
            width: 4px;
            height: 110px;
            background-color: #000;
            transform-origin: 2px 0;
        }
        
        .secondHand {
            position: absolute;
            top: 150px;
            left: 149px;
            width: 2px;
            height: 130px;
            background-color: #000;
            transform-origin: 1px 0;
        }
        
        .scale {
            position: absolute;
            top: 0;
            left: 150px;
            transform-origin: 2.5px 150px;
            width: 2px;
            height: 5px;
            background-color: #000;
        }
        
        .num {
            position: absolute;
            top: 15px;
            left: 150px;
            width: 20px;
            height: 20px;
            color: 16px;
            text-align: center;
            line-height: 20px;
            transform-origin: 50% 135px;
        }
        
        .num span {
            display: block;
            transform-origin: 50% 50%;
        }
</style>

html:

<div class="disc">
        <div class="axis"></div>
        <div class="hourHand"></div>
        <div class="minuteHand"></div>
        <div class="secondHand"></div>

</div>

js:

// Get the element var disc = document.getElementsByClassName('disc')[0];
        var hourHand = document.getElementsByClassName('hourHand')[0];
        var minuteHand = document.getElementsByClassName('minuteHand')[0];
        var secondHand = document.getElementsByClassName('secondHand')[0];
        var scale = document.getElementsByClassName('scale');

        // Generate scale for (var i = 0; i < 60; i++) {
            var scale = document.createElement('div');
            scale.classList.add('scale');
            scale.style.transform = `translate(-50%) rotate(${i*6}deg)`;
            disc.appendChild(scale);
            scale.style.transform = `translate(-50%) rotate(${i*6}deg)`;
            if (i % 5 === 0) {
                scale.style.width = 4 + 'px';
                scale.style.height = 12 + 'px';
            }
        }

        // Generate numbers for (var i = 0; i < 12; i++) {
            var num = document.createElement('div');
            var numx = document.createElement('span');
            num.classList.add('num');
            num.style.transform = `translate(-50%)rotate(${i*30+30}deg)`;
            numx.style.transform = `rotate(${-i*30-30}deg)`;
            numx.innerHTML = i + 1;
            disc.appendChild(num);
            num.appendChild(numx);
        }


        // Display as soon as the browser is opened, without pausing var h = getTime().hours;
        h = h > 12 ? h - 12 : h;
        hourHand.style.transform = `rotate(${h*30-180+(getTime().minute*0.5)}deg)`;
        minuteHand.style.transform = `rotate(${getTime().minute*6-180}deg)`;
        secondHand.style.transform = `rotate(${getTime().second*6-180}deg)`;

        // Timer, execute once every second setInterval(function() {
            var h = getTime().hours;
            h = h > 12 ? h - 12 : h;
            hourHand.style.transform = `rotate(${h*30-180+(getTime().minute*0.5)}deg)`;
            minuteHand.style.transform = `rotate(${getTime().minute*6-180}deg)`;
            secondHand.style.transform = `rotate(${getTime().second*6-180}deg)`;
        }, 1000)


        // Function: Get time function getTime() {
            var date = new Date();
            var year = date.getFullYear();
            var month = date.getMonth();
            month = month < 10 ? '0' + month : month;
            var day = date.getDate();
            day = day < 10 ? '0' + day : day;
            var week = date.getDay();
            var weeks = ['Sun', 'Mon', 'Tues', 'Wed', 'Thurs', 'Fri', 'Sat'];
            var weekZn = weeks[week];
            var hou = date.getHours();
            hou = hou < 10 ? '0' + hou : hou;
            var min = date.getMinutes();
            min = min < 10 ? '0' + min : min;
            var sec = date.getSeconds();
            sec = sec < 10 ? '0' + sec : sec;
            return {
                year: year,
                month: month,
                day: day,
                week: weekZn,
                hours: hou,
                minute: min,
                second: sec
            }
        }

For more JavaScript clock effects, click here: JavaScript clock effects special topic

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

You may also be interested in:
  • JS implements a method to prohibit high-frequency continuous clicks [based on ES6 syntax]
  • How to prevent high-frequency triggering and high-frequency calling of event functions in JavaScript
  • Do you know all 24 methods of JavaScript loop traversal?
  • Detailed explanation of JavaScript array deduplication
  • js to achieve a simple carousel effect
  • JavaScript to implement the aircraft war game
  • Even a novice can understand the difference between typeof and instanceof in js
  • A complete list of frequently asked JavaScript questions for front-end interviews

<<:  Implementing file content deduplication and intersection and difference in Linux

>>:  Detailed explanation of the use of MySQL DML statements

Recommend

How to view server hardware information in Linux

Hi, everyone; today is Double 12, have you done a...

Detailed explanation of Docker data backup and recovery process

The data backup operation is very easy. Execute t...

Detailed explanation of MySQL master-slave replication process

1. What is master-slave replication? The DDL and ...

Interactive experience trends that will become mainstream in 2015-2016

The most important interactive design article in ...

Several ways to switch between Vue Tab and cache pages

Table of contents 1. How to switch 2. Dynamically...

JavaScript to implement the web version of the snake game

This article shares the specific code for JavaScr...

How to build and deploy Node project with Docker

Table of contents What is Docker Client-side Dock...

JavaScript Advanced Closures Explained

Table of contents 1. The concept of closure Addit...

Mysql queries the transactions being executed and how to wait for locks

Use navicat to test and learn: First use set auto...

HTML+CSS makes div tag add delete icon in the upper right corner sample code

1. Requirements description Display the delete ic...

Building a selenium distributed environment based on docker

1. Download the image docker pull selenium/hub do...

Detailed explanation of various join summaries of SQL

SQL Left Join, Right Join, Inner Join, and Natura...