用 JavaScript 制作实时时钟
[英]Making a live clock in javascript
问题描述
The clock kinda works.
时钟有点用。 But instead of replacing the current time of day it prints a new time of day every second.但它不是替换当前时间，而是每秒打印一个新时间。 I understand why it do it but I don't know how to fix it.我明白为什么会这样，但我不知道如何解决它。 I would appreciate if you could give me some tips without saying the answer straight out.如果您能在不直接说出答案的情况下给我一些提示，我将不胜感激。 Thank you.谢谢你。 Here is my code:这是我的代码：
function time(){
var d = new Date();
var s = d.getSeconds();
var m = d.getMinutes();
var h = d.getHours();
document.write(h + ":" + m + ":" + s);
}
setInterval(time,1000);
16 个解决方案
解决方案1
24 2016-09-09 19:23:30
Add a span element and update its text content.添加一个 span 元素并更新其文本内容。
var span = document.getElementById('span'); function time() { var d = new Date(); var s = d.getSeconds(); var m = d.getMinutes(); var h = d.getHours(); span.textContent = ("0" + h).substr(-2) + ":" + ("0" + m).substr(-2) + ":" + ("0" + s).substr(-2); } setInterval(time, 1000);
<span id="span"></span>
Answer updated [2021] https://stackoverflow.com/a/67149791/7942242答案已更新 [2021] https://stackoverflow.com/a/67149791/7942242
解决方案2
15 2020-01-17 19:13:58
You can also use toLocaleTimeString() on Date() to just get your display date instead of creating through so many variables.您还可以在 Date() 上使用 toLocaleTimeString() 来获取显示日期，而不是通过这么多变量创建。
window.onload = displayClock(); function displayClock(){ var display = new Date().toLocaleTimeString(); document.body.innerHTML = display; setTimeout(displayClock, 1000); }
解决方案3
4 2021-04-18 10:52:19
Here's my answer, hope it may help.这是我的回答，希望对你有帮助。
<html> <body> <script type="text/javascript" charset="utf-8"> let a; let time; setInterval(() => { a = new Date(); time = a.getHours() + ':' + a.getMinutes() + ':' + a.getSeconds(); document.getElementById('time').innerHTML = time; }, 1000); </script> <span id="time"></span> </body> </html>
I have used the setInterval arrow function and declared the variables a , time outside so as to avoid repeated allocation, where the span id(time) runs for a specified interval(here it is 1000) and document.getElementById("time") call gets you the element by the specified ID and also it's setting the innerHTML of that element to the value of time .我使用了setInterval箭头函数并在外部声明了变量a , time以避免重复分配，其中 span id(time) 运行指定的时间间隔（这里是 1000）和document.getElementById("time")调用通过指定的 ID 获取元素，并将该元素的innerHTML设置为time的值。
解决方案4
4 2021-04-18 14:38:29
只需使用new Date().toLocaleTimeString()它会给你你想要的。
setInterval(() => console.log(new Date().toLocaleTimeString()),1000);
解决方案5
3 2018-04-07 14:35:15
Please follow this link https://codepen.io/uniqname/pen/eIApt you will get your desire clock or try this code请点击此链接https://codepen.io/uniqname/pen/eIApt您将获得您想要的时钟或尝试此代码
<!DOCTYPE html>
<html>
<head>
<script>
function startTime() {
var today = new Date();
var h = today.getHours();
var m = today.getMinutes();
var s = today.getSeconds();
m = checkTime(m);
s = checkTime(s);
document.getElementById('txt').innerHTML =
h + ":" + m + ":" + s;
var t = setTimeout(startTime, 500);
}
function checkTime(i) {
if (i < 10) {i = "0" + i}; // add zero in front of numbers < 10
return i;
}
</script>
</head>
<body onload="startTime()">
<div id="txt"></div>
</body>
</html>
解决方案6
2 2021-07-09 05:18:02
Code will display clock in digital format代码将以数字格式显示时钟
function myClock() { setTimeout(function() { const d = new Date(); const n = d.toLocaleTimeString(); document.getElementById("demo").innerHTML = n; myClock(); }, 1000) } myClock();
<html> <body> <div id="demo"></div> </body> </html>
解决方案7
1 2020-06-18 03:33:36
This can be nicely done using ES6.这可以使用 ES6 很好地完成。
const clock12 = document.getElementById('clock12') const clock24 = document.getElementById('clock24') // Concatenate a zero to the left of every single digit time frame function concatZero(timeFrame) { return timeFrame < 10 ? '0'.concat(timeFrame) : timeFrame } function realTime() { let date = new Date() let sec = date.getSeconds() let mon = date.getMinutes() let hr = date.getHours() // 12 hour time // If the hour equals 0 or 12, the remainder equals 0, so output 12 instead. (0 || 12 = 12) clock12.textContent = `${concatZero((hr % 12) || 12)} : ${concatZero(mon)} : ${concatZero(sec)} ${hr >= 12 ? 'PM' : 'AM'}` // 24 hour time clock24.textContent = `${concatZero(hr)} : ${concatZero(mon)} : ${concatZero(sec)}` } setInterval(realTime, 1000)
body, html { height: 100%; display: grid; } div { margin: auto; font-size: 2rem; font-family: consolas; }
<div> <p id="clock12"></p> <p id="clock24"></p> </div>
解决方案8
1 2021-04-07 07:39:47
If this is the root of your problem如果这是您问题的根源
But instead of replacing
then you can't make the Date object responsive, because那么你不能让Date 对象响应，因为
JavaScript Date objects represent
If you don't wish to create a new object every second, you can register a dedicated Web worker that calls performance.now() every second, but this is more demanding on system resources than simply creating the Date object, which just copies the actual system clock (thus not creating a separate process for measuring the time).如果你不希望每秒创建一个新对象，你可以注册一个每秒调用performance.now()的专用Web 工作者，但这比简单地创建 Date 对象更需要系统资源，后者只是复制实际的系统时钟（因此不会创建一个单独的过程来测量时间）。 tl;dr: just create a new Date object every second as you do. tl；博士：只需像您一样每秒创建一个新的 Date 对象。
The root of your document.write() issue stems fromthis :您的document.write()问题的根源在于：
Because document.write() writes to the document stream, calling document.write() on a closed (loaded) document
To update part of your page, you usually set innerHTML of some element as @Pranav suggests.要更新页面的一部分，您通常会按照@Pranav 的建议设置某些元素的innerHTML 。
解决方案9
1 2021-12-26 04:17:22
<html> <head> <script> function clock() { var clockDiv = document.querySelector("#clock"); return setInterval(() => { let date = new Date(); let tick = date.toLocaleTimeString(); clockDiv.textContent = tick; }, 1000); } </script> </head> <body onload="clock()"> <div id="clock"></div> </body> </html>
解决方案10
0 2016-09-09 19:27:06
A working demo, follow the link一个工作演示，点击链接
http://www.w3schools.com/js/tryit.asp?filename=tryjs_timing_clock http://www.w3schools.com/js/tryit.asp?filename=tryjs_timing_clock
Updated you are using document.write which appends the current time each time (and that's what your problem was if I am not wrong).更新您正在使用 document.write ，它每次都会附加当前时间（如果我没记错的话，这就是您的问题）。 So for replacing previous time with new time - 1. you have to open document with replace mode (as shown in code below) 2. you write the current time 3. then you close the document.所以用新时间替换以前的时间 - 1.您必须以替换模式打开文档（如下面的代码所示） 2.您写入当前时间 3.然后关闭文档。
function time(){
var d = new Date();
var s = d.getSeconds();
var m = d.getMinutes();
var h = d.getHours();
document.open("text/html", "replace");
document.write(h + ":" + m + ":" + s);
document.close();
}
setInterval(time,1000);
解决方案11
0 2017-02-23 17:02:53
anyone wanting to know how to code a digital clock with alarm?有人想知道如何编写带闹钟的数字时钟吗？ Here is my codepen http://codepen.io/abhilashn/pen/ZLgXbW这是我的代码笔http://codepen.io/abhilashn/pen/ZLgXbW
function AmazeTime(almbtnobj) { this.date,this.day,this.dt,this.month, this.year,this.hour,this.minute,this.second = null; this.almHour, this.almMinute, almMeridiem = null; this.meridiem = "AM"; this.almBtn = almbtnobj; this.almBtn = this.setAlarm; } AmazeTime.prototype.initializeTime = function() { this.dt = new Date(); this.day = this.getDayInWords(this.dt.getDay()); this.date = this.dt.getDate(); this.month = this.getMonthInShort(this.dt.getMonth()); this.year = this.dt.getFullYear(); this.hour = this.setHour(this.dt.getHours()); this.minute = this.doubleDigit(this.dt.getMinutes()); this.second = this.doubleDigit(this.dt.getSeconds()); this.meridiem = this.setMeridiem(this.dt.getHours()); } AmazeTime.prototype.setHour = function(hr) { if(hr > 12) { hr = hr - 12; } if(hr === 0) { hr = 12; } return this.doubleDigit(hr); } AmazeTime.prototype.doubleDigit = function(val) { if(val < 10) { val = "0" + val; } return val; } AmazeTime.prototype.setMeridiem = function(hr) { if(hr > 12) { hr = hr - 12; return "PM"; } else { return "AM"; } } AmazeTime.prototype.getMonthInShort = function(value) { switch(value) { case 0: return "Jan"; break; case 1: return "Feb"; break; case 2: return "Mar"; break; case 3: return "Apr"; break; case 4: return "May"; break; case 5: return "Jun"; break; case 6: return "Jul"; break; case 7: return "Aug"; break; case 8: return "Sep"; break; case 9: return "Oct"; break; case 10: return "Nov"; break; case 11: return "Dec"; break; } } AmazeTime.prototype.getDayInWords = function(value) { switch(value) { case 0: return "Sunday"; break; case 1: return "Monday"; break; case 2: return "Tuesday"; break; case 3: return "Wednesday"; break; case 4: return "Thursday"; break; case 5: return "Friday"; break; case 6: return "Saturday"; break; } } AmazeTime.prototype.setClock = function() { var clockDiv = document.getElementById("clock"); var dayDiv = document.getElementById("day"); var dateDiv = document.getElementById("date"); var self = this; dayDiv.innerText = this.day; dateDiv.innerText = this.date + " " + this.month + " " + this.year; clockDiv.innerHTML = "<span id='currentHr'>" + this.hour + "</span>:<span id='currentMin'>" + this.minute + "</span>:" + this.second + " <span id='meridiem'>" + this.meridiem + "</span>"; } AmazeTime.prototype.setAlarm = function() { this.almHour = this.doubleDigit(document.getElementById('almHour').value); this.almMinute = this.doubleDigit(document.getElementById('almMin').value); if(document.getElementById("am").checked == true) { this.almMeridiem = "AM"; } else { this.almMeridiem = "PM"; } } AmazeTime.prototype.checkAlarm = function() { var audio = new Audio('http://abhilash.site44.com/images/codepen/audio/audio.mp3'); if(this.hour == this.almHour && this.minute == this.almMinute && this.almMeridiem == this.meridiem) { audio.play(); if(this.minute > this.almMinute) { audio.pause(); } } } var mytime = null; mytime = new AmazeTime(document.getElementById("savebtn")); window.addEventListener('load', function() { function runTime() { mytime.initializeTime(); mytime.setClock(); mytime.checkAlarm(); } setInterval(runTime, 1000); } , false); function saveAlarm() { mytime.setAlarm(); $('#myModal').modal('hide'); } document.getElementById("savebtn").addEventListener("click", saveAlarm , false);
body { background:#A3ABF2; font-family:Arial; text-align:center; } .day { font-size:64px; } .date { font-size:33px; } .clock { font-size:44px; } .clock-content { margin-top:35vh; color:#FFF; } .alarm-icon { font-size:34px; cursor:pointer; position:absolute; top:15px; right:15px; color:#FFF; } .setalmlbl { padding-right:20px; } .setalmtxtbox { margin-right:10px; width:60px; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <i id="alarmbtn" data-toggle="modal" data-target="#myModal" class="fa fa-bell alarm-icon"></i> <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="exampleModalLabel"> Set Alarm</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <form> <div class="modal-body"> <div class="form-inline"> <label for="hours" class="setalmlbl" >Hours </label> <select class="form-control setalmtxtbox" name="almHour" id="almHour"> <script> for(var h = 1; h <= 12; h ++) { document.write("<option value="+ h +">" + h + "</option>"); } </script> </select> <label for="minutes" class="setalmlbl"> Minutes </label> <select class="form-control setalmtxtbox" name="almMin" id="almMin"> <script> for(var m = 1; m <= 60; m++) { document.write("<option value="+ m +">" + m + "</option>"); } </script> </select> <div class="form-check"> <label class="form-check-label"> <input class="form-check-input" type="radio" name="meridiem" id="am" value="am" checked> AM </label> </div> <div class="form-check"> <label class="form-check-label"> <input class="form-check-input" type="radio" name="meridiem" id="pm" value="pm"> PM </label> </div> </form> </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> <button type="submit" id="savebtn" class="btn btn-primary">Save</button> </div> </div> </div> </div> <div class="container-fluid"> <div class="clock-content"> <div class="day" id="day"></div> <div class="date" id="date"></div> <div class="clock" id="clock"></div> </div> </div>
解决方案12
0 2018-12-05 17:21:16
you can look at this simple javascript clock here in app.js for a live clock in the browser https://github.com/danielrussellLA/simpleClock您可以在 app.js 中查看这个简单的 JavaScript 时钟，在浏览器中查看实时时钟https://github.com/danielrussellLA/simpleClock
var clock = document.getElementById('clock');
setInterval(function(){
clock.innerHTML = getCurrentTime();
}, 1);
function getCurrentTime() {
var currentDate = new Date();
var hours = currentDate.getHours() > 12 ? currentDate.getHours() - 12 : currentDate.getHours();
hours === 0 ? hours = 12 : hours = hours;
var minutes = currentDate.getMinutes();
var seconds = currentDate.getSeconds() < 10 ? '0' + currentDate.getSeconds() : currentDate.getSeconds();
var currentTime = hours + ':' + minutes + ':' + seconds;
return currentTime;
}
解决方案13
0 2021-11-26 04:45:05
Try something like this.尝试这样的事情。
new Date() will give you the date for today. new Date()将为您提供今天的日期。 After getting the date get the hour, minutes, seconds from today's date.获取日期后，获取今天日期的小时、分钟、秒。
setTimeout(startTime, 1000) will help you to run the timer continuously. setTimeout(startTime, 1000)将帮助您连续运行计时器。
<!DOCTYPE html> <html> <body onload="startTime()"> <h2>JavaScript Clock</h2> <div id="txt"></div> <script> function startTime() { const today = new Date(); let h = today.getHours(); let m = today.getMinutes(); let s = today.getSeconds(); m = checkTime(m); s = checkTime(s); document.getElementById('txt').innerHTML = h + ":" + m + ":" + s; setTimeout(startTime, 1000); } function checkTime(i) { if (i < 10) {i = "0" + i}; // add zero in front of numbers < 10 return i; } </script> </body> </html>
解决方案14
0 2022-04-07 01:37:47
Also keep in mind that the code isn't loaded exactly at the turn of a second plus there's a small natural drift.还要记住，代码并不是在一秒钟之内完全加载的，而且还有一个小的自然漂移。 So if you care about the exact seconds you also need to keep it at sync.因此，如果您关心确切的秒数，您还需要保持同步。
Here's an example continuing on yusrasyed's answer from above:这是从上面继续 yusrasyed 回答的示例：
window.onload = displayClock();
function displayClock(){
const d = new Date();
var sync = d.getMilliseconds();
var syncedTimeout = 1000 - sync;
var display = d.toLocaleTimeString();
document.body.innerHTML = display;
setTimeout(displayClock, syncedTimeout);
}
解决方案15
0 2022-07-07 18:53:27
A simple clock would be somthing like一个简单的时钟就像
setInterval(() => {
let arr = Date().match(/\d{2}(?=:)|(?<=:)\d{2}/g).map(x => x = Number(x))
console.log(new Object({hours: arr[0], minutes: arr[1], seconds: arr[2]}))
},1000)
Its console logs out an array that is [h, m, s].它的控制台会注销一个数组，即 [h, m, s]。
解决方案16
-1 2016-09-09 19:29:34
What do you mean by "new time of day"? “一天中的新时间”是什么意思？ But in order to replace new time, you can create a div contain the time, and every time you call time(), set that div.innerHTML = "", like below但是为了替换新时间，你可以创建一个包含时间的 div，并且每次调用 time() 时，设置 div.innerHTML = ""，如下所示
HTML: HTML：
<div id="curr_time"></div>
JS: JS：
var div = document.getElementById('curr_time');
function time() {
div.innerHTML = "";
var d = new Date();
var s = d.getSeconds();
var m = d.getMinutes();
var h = d.getHours();
div.innerHTML = h + ":" + m + ":" + s;
}
setInterval(time, 1000);
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.