How Can I Code A Clock To Show Me That How Much Time Is Left Of The Day?
I have succeeded to make a clock using HTML, CSS and JS. But now I want it not to show me the time but to show me how much time is left of the day. I'm not sure, maybe it would be
Solution 1:
not sure this is what you need but here is an attempt, this will show the tie left till midnight using the time of your device
<!DOCTYPE html><htmllang="en"><head><title>InversedClock</title><linkhref="https://fonts.googleapis.com/css2?family=Concert+One&display=swap"rel="stylesheet"><style>#clock {
margin: auto;
width: 300px;
height: ;
background-color: black;
font-family: "Concert One";
color: #7ef9ff;
font-size: 48px;
text-align: center;
padding: 5px5px5px5px;
}
</style></head><body><divid="clock"></div><script>functioncurrentTime() {
var toDate = newDate();
var tomorrow = newDate();
tomorrow.setHours(24, 0, 0, 0);
var diffMS = tomorrow.getTime() / 1000 - toDate.getTime() / 1000;
var diffHr = Math.floor(diffMS / 3600);
diffMS = diffMS - diffHr * 3600;
var diffMi = Math.floor(diffMS / 60);
diffMS = diffMS - diffMi * 60;
var diffS = Math.floor(diffMS);
var result = ((diffHr < 10) ? "0" + diffHr : diffHr);
result += ":" + ((diffMi < 10) ? "0" + diffMi : diffMi);
result += ":" + ((diffS < 10) ? "0" + diffS : diffS);
document.getElementById("clock").innerText = result; /* adding time to the div */var t = setTimeout(function() {
currentTime()
}, 1000); /* setting timer */
}
functionupdateTime(k) {
if (k < 10) {
return"0" + k;
} else {
return k;
}
}
currentTime(); /* calling currentTime() function to initiate the process */</script></body></html>Solution 2:
Basically, all what you need to do is set the end date you want to compare against, to the end of the day.
var countDownDate = newDate();
countDownDate.setHours(23, 59, 59, 999);
To make sure that you show 01 seconds left instead of 1, you could do as following:
yourResult.toString().padStart(2, "0");
This solution is inspired by this post by w3schools
<!DOCTYPE html><htmllang="en"><head><title>InversedClock</title><linkhref="https://fonts.googleapis.com/css2?family=Concert+One&display=swap" ><style>#clock {
margin: auto;
width: 300px;
height: ;
background-color: black;
font-family: "Concert One";
color: #7ef9ff;
font-size: 48px;
text-align: center;
padding: 5px5px5px5px;
}
</style></head><body><divid="clock"></div><script>// Update the count down every 1 secondvar x = setInterval(function() {
var countDownDate = newDate();
countDownDate.setHours(23, 59, 59, 999);
// Get today's date and timevar now = newDate().getTime();
// Find the distance between now and the count down datevar distance = countDownDate - now;
// Time calculations for days, hours, minutes and secondsvar days = Math.floor(distance / (1000 * 60 * 60 * 24));
var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)).toString().padStart(2, "0");
var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60)).toString().padStart(2, "0");
var seconds = Math.floor((distance % (1000 * 60)) / 1000).toString().padStart(2, "0");
// Display the result in the element with id="clock"document.getElementById("clock").innerText = hours + " : " + minutes + " : " + seconds; /* adding time to the div */
}, 1000);
</script></body></html>Solution 3:
just use your code and the values you already have
<!DOCTYPE html><htmllang="en"><head><title>InversedClock</title><linkhref="https://fonts.googleapis.com/css2?family=Concert+One&display=swap"rel="stylesheet"><style>#clock {
margin: auto;
width: 300px;
height:100px ;
background-color: black;
font-family: "Concert One";
color: #7ef9ff;
font-size: 48px;
text-align: center;
padding: 5px5px5px5px;
}
#endclock {
display:block
margin: auto;
width: 300px;
height: 100px;
background-color: black;
font-family: "Concert One";
color: #7ef9ff;
font-size: 48px;
text-align: center;
padding: 5px5px5px5px;
}
</style></head><body><divid="clock"></div><divid="endclock"></div><script>functioncurrentTime() {
var date = newDate(); /* creating object of Date class */var hour = date.getHours();
var min = date.getMinutes();
var sec = date.getSeconds();
hour = updateTime(hour);
min = updateTime(min);
sec = updateTime(sec);
document.getElementById("clock").innerText = hour + " : " + min + " : " + sec; /* adding time to the div */document.getElementById("endclock").innerText = pad(23-hour) + " : " + pad(59-min) + " : " + pad(60-sec); /* adding time to the div */var t = setTimeout(function(){ currentTime() }, 1000); /* setting timer */
}
functionpad(n) {
return (n < 10) ? ("0" + n) : n;
}
functionupdateTime(k) {
if (k < 10) {
return"0" + k;
}
else {
return k;
}
}
currentTime(); /* calling currentTime() function to initiate the process */</script></body></html>Solution 4:
setInterval(function() {
var endTimer = newDate();
endTimer.setHours(23,59,59); // ms until time setvar now = newDate().getTime(); // ms nowvar dist = (endTimer - now)/1000; // dist in secs var hrs = Math.floor(dist/3600).toString();
var mins = Math.floor((dist - hrs * 3600)/60).toString();
var secs = Math.floor((dist - hrs * 3600 - mins * 60)).toString();
document.getElementById('clock').innerText =
hrs.padStart(2,'0') + ':' + mins.padStart(2,'0') + ':' + secs.padStart(2,'0');
},1000);#clock {
color: #black;
font-size: 48px;
text-align: center;
padding: 5px;
}<divid="clock"></div>
Post a Comment for "How Can I Code A Clock To Show Me That How Much Time Is Left Of The Day?"