How to Implement an Electronic Clock on the Web

This article mainly introduces how to use HTML, CSS, and JavaScript in the front-end to implement two schemes of a digital electronic clock.

HTML Example

<div class="time" id="time">
  <span class="hour"></span>
  <a class="split">:</a>
  <span class="minitus"></span>
  <a class="split">:</a>
  <span class="seconds"></span>
</div>

Method 1: JavaScript Timer

Use the periodic timer setInterval to execute code or code blocks according to the set time period.

<style>
html,body{
     margin: 0;
     height: 100%;
     display: grid;
     place-content: center;
}
.time{
display: flex;
align-items: center;
justify-content: center;
font-family: Consolas, Monaco, monospace;
font-size: 120px;
}
</style>
<script>
const hour = document.querySelector('.hour')
const minitus = document.querySelector('.minitus')
const seconds = document.querySelector('.seconds')
function getCurrentTime(){
let date=new Date();
let h=date.getHours();
let m=date.getMinutes();
let s=date.getSeconds();
if(h<10) h='0'+h;
if(m<10) m='0'+m;
if(s<10) s='0'+s;
hour.innerHTML=h;
minitus.innerHTML=m;
seconds.innerHTML=s;
}
getCurrentTime();
setInterval('getCurrentTime()',1000); //Update the time every second
</script>

Method 2: Use CSS @property

@property is a new CSS at-rule that is part of the CSS Houdini api. It allows developers to explicitly define css custom properties, and allows property type checking, setting default values, and defining whether the custom property can be inherited.

@property can directly register custom properties in the style sheet without running any JS code; it is also equipped with the corresponding JS syntax to record custom properties. @property custom properties are an upgraded version of CSS variables (CSS variables) declared variables, which are more standardized and rigorous than CSS variables.

<style>
@property --h { 
    syntax: '<integer>';
    inherits: false;
    initial-value: 0;
}
@property --m { 
    syntax: '<integer>';
    inherits: false;
    initial-value: 0;
}
@property --s { 
    syntax: '<integer>';
    inherits: false;
    initial-value: 0;
}
html,body{
    margin: 0;
    height: 100%;
    display: grid;
    place-content: center;
}
.time{
    display: flex;
    align-items: center;
    justify-content: center;
    --step: 60s;
    font-family: Consolas, Monaco, monospace;
    font-size: 120px;
}
.split{
    animation: shark 1s step-end infinite;
}
.hour::after{
    counter-reset: hour var(--h);
    content: counter(hour, decimal-leading-zero);
    animation: hour calc(var(--step) * 60 * 24) infinite steps(24);
    animation-delay: calc( -1 * var(--step) * var(--dh) * 60);
}
.minitus::after{
    counter-reset: minitus var(--m);
    content: counter(minitus, decimal-leading-zero);
    animation: minitus calc(var(--step) * 60) infinite steps(60);
    animation-delay: calc( -1 * var(--step) * var(--dm));
}
.seconds::after{
    counter-reset: seconds var(--s);
    content: counter(seconds, decimal-leading-zero);
    animation: seconds var(--step) infinite steps(60);
    animation-delay: calc( -1 * var(--step) * var(--ds) / 60 );
}
@keyframes hour {
    to {
        --h: 24
    }
}
@keyframes minitus {
    to {
        --m: 60
    }
}
@keyframes seconds {
    to {
        --s: 60
    }
}
@keyframes shark {
    0%, 100%{
        opacity: 1;
    }
    50%{
        opacity: 0;
    }
}	
</style>
<script>
	const d = new Date()
	const h = d.getHours();
	const m = d.getMinutes();
	const s = d.getSeconds();
	time.style.setProperty('--ds', s)
	time.style.setProperty('--dm', m + s/60)
	time.style.setProperty('--dh', h + m/60 + s/3600)
</script>


Leave a reply



Submit