Semplice Countdown
Utiliizando il solo oggetto HTML è possibile realizzare un semplice countdown responsive
Mancano al nuovo anno
CODICE IN OGGETTO HTML
<!-- custom code giancarloweb.it -->
<div class="container">
<h1>Countdown to the New Year:</h1>
<ul>
<li><span id="days"></span>days</li>
<li><span id="hours"></span>Hours</li>
<li><span id="minutes"></span>Minutes</li>
<li><span id="seconds"></span>Seconds</li>
</ul>
</div>
<!-- partial -->
<script>
const second = 1000,
minute = second * 60,
hour = minute * 60,
day = hour * 24;
let countDown = new Date('Dec 31, 2020 23:59:59').getTime(),
x = setInterval(function() {
let now = new Date().getTime(),
distance = countDown - now;
document.getElementById('days').innerText = Math.floor(distance / (day)),
document.getElementById('hours').innerText = Math.floor((distance % (day)) / (hour)),
document.getElementById('minutes').innerText = Math.floor((distance % (hour)) / (minute)),
document.getElementById('seconds').innerText = Math.floor((distance % (minute)) / second);
//do something later when date is reached
//if (distance < 0) {
// clearInterval(x);
//}
}, second)
</script>
CODICE ESPERTO IN OGGETTO HTML (CSS)
{
box-sizing: border-box;
margin: 0;
padding: 0;
}
h1 {
font-weight: normal;
color:#fff;
font-size: 1.5em;
}
li {
display: inline-block;
font-size: 1.5em;
color:#fff;
list-style-type: none;
padding: 10px;
text-transform: uppercase;
}
li span {
display: block;
font-size: 3.5rem;
}