Countdown fine anno by @Codewith - Codewith.it

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

References

selectedPre-seleziona un elemento di input
<h6>Titolo di intestazione di sesto livello
<th>Definisce una cella di intestazione di una tabella HTML.
<a>Inserisce link e collegamenti ipertestuali
actionDetermina la pagina di destinazione a cui verranno inviati i dati di un form HTML
formmethodDefinisce il metodo di invio dei dati oltre a method

Users

Log in to search for users

Explore

Find inspiration

Orologio Digitale

conta caratteri online

spiagge limitrofe

Esercitazione n. 1

menu a comparsa Jquery

Pro Vercelli Segreteria

educazione civica 2

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" onclick="changeFormat()">carico...
        </p>
        <button onclick="fullscreen()">
          Fullscreen
        </button>
      </div>
    </div>
  </body>
</html>

*{
  font-family: fantasy;
}
body{
  margin:0;
}
#cmain{
  width:100%;
  height:100%;
  background:#CC7A7A;
}
.chead{
}
.ccount{
  background:#CC3838;
  color:whitesmoke;
  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 #9D0000D6
}
#countdown{
  font-size:50pt;
  margin-top:5px;
  transition:1s;
}
.mini{
  font-size:30pt;
}
.ccount button{
  background:#CC3838;
  border:2px solid #CC3838;
  border-radius:3px;
  margin-bottom:2px;
}
.fullScreen #countdown {
  line-height: calc(75vh - 80pt);
  font-size:80pt;
}
.fullScreen .ccount{
  top:0;
  bottom:0;
}
.lastSec{
  color:#A20000;
  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');
}