Tag: #ClockAnimation

Categories
Web development

HTML5 Canvas Analog Clock

Canvas Clock JavaScript

Demo:

*to see the Canvas Analog Clock on the website click here.

To create the HTML5 Canvas Analog Clock follow the steps below:

  1. Add HTML
  2. Add CSS
  3. Add JavaScript

Step1.

Add HTML

<canvas id="canvas-clock" width="300" height="300"</canvas>

Step2.

Add CSS

Set the colour and the position of the background and elements:

body {
  background-color: #778da9;
  display: flex;
  height: 100vh;
  align-items: center;
  justify-content: center;
}

#canvas-clock {
  position: relative;
  background-color: transparent;  
}

Step3.

Add JavaScript

var canvas = document.getElementById("canvas-clock");
var contex = canvas.getContext("2d");
var radius = canvas.height / 2;
contex.translate(radius, radius);
radius = radius * 0.90
setInterval(drawClock, 1000);

function drawClock() {
  drawFace(contex, radius);
  drawNumbers(contex, radius);
  drawTime(contex, radius);
}

function drawFace(contex, radius) {
  var grad;
  contex.beginPath();
  contex.arc(0, 0, radius, 0, 2*Math.PI);
  contex.fillStyle = '#e0e1dd';
  contex.fill();
  contex.strokeStyle = "#333";
  contex.lineWidth = radius*0.1;
  contex.stroke();
  contex.beginPath();
  contex.arc(0, 0, radius*0.1, 0, 2*Math.PI);
  contex.fillStyle = '#333';
  contex.fill();
}

function drawNumbers(contex, radius) {
  var ang;
  var num;
  contex.font = radius*0.15 + "px Helvetica";
  contex.textBaseline="middle";
  contex.textAlign="center";
  for(num = 1; num < 13; num++){
    ang = num * Math.PI / 6;
    contex.rotate(ang);
    contex.translate(0, -radius*0.85);
    contex.rotate(-ang);
    contex.fillText(num.toString(), 0, 0);
    contex.rotate(ang);
    contex.translate(0, radius*0.85);
    contex.rotate(-ang);
  }
}

function drawTime(contex, radius){
    var now = new Date();
    var hour = now.getHours();
    var minute = now.getMinutes();
    var second = now.getSeconds();
    
    hour=hour%12;
    hour=(hour*Math.PI/6)+
    (minute*Math.PI/(6*60))+
    (second*Math.PI/(360*60));
    drawHand(contex, hour, radius*0.5, radius*0.07);
    
    minute=(minute*Math.PI/30)+(second*Math.PI/(30*60));
    drawHand(contex, minute, radius*0.8, radius*0.07);
    
    second=(second*Math.PI/30);
    drawHand(contex, second, radius*0.9, radius*0.02);
}

function drawHand(contex, pos, length, width) {
    contex.beginPath();
    contex.lineWidth = width;
    contex.lineCap = "round";
    contex.moveTo(0,0);
    contex.rotate(pos);
    contex.lineTo(0, -length);
    contex.stroke();
    contex.rotate(-pos);
}

Enjoy coding!

Read also:

CSS & JavaScript Digital Clock

Countdown Timer

HTML & CSS Clock Animation

Categories
Web development

CSS & JavaScript Digital Clock

CSS digital clock

Demo:

*to see the Digital Clock on the website click here.

What do you need to do?

To create the CSS & JavaScript Digital Clock follow the steps below and watch the video tutorial.

  1. Add HTML
  2. Add CSS
  3. Add JavaScript (to set the current time)

Step1

Add HTML

Project your Clock: 

<div class="digital-clock">
  <div class="clock">
  </div>
  <div id="DigitalClock" class="time" onload="showTime()"></div>
</div>

Step2.

Add CSS

Import the font:

@import url('https://fonts.googleapis.com/css2?family=ZCOOL+QingKe+HuangYou&display=swap');

Set the colour and the position of the background and elements:

body {
  display: flex;
  height: 100vh;  
  align-items: center;
  justify-content: center;
 }

.digital-clock {
  position: relative;
  width:350px;
  height:350px;
  background-color: #83c5be;
  overflow: hidden;
  border-radius:50%;
  z-index:1;
}

Style the Clock: 

.clock {
  position: absolute;
  width: 200px;
  height: 80px;
  border:10px solid #e5e5e5;
  background-color:#14213d;
  top:130px;
  left:65px;
  z-index:2;
}

.clock:before {
  content:"";
  position: absolute;
  width:20px;
  height:10px;
  background-color: #333;
  top:90px;
  left:20px;
  border-radius:0 0 10px 10px;
  box-shadow: 135px 0 #333;
}

.clock:after {
  content:"";
  position: absolute;
  width:150px;
  height:10px;
  background-color: #fca311;
  top:-20px;
  left:25px;
  border-radius:20px 20px 0 0;
}
CSS Digital Clock

Add the shadow:

.digital-clock:before {
  content:"";
  position: absolute;
  width:200px;
  height:200px;
  background-color: #699e98;
  top:130px;
  left:185px;
  transform: skew(45deg);
}

.digital-clock:after {
  content:"";
  position: absolute;
  background-color: #699e98;
  transform: skew(45deg);
  width:120px;
  height:200px;
  top:230px;
  left:165.5px;
}
CSS Digital Clock

Add the time to the clock (the time will be visible after adding to the code JavaScript): 

.time {
  position: absolute;
  transform: translateX(-50%) translateY(-50%);
  font-family: 'ZCOOL QingKe HuangYou', cursive;
  font-size:70px;
  z-index:3;
  color: #d9ed92;
  top:177px;
  left:174px
}

Step3.

Add JavaScript

Set the current time: 

function showTime(){
    var date = new Date();
    var h = date.getHours(); 
    var m = date.getMinutes();    
    
    if(h == 0){
        h = 12;
    }
    
    if(h > 12){
        h = h - 12;       
    }
    
    h = (h < 10) ? "0" + h : h;
    m = (m < 10) ? "0" + m : m;
    
    
    var time = h + ":" + m;
    document.getElementById("DigitalClock").innerText = time;
    document.getElementById("DigitalClock").textContent = time;
    
    setTimeout(showTime, 1000);
   
}

showTime();

Watch also the video tutorial:

Enjoy coding!

Hey, here’s something that might interest you:

HTML5 Canvas Analog Clock

JavaScript – Time and date

CSS & jQuery Stopwatch

Categories
Web development

What time is it? – CSS Analog Clock Animation

css analog clock

Demo:

*to see the CSS Analog Clock on the website click here.

What do we need to do?

First, you need to have a clock face image (you can use this one below), and then follow three steps:

Clock Face
  1. Add HTML
  2. Add CSS
  3. Add JavaScript (set the current time)

Step 1.

We need to create a clock face with hours, minutes, and seconds:

 <div class="clock">
  <div class="hour">
   <div class="hr" id="hr"></div>
  </div>
  <div class="minutes">
   <div class="min" id="min"></div>
  </div>
  <div class="seconds">
   <div class="sec" id="sec"></div>
  </div>
</div>

Step 2.

Add CSS

Set the colour and the position of the background and elements:

body {
 display: flex;
 justify-content: center;
 align-items: center;
 height: 100vh;
 background-color: #008080;        
}

Style the clock:

.clock {
 display: flex;
 justify-content: center;
 align-items: center;
 width: 350px;
 height: 350px;
 background: #8c2f39 url(https://lenadesignorg.files.wordpress.com/2020/01/clock-2.png?w=344);
 border-radius: 50%;
 border: 20px solid #b23a48; 
}

.clock:before {
 content: '';
 position: absolute;
 width: 15px;
 height: 15px;
 background-color: #333;
 border: 2px solid #8c2f39;
 border-radius: 50%;
 z-index:10;
}

.hour, .minutes, .seconds {
 position: absolute;
}

.hour, .hr {
 width: 160px;
 height: 160px;
}

.minutes, .min {
 width: 190px;
 height: 190px;
}

.seconds, .sec {
 width: 230px;
 height: 230px;
}

.hr,.min,.sec {
 display: flex;
 justify-content: center;
 position: absolute;
 border-radius: 50%;
}

.hr:before {
 content: '';
 position: absolute;
 width: 8px;
 height: 80px;
 background: #848484;
 border-radius: 6px 6px 0 0;
}

.min:before {
 content: '';
 position: absolute;
 width: 4px;
 height: 90px;
 background-color: #d6d6d6;
 border-radius: 6px 6px 0 0;
}

.sec:before {
 content: '';
 position: absolute;
 width: 2px;
 height: 150px;
 background-color: red;
 border-radius: 6px 6px 0 0;
}

Step 3.

Add JavaScript

Set the current time.

 const deg = 6;
 const hr = document.querySelector("#hr");
 const mn = document.querySelector("#min");
 const sc = document.querySelector("#sec");
 setInterval(() => {
  let day = new Date();
  let hh = day.getHours() * 30;
  let mm = day.getMinutes() * deg;
  let ss = day.getSeconds() * deg;
  hr.style.transform = `rotateZ(${hh+(mm/12)}deg)`;
  mn.style.transform = `rotateZ(${mm}deg)`;
  sc.style.transform = `rotateZ(${ss}deg)`;
 })


function initLocalClocks() {
  // Get the local time using JS
  var date = new Date;
  var seconds = date.getSeconds();
  var minutes = date.getMinutes();
  var hours = date.getHours();
  var hands = [
    {
      hand: 'hr',
      angle: (hr * 30) + (min / 2)
    },
    {
      hand: 'mn',
      angle: (mn * 6)
    },
    {
      hand: 'sc',
      angle: (sc * 6)
    }
  ];
  for (var j = 0; j < hands.length; j++) {
    var elements = document.querySelectorAll('.' + hands[j].hand);
    for (var k = 0; k < elements.length; k++) {
        elements[k].style.webkitTransform = 'rotateZ('+ hands[j].angle +'deg)';
        elements[k].style.transform = 'rotateZ('+ hands[j].angle +'deg)';
        // If this is a minute hand, note the seconds position (to calculate minute position later)
        if (hands[j].hand === 'mn') {
          elements[k].parentNode.setAttribute('data-second-angle', hands[j + 1].angle);
        }
    }
  }
}

To see the CSS Analog Clock on the website visit: lenastanley.com

Enjoy coding!

Read also:

CSS & JavaScript Digital Clock

JavaScript – Time and date

HTML5 Canvas Analog Clock