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

HTML cellpadding and cellspacing attributes explained in pictures

Cell -- the content of the table Cell margin (tabl...

Nginx installation detailed tutorial

1. Brief Introduction of Nginx Nginx is a free, o...

Steps for Vue to use Ref to get components across levels

Vue uses Ref to get component instances across le...

How to configure MySQL8 in Nacos

1. Create the MySQL database nacos_config 2. Sele...

Solution to mysql failure to start due to insufficient disk space in ubuntu

Preface Recently, I added two fields to a table i...

Detailed explanation of invisible indexes in MySQL 8.0

Word MySQL 8.0 has been released for four years s...

Some notes on installing fastdfs image in docker

1. Prepare the Docker environment 2. Search for f...

HTML Nine-grid Layout Implementation Method

Diversifying website layouts is our front-end spe...

How to configure MySQL on Ubuntu 16.04 server and enable remote connection

background I am learning nodejs recently, and I r...

What is em? Introduction and conversion method of em and px

What is em? em refers to the font height, and the ...

Tutorial on installing mysql8 on linux centos7

1. RPM version installation Check if there are ot...

MySQL replication table details and example code

MySQL replication table detailed explanation If w...

Implementation example of JS native double-column shuttle selection box

Table of contents When to use Structural branches...

How does JS understand data URLs?

Table of contents Overview Getting started with d...