JSFiddle - React, Tailwind, and code Playground

by Tan

HTML

<div id="clock_container">
<div id="sec" class="sec"></div>
<div class="triangle-up"></div>
</div>


<div id="test">

</div>

<div class="test">

Overide <input id="overide" type="checkbox">

<select name="hours" id="hours">
  <option value="0">00</option>
  <option value="1">01</option>
  <option value="2">02</option>
  <option value="3">03</option>
    <option value="4">04</option>
      <option value="5">05</option>
        <option value="6">06</option>
          <option value="7">07</option>
            <option value="8">08</option>
              <option value="9">09</option>
                <option value="10">10</option>
                  <option value="11">11</option>
                    <option value="12">12</option>
                      <option value="13">13</option>
                        <option value="14">14</option>
                          <option value="15">15</option>
                            <option value="16">16</option>
                              <option value="17">17</option>
                                <option value="18">18</option>
                                  <option value="19">19</option>
                                    <option value="20">20</option>
                                      <option value="21">21</option>
                                        <option value="22">22</option>
                                          <option value="23">23</option>
                                    
</select>

<select name="mins" id="mins">
  <option value="0">00</option>
  <option value="15">15</option>
  <option value="30">30</option>
  <option value="45">45</option>
                                    
</select>

</div>

CSS

#clock_container {max-width:1000px;height:400px;margin:auto;border:1px solid #999999;
background-color:#dedede;
background:url('http://www.hloe.co.uk/clock.jpg');
background-repeat: repeat;
position:relative;
}

.triangle-up {
	width: 0;
	height: 0;
	border-left: 20px solid transparent;
	border-right: 20px solid transparent;
	border-bottom: 40px solid #B22D00;
  position:absolute;
  bottom:0;
  left: 50%;
  transform: translate(-50%, 0%);
}

#test, .test {text-align:center;margin:20px 0 0 0;}

.sec {position:absolute;top:0;left:0;height:5px;background-color:#B22D00;width:0%;}
.sec::after {content: attr(data-value);position:absolute;right:-20px;}

JavaScript

function id(x) {var y = document.getElementById(x);return y;}

var sec = id('sec');


function startTime() {

if (id('overide').checked) {

var h =  id('hours').value;  // 0;
var m =  id('mins').value; //  45;
var s =  30; //  45;
            
        } else {
        
var today = new Date();
var h =  today.getHours();  // 0;
var m =  today.getMinutes(); //  45;
var s =  today.getSeconds(); //  45;

        }
        
//  total width of clock //
        
var clock_width = id('clock_container').offsetWidth;

//  hours and minutes math //
  
var hsum = (h * 180);
var msum = (m * 3);

var sumtot = (hsum + msum);

var pos = -Math.abs(sumtot);

var newpos = (pos + (clock_width / 2) - 3);

//  seconds math //

var secSum = (100 / 60);
var secpos = (s * secSum);

sec.style.width = secpos + "%";
const element = document.getElementById('sec');
element.setAttribute('data-value', s);

id('clock_container').style.backgroundPosition = newpos + "px 0px";

id('test').innerHTML = h + ":" + m;
  
setTimeout(function() {startTime()}, 1000);
}

startTime();