使用js实时显示北京时间

最新推荐文章于 2024-04-11 09:44:45 发布

黄黄同学爱学习

最新推荐文章于 2024-04-11 09:44:45 发布

阅读量4.5k

点赞数 1

今天由于项目需要，需要在网站首页显示实时的北京时间，

在网上扒了一会儿，感觉没看明白怎么回事儿，最后还是从别的网站上copy来的，所以这次不是原创啊。哈哈

1、首页引入jquery.min.js

2、将下面的代码copy至你的项目中，在html中添加

<span id="bj_time"></span>

然后就可以完美的实现实时显示北京时间了，显示的样式小伙伴们自行调整哈，至于每句代码的意思也不难，这里就不做解释了。

最后顺便说一下，下面这个i标签可以显示时钟图标，瞬间美美哒。

<i class="iconfont"></i>

<script type="text/javascript">
    $(document).ready(function () {
        checkDateTime();
    });
    var timerRunning = false;
    function checkDateTime() {
        if (timerRunning) {
            clearTimeout(updatetime);
            timerRunning = false;
        }
        for (var i = 1; i <= 1; i++) {
            var today = new Date();
            var month = today.getMonth() + 1;
            var date = today.getDate();                    
            var year = today.getYear() + 00;
            month = today.getMonth() + 1;
            date = today.getDate();
            var day = today.getDay();
            var hour = today.getHours();
            var minute = today.getMinutes();
            var second = today.getSeconds();
            var dateTime = addZero(hour) + ":" + addZero(minute) + ":" + addZero(second) + "," + addZero(month) + "/" + addZero(date);
            if (i == 1) //北京时间
                $("#bj_time").text(dateTime);
        }
        updatetime = setTimeout("checkDateTime()", 1000);
        timerRunning = true;
    }
    function addZero(num, end) {
        return num < 10 ? "0" + num : num;
    }
    /* 得到日期年月日等加数字后的日期 */
    Date.prototype.dateAdd = function (interval, number) {
        var d = this;
        var k = { 'y': 'FullYear', 'q': 'Month', 'm': 'Month', 'w': 'Date', 'd': 'Date', 'h': 'Hours', 'n': 'Minutes', 's': 'Seconds', 'ms': 'MilliSeconds' };
        var n = { 'q': 3, 'w': 7 };
        eval('d.set' + k[interval] + '(d.get' + k[interval] + '()+' + ((n[interval] || 1) * number) + ')');
        return d;
    }

</script>