copia dicountdownfineanno by @LeoMosc - Codewith.it

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

References

<map>Inserisce immagini mappa cliccabili in un documento
acceptDefinisce e filtra il formato dei file per il tag <input type=file>
<link>Collega il documento corrente con una risorsa esterna
valueValore alfanumerico o booleano contenuto in un elemento
<option>Serve ad inserire una voce in un menu di selezione.
targetDetermina il comportamento di un collegamento ipertestuale alla sua apertura

Users

Log in to search for users

Explore

Find inspiration

Heads Or Tails Random Tally

Esercitazione STA 16/03

pagina America(2)

La Storia di Cappuccetto Rosso

esercizio 1.1-1.6

pagina_personale

Mundane Mondays or Fantastic Frida

formattazione_testo.html.(2)

HTML

CSS

JS

terminal console

feedback

add_box New

cookie Policy

Privacy information and cookies

We use cookies or technologies for technical purposes and, with your consent, also for other purposes as specified in the cookie policy. Refusal of consent may make some functions unavailable. Read more about the privacy policy

Click on “Agree” to confirm.

<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');
}