Orologio Analitico by @AlessandroGallo - Codewith.it

#main, .loader-cont { display: none; } JavaScript disabilitato.
Non puoi usare Codewith.it senza JavaScript.

Referenze

<i>Formatta il testo in corsivo/italico non enfatizzato
dirnameInvia informazioni sulla direzione di scrittura da un elemento input
crossoriginGestisce richieste tra documenti provenienti da origini differenti.
langSpecifica la lingua del contenuto di un elemento
<link>Collega il documento corrente con una risorsa esterna
postDefinisce un metodo di invio di dati al server

Utenti

Accedi per cercare utenti

Esplora

Trova ispirazione

Ricomincio da Zero

copia di html typing

I Nostri Servizi

GUIDA GALATTICA PER AUTOSTOPPISTI

Custom JS alert box

esercitazione n1

Review of Functions I

HTML

CSS

JS

terminal console

feedback

add_box Nuovo

cookie Informativa

Informativa privacy e cookies

Utilizziamo cookie o tecnologie per finalità tecniche e, con il tuo consenso, anche per altre finalità come specificato nella cookie policy. Il rifiuto del consenso può rendere non disponibili alcune funzioni. Leggi di più sull'informativa privacy

Clicca su “Accetta” per acconsentire.

<Doctype html>
<html>
  <head>
   
  </head>
  <body>
    <div class="orologio">
  <div class="ora">
      <div class="o" id="o"></div>
  </div>
    <div class="min">
      <div class="m" id="m"></div>
  </div>
    <div class="sec">
      <div class="s" id="s"></div>
  </div>
</div>
  </body>
</html>

.orologio{
  width:350px;
  height:350px;
  display:flex;
  justify-content:center;
  align-items:center; 
  background:url(
    https://www.byte-post.com/wp-content/uploads/2020/03/clock-number-only.png
  );
  background-size:cover;
  border:10px solid #000000;
  border-radius:50%;
  box-shadow: 0 15px 15px rgba(0,0,0,0.3);
}
.orologio:before{
  content:'';
  position:absolute;
  width:15px;
  height:15px;
  background:#000;
  border-radius:50%;
  z-index:100;
}

.orologio .ora, .orologio .min,  .orologio .sec {
  position:absolute;
}

.o {
  width:160px;
  height:160px;
}

.m {
  width:190px;
  height:190px;
}

.s {
  width:230px;
  height:230px;
}

.o, .m, .s {
  display:flex;
  justify-content:center;
  border-radius:50%;
}

.o:before {
  content:'';
  position:absolute;
  width: 8px;
  height:80px;
  background:red;
  border:1px solid rgb(166,0,0);
  z-index:8;
}

.m:before {
  content:'';
  position:absolute;
  width: 5px;
  height:90px;
  background:red;
  border:1px solid rgb(166,0,0);
  z-index:9;
}

.s:before {
  content:'';
  position:absolute;
  width: 2px;
  height:150px;
  border:1px solid rgb(166,0,0);
  background:red;
  z-index:10;
}

.o:before, .m:before, .s:before{
  box-shadow: 3px  3px 4px  rgba(0,0,0,0.24);
}

  function time(){
  const deg = 6;
  const o = document.querySelector('#o');
  const m = document.querySelector('#m');
  const s = document.querySelector('#s');
    var gg = new Date();
    var oo = gg.getHours() * 30;
    var mm = gg.getMinutes() * deg;
    var ss = gg.getSeconds() * deg;
    o.style.transform = `rotateZ(${(oo)+(mm/12)}deg)`;
    m.style.transform = `rotateZ(${mm}deg)`;
    s.style.transform = `rotateZ(${ss}deg)`;
  }
setInterval(time, 1000);