Relógio Analógico

<div className="relogioDiv">
<a id="btLInitRelogAnalo" className="btLInitRelogAnalo" onClick={() => {iniciarRelogioAnaogico()}}>
<BtLink href="" value={lingua("Iniciar Relogio Analogico","Start Analog Clock")} estilo="grafite"/>
</a>
<div id="relogioAnalogico" className="relogioFundo">
<div className="hora12">12</div>
<div className="hora6">6</div>
<div className="hora9">9</div>
<div className="hora3">3</div>
<div id="analogicHours" className="ponteiros hours"></div>
<div id="analogicMinutes" className="ponteiros minutes"></div>
<div id="analogicSeconds" className="ponteiros seconds"></div>
<div className="parafuso"></div>
</div>

var secondsSelector = 0;
var minutesSelector = 0;
var hoursSelector = 0;
var seconds = 0;
var minutes = 0;
var hours = 0;
var secondsSelector;
var minutesSelector;
var hoursSelector;

function getDate () {
var now = new Date();
seconds = now.getSeconds();
minutes = now.getMinutes();
hours = now.getHours();
toConvert(seconds, 60, secondsSelector);
toConvert(minutes, 60, minutesSelector);
toConvert(hours, 12, hoursSelector);
}

function toConvert(value, divider, selector) {
var convertResult = (( value / divider) * 360) + 90;
selector.style.transform = `rotate(${convertResult}deg)`;
}

function iniciarRelogioAnaogico(){
document.getElementById("relogioAnalogico").style.display = "block"; // Mostrar relogio.
document.getElementById("btLInitRelogAnalo").style.display = "none"; // Esconder botão de iniciar.
secondsSelector = document.getElementById("analogicSeconds");
minutesSelector = document.getElementById("analogicMinutes");
hoursSelector = document.getElementById("analogicHours");
setInterval(getDate, 1000);
}

.relogioDiv {
display: block;
}
.relogioFundo {
display: none;
background-color: #ffffff;
width: 200px;
height: 200px;
border-radius: 200px;
position: relative;
box-shadow: 5px 5px 20px #000;
background-position: 6px 12px;
background-size: cover;
}

.parafuso{
position: absolute;
background: #ACF0F2;
top: 50%;
left: 50%;
margin-top: -5px;
margin-left: -5px;
height: 10px;
width: 10px;
border-radius: 50px;
box-shadow: 1px 1px 8px #000;
}

.ponteiros {
width: 200px;
position: absolute;
top: 50%;
height: 2px;
margin-top: -1px;
}

.seconds::before {
content: "";
display: block;
background-color: #ACF0F2;
height: 3px;
width: 80px;
margin-left: 20px;
margin-top: -1px;
border-radius: 6px;
box-shadow: 1px 1px 8px #000;
}

.minutes::before {
content: "";
display: block;
background-color: #ACF0F2;
height: 4px;
width: 60px;
margin-left: 40px;
margin-top: -1px;
border-radius: 9px;
box-shadow: 1px 1px 8px #000;
}
.hours::before {
content: "";
display: block;
background-color: #ACF0F2;
height: 6px;
width: 50px;
margin-left: 50px;
margin-top: -1px;
border-radius: 11px;
box-shadow: 1px 1px 8px #333;
}
.hora12{
position: absolute;
display: block;
margin-top: 0px;
margin-left: 100px;
}
.hora6{
position: absolute;
display: block;
margin-top: 160px;
margin-left: 100px;
}
.hora9{
position: absolute;
display: block;
margin-top: 70px;
margin-left: 5px;
}
.hora3{
position: absolute;
display: block;
margin-top: 70px;
margin-left: 190px;
}