HTML网页嵌入浮动的时钟

Uncle_Gen

已于 2022-09-19 10:50:13 修改

阅读量3.9k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： HTML 文章标签： HTML JavaScript

于 2018-04-03 11:25:56 首次发布

本文链接：https://blog.youkuaiyun.com/mildddd/article/details/79800797

HTML 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了在HTML页面中创建一个悬浮的时钟的方法。通过JavaScript编写时间函数并在head部分添加样式，使得时钟始终保持在网页右上角，且详细说明了如何调整时钟位置。同时，还提供了解决分钟和秒位数显示问题的解决方案。

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

环境

windows10
phpstrom 2017.3.6

方法

创建一个HTML页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

</body>
</html>

在body里补充内容，h1非必须只是为了后面方便观看效果，可以不添加。p标签里的内容才是时钟，里面是一个js函数

<body>
    <h1>标题一</h1>
    <h1>标题一</h1>
    <h1>标题一</h1>
    <h1>标题一</h1>
    <h1>标题一</h1>
    <h1>标题一</h1>
    <h1>标题一</h1>
    <h1>标题一</h1>
    <h1>标题一</h1>
    <h1>标题一</h1>
    <h1>标题一</h1>
    <h1>标题一</h1>
    <h1>标题一</h1>
    <h1>标题一</h1>
    <p id="time" class="clock"><script>time1()</script></p>
</body>

在head标签里添加时间函数，添加完后就可以看到时钟了，不过此时的时钟是固定位置的

//获取时间函数
function time1(){
    var today = new Date();
    var year = today.getFullYear();
    var month = today.getMonth()+1;
    var day = today.getDate();
    var hour = today.getHours();
    var minute = today.getMinutes();
    var second = today.getSeconds();
    document.getElementById("time").innerHTML =
        year+"年"+month+"月"+day+"日 "+hour+":"+minute+":"+second;
    t = setTimeout("time1()",500);
}

在head标签里添加样式，让时钟不随网页移动，top和right分别指时钟距离网页顶端和右端的距离，可以根据需求修改
```
<style>
    p.clock{border-width: 1px; position: fixed; top: 300px; right: 500px;}
</style>
```

如果想要保持分钟和秒的位数不变的话可以在js里增加一个函数

//调整时间格式
function checkTime(i) {
    if(i<10){
        i="0"+i;
    }
    return i;
}

time1变成

//获取时间函数
function time1(){
    var today = new Date();
    var year = today.getFullYear();
    var month = today.getMonth()+1;
    var day = today.getDate();
    var hour = today.getHours();
    var minute = today.getMinutes();
    var second = today.getSeconds();

    minute = checkTime(minute);
    second = checkTime(second);

    document.getElementById("time").innerHTML =
        year+"年"+month+"月"+day+"日 "+hour+":"+minute+":"+second;
    t = setTimeout("time1()",500);
}

上不了附件，给个全部代码吧

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>clock</title>
    <script>
        //获取时间函数
        function time1(){
            var today = new Date();
            var year = today.getFullYear();
            var month = today.getMonth()+1;
            var day = today.getDate();
            var hour = today.getHours();
            var minute = today.getMinutes();
            var second = today.getSeconds();

            minute = checkTime(minute);
            second = checkTime(second);

            document.getElementById("time").innerHTML =
                year+"年"+month+"月"+day+"日 "+hour+":"+minute+":"+second;
            t = setTimeout("time1()",500);
        }
        //调整时间格式
        function checkTime(i) {
            if(i<10){
                i="0"+i;
            }
            return i;
        }
    </script>
    <style>
        p.clock{border-width: 1px; position: fixed; top: 300px; right: 500px;}
    </style>
</head>
<body>
    <h1>标题一</h1>
    <h1>标题一</h1>
    <h1>标题一</h1>
    <h1>标题一</h1>
    <h1>标题一</h1>
    <h1>标题一</h1>
    <h1>标题一</h1>
    <h1>标题一</h1>
    <h1>标题一</h1>
    <h1>标题一</h1>
    <h1>标题一</h1>
    <h1>标题一</h1>
    <h1>标题一</h1>
    <h1>标题一</h1>
    <p id="time" class="clock"><script>time1()</script></p>
</body>
</html>