原生JavaScript实现显示当前系统时间

最新推荐文章于 2022-10-27 10:02:02 发布

zhangsan3333

最新推荐文章于 2022-10-27 10:02:02 发布

阅读量1.2k

点赞数 1

文章标签： javascript 前端开发语言

aaa

本文链接：https://blog.csdn.net/djydjy3333/article/details/122230967

版权

在这里插入图片描述

1.一个html页面实现，js写在html里面
clock.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF‐8">
    <title>clock</title>
    <style type="text/css">
        #clock {
            color: green;
            font‐size: 30px;
        }
    </style>
</head>
<body>
<script type="text/javascript">
    let timer;

    //开始调用
    function start() {//先清除上一个计时器，再开启一个计时器
        window.clearInterval(timer);
//1000毫秒调用begin()
        timer = window.setInterval("begin()", 1000);
    }

    //思路：每过1秒钟调用1次时间，并且将时间显示在某个元素内部
    function begin() {
//得到现在的时间
        let time = new Date();
//得到h1元素
        let clock = document.getElementById("clock");
//将时间显示在h1中
        clock.innerHTML = time.toLocaleString();
    }

    //暂停
    function pause() {
//清除计时器
        window.clearInterval(timer);
    }
</script>
<h1 id="clock"> current time </h1>
<input type="button" value="start" onclick="start()"/>
<input type="button" value="pause" onclick="pause()"/>
</body>
</html>

2.html导入外部js文件实现

clock1.html

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

</body>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF‐8">
    <title>clock</title>
    <style type="text/css">
        #clock {
            color: green;
            font‐size: 30px;
        }
    </style>
    <script src="clock1.js"></script>
</head>
<body>
<script>
    alert("import js file");
    begin();
</script>
<h1 id="clock"> current time </h1>
<input type="button" value="start" onclick="start()"/>
<input type="button" value="pause" onclick="pause()"/>
</body>
</html>

clock1.js

let timer;

function start() {
    window.clearInterval(timer);

    timer = window.setInterval("begin()", 1000);
}

function begin() {

    let time = new Date();

    let clock = document.getElementById("clock");

    clock.innerHTML = time.toLocaleString();
}

function pause() {

    window.clearInterval(timer);
}

zhangsan3333

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
原生JavaScript实现显示当前系统时间

1.一个html页面实现，js写在html里面clock.html<!DOCTYPE html><html><head> <meta charset="UTF‐8"> <title>clock</title> <style type="text/css"> #clock { color: green; font‐size: 30p
复制链接

扫一扫