如何自动刷新页面以显示秒的变化
How to autorefresh the page to show the seconds changing?
<html>
<script language="javascript">
today = new Date();
document.write("<BR>The time now is: ", today.getHours(),":",today.getMinutes(),":",today.getSeconds());
document.write("<BR>The date is: ", today.getDate(),"/",today.getMonth()+1,"/",today.getYear());
</script>
</html>
我想自动刷新页面,以显示秒的变化。怎么做呢?请帮帮我。
首先,您可能不应该使用document.write()。大多数人认为这是不好的做法。你最好在HTML中使用容器元素(例如<div>
)。然后,您可以设置该<div>
的innerHTML
。
接下来,你不需要每秒钟刷新页面。使用setInterval()
函数。它接受一个函数和一个间隔,可以让您设置给定函数在什么时间之后应该再次运行。
在你的HTML中,你所需要的只是一个<div>
元素。
<div id="time"></div>
在JavaScript中定义一个函数,将当前日期写入容器元素,并使用setInterval每秒(1000ms)调用一次。
var time = document.getElementById('time');
function writeDate () {
var today = new Date();
time.innerHTML = "The time now is: " + today.getHours() +":" + today.getMinutes() + ":" + today.getSeconds();
time.innerHTML += "<br>The date is: " + today.getDate() + "/" + (today.getMonth() + 1) + "/" + today.getFullYear();
}
setInterval(writeDate, 1000);
您可以在这个jSFiddle中看到它的作用
这里的自动刷新不是一个好主意。有更好的方法。但是,如果您坚持要使用:
window.location.reload();
一个更好的方法是将其包装在一个函数中,并在其上调用window.setInterval
或window.setTimeout
。注意,setInterval
注册了一个循环计时器,而setTimeout
只调用注册的函数一次。像这样修改代码:
<head>
<script language="text/javascript">
function doIt() {
var today = new Date();
document.getElementById("output").innerHTML = "The time now is: " +
today.getHours() + ":" + today.getMinutes() + ":" + today.getSeconds() +
"<br />The date is: " + today.getDate() + "/" + ( today.getMonth() + 1 ) +
"/" + today.getYear();
}
window.setInterval(doIt, 1000);
// Alternatively you can use:
//window.setInterval("doIt()", 1000); // This is what you usually learn first...
</script>
</head>
<body>
<div id="output"></div>
</body>
试试这个(注意你应该使用getFullYear
而不是getYear
):
<html>
<head>
<title>Date Time</title>
</head>
<body>
<div id = 'time'><div>
<script language="javascript">
function getCurrentTime()
{
var today = new Date();
var hours = today.getHours();
if (hours <= 9){
hours = '0' + hours;
}
var minutes = today.getMinutes();
if (minutes <= 9){
minutes = '0' + minutes;
}
var seconds = today.getSeconds();
if (seconds <= 9){
seconds = '0' + seconds;
}
return hours + ":" + minutes + ":" + seconds;
}
function getCurrentDate()
{
var today = new Date();
var days = today.getDate();
if (days <= 9){
days = '0' + days;
}
var months = today.getMonth() + 1;
if (months <= 9){
months = '0' + months;
}
var years = today.getFullYear();
if (years <= 9){
years = '0' + years;
}
return days + "/" + months + "/" + years;
}
function updateDateTime()
{
document.getElementById('time').innerHTML = '<br />The time now is: ' + getCurrentTime() +
'<br />The date is: ' + getCurrentDate();
setTimeout(updateDateTime, 1000);
}
updateDateTime();
</script>
</body>
</html>
相关文章:
- 如何将(a*b)两个输入文本值相乘,并在javascript中随文本变化动态显示
- HTML/Javascript-360度图片的路径更改(显示不同的变化)
- Angular js-当值发生变化时高亮显示dom
- 我想在 td 的值发生变化时更改突出显示的 td
- 当圆形图像在圆轮中发生变化时,如何在顶部显示标签
- 显示模块模式的细微变化
- 两个按钮,可随背景位置变化而切换,并在输入中显示结果
- 摘要循环显示我的数组没有变化(视图不会刷新)
- 一个不断变化的JavaScript变量在HTML中的多个位置显示(并更新)
- 什么'这是在angular JS中创建一个表的好方法,当单元格发生变化时,该表会高亮显示
- amCharts显示滚动气球中的值变化
- Ng显示当页面上有多个控制器的布尔值发生变化时不更新
- Angular JS, Typescript -当使用$watch时,UI不会显示模型的变化
- 用highcharts-ng动画显示皮哈特起始角的变化
- 浏览器:检测显示配置的变化
- 显示数组中不断变化的文本
- 用Javascript跟踪HTML元素上的显示变化
- 我的服务不会立即显示变化.必须刷新浏览器
- 美元的范围.$watch没有显示变化的值
- 如何在html页面中显示变化的变量(如数字)