copia dicountdownfineanno by @LeoMosc - Codewith.it

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

References

heightDetermina l'altezza di un elemento HTML in pixel
getDefinisce un metodo di invio di dati al server
<blockquote>Inserisce citazioni in un documento HTML
headersDetermina la relazione tra celle e celle di intestazione di una tabella.
<datalist>Crea una lista di opzioni pre-definite ed editabili per elementi di input
<canvas>Tag per disegnare grafica dinamica su pagine web.

Users

Log in to search for users

Explore

Find inspiration

esercizio riepilogativo 2

Lola Harrel Project 2

JS Esercizio Concetti Gen es2

effect6 bouncing

Il mio primo sito(2)

Collegamenti ipertestuali

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