如何编码时钟以显示一天还剩多少时间? [英] How can I code a clock to show me that how much time is left of the day?
本文介绍了如何编码时钟以显示一天还剩多少时间?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我已经成功地使用 HTML、CSS 和 JS 制作了一个时钟.但现在我希望它不显示时间，而是显示一天还剩多少时间.
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.
<!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 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 */
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>我不确定，也许它就像一个倒数计时器，但我猜它会与时钟同步.
I'm not sure, maybe it would be like a count down timer, but it will be synched with the clock I guess.
推荐答案
不确定这是您需要的，但这是一个尝试，这将使用您设备的时间显示直到午夜的领带
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>这篇关于如何编码时钟以显示一天还剩多少时间?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
