用javascript制作实时时钟
Making a live clock in javascript
本文关键字：实时时钟 javascript 更新时间：2023-09-26
时钟还行。但是它不是替换当前的时间，而是每秒钟打印一个新的时间。我知道为什么会这样，但我不知道如何解决它。如果你能给我一些建议，而不是直截了当的回答，我会很感激的。下面是我的代码:
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);
添加一个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>答案更新[2022] https://stackoverflow.com/a/67149791/7942242
您也可以在Date()上使用toLocaleTimeString()来获取您的显示日期，而不是通过创建那么多变量。
window.onload = displayClock();
function displayClock(){
var display = new Date().toLocaleTimeString();
document.body.innerHTML = display;
setTimeout(displayClock, 1000);
}在setInterval函数中使用new Date().toLocaleTimeString()
setInterval(() => console.log(new Date().toLocaleTimeString()),1000);
这是我的答案，希望能有所帮助。
<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>我使用了setInterval箭头函数，并在外部声明了变量a, time，以避免重复分配，其中span id(时间)运行指定的间隔(这里是1000)，document.getElementById("time")调用通过指定的id获得元素，并且它将该元素的innerHTML设置为time的值。
请点击此链接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>
代码将以数字格式显示时钟
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>使用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>如果这是你问题的根源
但是它不替换当前的一天的时间，而是每秒钟打印一个新的一天的时间
则不能使Date对象响应，因为
Date对象以与平台无关的格式表示中的单个时刻。
如果您不希望每秒创建一个新对象，您可以注册一个专门的Web工作者，它每秒调用performance.now()，但这比简单地创建Date对象对系统资源的要求更高，后者只是复制实际的系统时钟(因此没有创建单独的进程来测量时间)。tl;dr:就像你做的那样每秒创建一个新的Date对象。
你的document.write()问题的根源是:
因为document.write()写入文档流，在一个关闭(加载)的文档上调用document.write()[在你的例子中是setInterval]会自动调用document.open()，这将清除文档。
要更新部分页面，您通常可以按照@Pranav的建议设置某些元素的innerHTML。
<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>还要记住，代码并不是在一秒钟的时候加载的，而且还有一个小的自然漂移。因此，如果你关心确切的秒数，你也需要保持同步。
这里有一个例子继续上面的的答案:
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);
}
setInterval(function () {
const time = new Date().toTimeString().slice(0, 8);
span.textContent = time
}, 1000)<span id="span"></span>一个工作演示，点击链接
http://www.w3schools.com/js/tryit.asp?filename=tryjs_timing_clock您正在使用文档。写追加当前时间每次(这就是你的问题是，如果我没有错)。用新时间代替之前的时间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);
有人想知道如何编写带有闹钟的数字时钟吗?这是我的codepen 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>
A.M.
</label>
</div>
<div class="form-check">
<label class="form-check-label">
<input class="form-check-input" type="radio" name="meridiem" id="pm" value="pm">
P.M.
</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>你可以在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;
}
试试这样做。
new Date()会告诉你今天的日期。获取日期后，从今天的日期中获取小时、分钟、秒。
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>一个简单的时钟应该是这样的
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)
它的控制台退出数组[h, m, s]。
你说的"一天中的新时间"是什么意思?但是为了替换新的时间，您可以创建一个包含时间的div，并且每次调用time()时，设置div. innerhtml = "，就像下面的
HTML:<div id="curr_time"></div>
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);
相关文章：
- 基于实时时钟
- 无法在Chrome开发工具中实时编辑Javascript
- AngularJs 控制器中的实时时钟功能
- IDEA+Grunt-如何实时编辑JavaScript
- 如何检测浏览器大小并实时更改javascript函数控件
- 如何在LightTable中实时编辑JavaScript
- 在 aspx 页上显示实时时钟(使用服务器时间）
- 从网站上实时读取 JavaScript 变量
- 使用 AJAX 运行实时时钟
- 如何在网页上启用/禁用(实时）javascript插件
- 带有java脚本的实时时钟，显示实际的秒分和小时
- Internet Explorer中未运行实时验证javascript
- 具有特定单元格数据更新的实时网格(JavaScript/jQuery）
- 实时移动JavaScript
- PHP，Javascript实时时钟:如何正确显示数据库上次更新的时间
- 实时更新Javascript变量
- 我怎样才能让这个计时器实时更新(Javascript）
- 用javascript制作实时时钟
- 带有JavaScript代码的PHP，实时时钟
- Javascript函数执行实时时钟新分钟
