今天来简单使用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代码
现在我们考虑JS的代码。JS的代码所执行的动作可以分为这几步：
-
获取现在的时间，并转换为String格式。
-
改写<h1>的内容。
-
定时更新<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>
大功告成，看看效果
时钟完整版
网友评论