简单JS+HTML动态网页（时钟）设计

2019年5月14日 301次阅读 来源: 静脉

今天来简单使用JS和HTML来设计一个网页版的时钟。

写出HTML框架

一个html文件包含一些最基础的东西

<html>
<head>
<meta charset="utf-8">
<title> 时钟 </title>
</head>
<body>
    <h1 id="time"> None </h1>
</body>
</html>

<meta> 标签指定我们的字符集为utf-8,注意<meta>标签没有关闭，也就是</meta>。<title> 指定我们的网页名称。<body>指明网页内容为None（文本）,<h1>中是一级标题。
好啦，这样就把最简单的HTML网页的框架搭建出来了。网页的标题是闹钟，网页上只有最简单的一个None，如图所示：

《简单JS+HTML动态网页（时钟）设计》 时钟

编写JS代码

现在我们考虑JS的代码。JS的代码所执行的动作可以分为这几步：

  1. 获取现在的时间，并转换为String格式。

  2. 改写<h1>的内容。

  3. 定时更新<h1>的内容。

这几个功能可以用以下代码来实现

function change() {
        var myDate = new Date();
        var mytime = myDate.toLocaleString();
        document.getElementById('ttt').innerHTML=mytime;
    }
    change();
    setInterval("change()", 1000);

将JS代码嵌入HTML中

这一步相对比较简单，只需要在HTML中添加一个script标签即可。
如下所示：

<html>
    <head>
        <meta charset="utf-8">
        <title>时钟</title>
    </head>
    <body>
        <h1 id="time">None</h1>
    </body>
    <script type="text/javascript"> 
        function change() {
            var myDate = new Date();
            // 获取JS时间对象
            var mytime = myDate.toLocaleString();
            // 将当前时间转换为String值
            document.getElementById('time').innerHTML=mytime;
            // 将当前时间（String）写入到HTML中,这个“time”和<h1>中的id一致
        }
        change();
        setInterval("change()", 1000);
        // 定时更新HTML文档，每秒更新一次
    </script>
</html>

大功告成，看看效果

《简单JS+HTML动态网页（时钟）设计》 时钟完整版

    原文作者：静脉
    原文地址: https://www.jianshu.com/p/4ed27653ebe2
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞