12小时制时钟

最新推荐文章于 2024-08-18 11:37:01 发布

Aisling218

最新推荐文章于 2024-08-18 11:37:01 发布

阅读量2.2k

点赞数

文章标签： js 12小时时钟 Date日期函数使用

本文链接：https://blog.csdn.net/GYL20171020/article/details/78702165

版权

学习中的小例子，希望能帮到你

先在HTML里面给个div，让时钟有个地方显示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="Clock.css" rel="stylesheet">
</head>
<body>
<h1>Digital Clock</h1>
<div class="clock"></div>
<script src="Clock.js"></script>
</body>
</html>

接下来，创建js文件，使用Date()函数，把时间分为时、分、秒来显示，通过比较小时和分钟的大小，来区分上午和下午，这时就把24小时制变成12小时制的时钟了

/**
 * Created by Administrator on 2017/12/3.
 */
var time= self.setInterval("clock()",30);
function clock() {
    var t = new Date();
    var t1 = t.getHours();
    var t2 = t.getMinutes();
    var t3 = t.getSeconds();
    if (t1 > t2) {
        document.getElementsByClassName("clock")[0].innerHTML
            = "PM" + t1 + ":" + t2 + ":" + t3;
    } else {
        document.getElementsByClassName("clock")[0].innerHTML
            = "AM" + t1 + ":" + t2 + ":" + t3;
    }
}
window.onload=clock();