js显示当前时间及其时钟显示

最新推荐文章于 2025-06-03 16:05:30 发布

Luo_lung

最新推荐文章于 2025-06-03 16:05:30 发布

阅读量2.6k

点赞数

CC 4.0 BY-SA版权

分类专栏： javascript 文章标签： javascript

本文链接：https://blog.youkuaiyun.com/Luo_lung/article/details/53389887

javascript 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了如何使用JavaScript实现弹窗显示当前时间、在网页文本中静态展示、在指定区域动态更新时间以及创建时钟功能。通过示例代码和函数方法，详细讲解了在不同场景下实时获取并显示时间的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

                         1.弹窗显示，当前时间和日期：

main.js

    var box=new Date();
    alert("当前日期"+box.getFullYear()+"/"+box.getMonth()+"/"+box.getDay());
  alert("现在时间"+box.getHours()+":"+box.getMinutes()+":"+box.getSeconds());

2.在网页文本中静态显示当前时间

main.js

var box=new Date();

   document.write("当前日期"+box.getFullYear()+"/"+box.getMonth()+"/"+box.getDay());
  document.write("现在时间"+box.getHours()+":"+box.getMinutes()+":"+box.getSeconds());

3.仿照网页，在规定区域显示时间

在想要插入的区域，直接插入

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JS学习测试网页</title>

</head>
<body>
<h1>123</h1>
<br>
<h1>123</h1>
<br>
<h1>123</h1>
<br>
<h1>123</h1>
<br>
<h1>123</h1>
<br>

<script type="text/javascript" src="test.js"></script>
</body>
</html>

可以·正确显示，当时感觉是一种笨方法，也许可以使用定义Id的方式来灵活显示

如果运用函数方法写的话，var a=date();即可，不过此段必须在<script>里面，是实例化来显示。

4.显示时钟：

main.js

function startTime(){
    var today=new Date();
    var h=today.getHours();
    var m=today.getMinutes();
    var s=today.getSeconds();// 在小于10的数字钱前加一个‘0’
    m=checkTime(m);
    s=checkTime(s);
    document.getElementById('txt').innerHTML=h+":"+m+":"+s;
    t=setTimeout(function(){startTime()},500);
}
function checkTime(i){
    if (i<10){
        i="0" + i;
    }
    return i;
}

html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JS学习测试网页</title>
    <script type="text/javascript" src="test.js"></script>
</head>
<body onload="startTime()">
<!--<h1>123</h1>
<br>
<h1>123</h1>
<br>
<h1>123</h1>
<br>
<h1>123</h1>
<br>
<h1>123</h1>
<br>-->

<div id="txt"></div>
</body>
</html>

可以显示成功。但是他说在body中以onload显示
onload事件知识：

1.onload 事件会在页面或图像加载完成后立即发生。

2.支持onload事件的标签：

<body>, <frame>, <frameset>, <iframe>, <img>, <link>, <script>

支持该事件的js对象：

image, layer, window

在规定区域显示时间：

只需要更改html代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JS学习测试网页</title>
    <script type="text/javascript" src="test.js"></script>
</head>
<body >
<!--<h1>123</h1>
<br>
<h1>123</h1>
<br>
<h1>123</h1>
<br>
<h1>123</h1>
<br>
<h1>123</h1>
<br>-->

<div id="txt" align="center"></div>
<script type="text/javascript">
    var clock = new startTime();
    clock.display(document.getElementById("txt"));
</script>
</body>
</html>

重新给个时间对象，让其display显示区域的Id即可