copia dicountdownfineanno by @LeoMosc - Codewith.it

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

Referenze

<canvas>Tag per disegnare grafica dinamica su pagine web.
<hr>Inserisce una linea orizzontale
<i>Formatta il testo in corsivo/italico non enfatizzato
<table>Tag primario per la creazione di tabelle
requiredRende obbligatorio un campo di input
hrefDefinisce l'URL della risorsa/pagina di destinazione.

Utenti

Accedi per cercare utenti

Esplora

Trova ispirazione

Home principale

Modal Animations

scheda paziente es esame

Scheda Tecnica Xiaomi 14 Ultra

Titolo della pagina

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.

<html>
  <head>
    <title>Countdown alla fine dell'anno
    </title>
  </head>
  <body>
    <div id="cmain">
      <div class="ccount">  
        <div class="chead">
          <p>
            Countdown alla fine del 
            <span id="nextyear">
            </span>
          </p>
        </div>
        <p id="countdown">caricamento...
        </p>
        <button onclick="fullscreen()">
          Fullscreen
        </button>
      </div>
    </div>
  </body>
</html>

*{
  font-family: fantasy;
}
body{
  margin:0;
}
#cmain{
  width:100%;
  height:100%;
  background:#CCC47A;
}
.chead{
}
.ccount{
  background:#CCC838;
  color:rgb(245,245,245);
  text-align:center;
  position:fixed;
  margin:auto;
  top:0;
  bottom:auto;
  left:0;
  right:0;
  text-shadow:2px 2px 5px #00000084;
  box-shadow:4px 0 8px #00000044, inset 0px -20px 40px #9D9000D6
}
#countdown{
  font-size:50pt;
  margin-top:5px;
  transition:1s;
}
.mini{
  font-size:30pt;
}
.ccount button{
  background:#C6CC38;
  border:2px solid #CCC938;
  border-radius:3px;
  margin-bottom:2px;
}
.fullScreen #countdown {
  line-height: calc(75vh - 80pt);
  font-size:80pt;
}
.fullScreen .ccount{
  top:0;
  bottom:0;
}
.lastSec{
  color:#9CA200;
  text-shadow:0px 0px 20px  #F9F9F9F9;
  font-size:90pt;
}

var currentYear =new Date().getFullYear();
var nextYear  =currentYear +1
document.getElementById("nextyear").innerHTML  = currentYear;
document.title = "Countdown alla fine del "+ currentYear;
var countDownDate = new Date("Jan 1, "+nextYear+" 00:00:00").getTime();
var refresh = 100;
var x = setInterval(function() {
  var now = new Date().getTime();
  var distance = countDownDate - now;
  var days = Math.floor(distance / (1000 * 60 * 60 * 24));
  var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
  var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
  var seconds = Math.floor((distance % (1000 * 60)) / 1000);
  var mseconds = Math.floor((distance % (1000))/100);
  var par =  document.getElementById("countdown");
  if(distance/1000 < 10){
    seconds = "<span class='lastSec'>"+ seconds+"</span>";
  }
  switch (format){
    case 0:
      par.innerHTML = days + "<span class='mini'>d</span> " + hours + "<span class='mini'>h</span> " + minutes + "<span class='mini'>m</span> " + seconds + "<span class='mini'>s</span> ";
      break
      case 1:
      par.innerHTML = days + "<span class='mini'>d</span> " + hours+":"+minutes+":"+seconds;
      break
      case 2:
      par.innerHTML = "-"+days + " <span class='mini'>giorni</span> " + hours+" <span class='mini'>ore,</span> "+minutes+" <span class='mini'>minuti e </span>"+seconds+ "<span class='mini'> secondi</span>";
      break 
      case 3:
      par.innerHTML = days + " " + hours+":"+minutes+":"+seconds+ "<span class='mini'>:"+mseconds+"</span>";
      break
                }
  if (distance < 0) {
    clearInterval(x);
    par.innerHTML = "EXPIRED";
  }
}
                    , refresh);
var format = 0
function changeFormat(){
  if (format < 3){
    format++;
  }
  else{
    format = 0;
  }
}
var fullscrn = false;
function fullscreen(){
  document.body.classList.toggle('fullScreen');
}