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>
<html lang="en">
<head>
<title>InversedClock</title>
<link href="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: 5px 5px 5px 5px;
}
</style>
</head>
<body>
<div id="clock"></div>
<script>
function currentTime() {
var toDate = new Date();
var tomorrow = new Date();
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 */
}
function updateTime(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 = new Date();
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>
<html lang="en">
<head>
<title>InversedClock</title>
<link href="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: 5px 5px 5px 5px;
}
</style>
</head>
<body>
<div id="clock"></div>
<script>
// Update the count down every 1 second
var x = setInterval(function() {
var countDownDate = new Date();
countDownDate.setHours(23, 59, 59, 999);
// Get today's date and time
var now = new Date().getTime();
// Find the distance between now and the count down date
var distance = countDownDate - now;
// Time calculations for days, hours, minutes and seconds
var 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>
<html lang="en">
<head>
<title>InversedClock</title>
<link href="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: 5px 5px 5px 5px;
}
#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: 5px 5px 5px 5px;
}
</style>
</head>
<body>
<div id="clock"></div>
<div id="endclock"></div>
<script>function currentTime() {
var date = new Date(); /* 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 */
}
function pad(n) {
return (n < 10) ? ("0" + n) : n;
}
function updateTime(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 = new Date();
endTimer.setHours(23,59,59); // ms until time set
var now = new Date().getTime(); // ms now
var 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;
}<div id="clock"></div>
Post a Comment for "How Can I Code A Clock To Show Me That How Much Time Is Left Of The Day?"