时刻.js代码不显示

moment.js code doesn't appear

本文关键字:显示 代码 js 时刻      更新时间:2023-09-26

从 jsfiddle 中找到了一个非常好的代码,http://jsfiddle.net/ivangrs/zf80q3nh/我的项目发布在 stackoverflow 上,但我在从站点获取代码后无法看到任何内容!请帮忙?

这是我复制的代码

.HTML:

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" href="css/style.css" />
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
    <script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.7.0/moment.min.js" type="text/javascript"></script>
    <script src="js/javascript.js"></script>
</head>
<body>
    <div class='time-frame'>
        <div id='time-part'></div>
        <div id='date-part'></div>
    </div>
    <br>
</body>
</html>

JavaScript.js:

$(document).ready(function() {
    var interval = setInterval(function() {
        var momentNow = moment();
        $('#time-part').html(momentNow.format(' hh:mm:ss a'))
        $('#date-part').html(momentNow.format('dddd').substring(0, 8) + ' ' + momentNow.format('DD MMMM YYYY'));
    });
    $('#stop-interval').on('click', function() {
        clearInterval(interval);
    });
});

样式.css CSS:

.time-frame {
    color: #000;
    width: 500px;
    font-family: Arial;
}
.time-frame > div {
    width: 100%;
    text-align: center;
    background-color: red;
}
#date-part {
    font-size: 1.2em;
}
#time-part {
    font-size: 2em;
}
#demo {
    background-color: red;
    font-family: Arial;
}
#demonew {
    background-color: green;
    font-family: Arial;
}

更新:我按照@below雷达的建议实施了更改,但没有显示时间,只有停止时间按钮出现。

你忘记了 javascript 中 setInterval 函数的持续时间.js

         $(document).ready(function() {
            var interval = setInterval(function() {
                var momentNow = moment(); $('#time-part').html(momentNow.format(' hh:mm:ss a'))
                $('#date-part').html(momentNow.format('dddd').substring(0,8) + ' '+ momentNow.format('DD MMMM YYYY'));
            }, 100);
            $('#stop-interval').on('click', function() {
                clearInterval(interval);
            });
        });

您忘记了体内停止按钮的输入:

            <div class='time-frame'>
                <div id='date-part'></div>
                <div id='time-part'></div>
            </div>
            <br>
            <input type='button' id='stop-interval' value='Stop time' />