copia dicountdownfineanno by @LeoMosc - Codewith.it

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

References

loopL'attributo loop è usato per la riproduzione continua dei contenuti video e audio
<tfoot>Definisce il footer o sezione inferiore di una tabella.
<ol>Crea liste ordinate o numerate.
postDefinisce un metodo di invio di dati al server
maxImposta il valore numerico o temporale massimo per un elemento input
<u> Utilizzato definire una parte del contenuto come annotazione non testuale, con una sottolineatura.

Users

Log in to search for users

Explore

Find inspiration

Heads Or Tails Random Tally

Review of Functions I

HTML: Guida Completa

One Magic Moment - Eventi Unici

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