Question

我正在创建一个简单的网页浏览器游戏。其中有一个时钟，它不显示实时，但应该在上午9:00开始，并且每次点击一个按钮时为1小时。问题是它只适用于第一次按钮点击，并且当我再次单击按钮时始终保持在上午10点。我不明白为什么。

以下是代码：

<script role="script" id="twine-user-script" type="text/twine-javascript">
$(document).ready( function() { 

var callback =  function() {
    displayTime.incrementTime();
};
    $('#onebutton .link-internal').on('click', callback);
    $('#container1 .link-internal').on('click', callback);
    $('#container2 .link-internal').on('click', callback);

    var displayTime = {
        currentTime: new Date(new Date().getUTCFullYear(),
            new Date().getUTCMonth(), 
            new Date().getUTCDay(),
            '9',
            '0',
            '0',
            '0'),
        hoursVal: null,
        hours: function() {
            return displayTime.currentTime.getHours();
        },
        minutesVal: null,
        minutes: function() {
            return displayTime.currentTime.getMinutes();
        },

        meridiem: "am",
        init: function() {
            displayTime.formatDate();
            displayTime.display();
        },
        formatDate: function() {
            if (displayTime.hours() > 12) {
                displayTime.hoursVal = displayTime.hours() - 12; 
                displayTime.meridiem = "pm"; 
            }
            if (displayTime.hours() === 0) {
                displayTime.hoursVal = 12;    
            }
            if(displayTime.hours() < 10) {
                displayTime.hoursVal = "0" + displayTime.hours();
            }
            if(displayTime.minutes() < 10) {
                displayTime.minutesVal = "0" + displayTime.minutes();
            }        
        },

        resetValues: function() {
            displayTime.hoursVal = null;
            displayTime.minutesVal = null;
        //displayTime.secondsVal = null;
    },

    display: function() {
        var clockDiv = document.getElementById('clock');
        clockDiv.innerText = (displayTime.hoursVal === null ? displayTime.hours() : displayTime.hoursVal) + ":" + 
        (displayTime.minutesVal === null ? displayTime.minutes() : displayTime.minutesVal) + " " + 
        displayTime.meridiem;
    },

    incrementTime: function() {
        displayTime.currentTime = new Date(displayTime.currentTime.getTime() + (1000 * 60 * 60));
        displayTime.resetValues();
        displayTime.formatDate();
        displayTime.display();
    }
};

displayTime.init();
setInterval(displayTime.init, 1000);
});
</script>

有人能指出代码中的错误在哪里吗？

Answer 1

此JSFiddle效果更好，但我也需要您的HTML来解决您遇到的确切问题：

JS：

$(document).ready(function () {

    var callback = function () {
        displayTime.incrementTime();
    };
    $('#onebutton').on('click', callback);
    $('#container1').on('click', callback);
    $('#container2').on('click', callback);

    var displayTime = {
        currentTime: new Date(new Date().getUTCFullYear(),
        new Date().getUTCMonth(),
        new Date().getUTCDay(),
            '9',
            '0',
            '0',
            '0'),
        hoursVal: null,
        hours: function () {
            return displayTime.currentTime.getHours();
        },
        minutesVal: null,
        minutes: function () {
            return displayTime.currentTime.getMinutes();
        },

        meridiem: "am",
        init: function () {
            displayTime.formatDate();
            displayTime.display();
        },
        formatDate: function () {
            if (displayTime.hours() > 12) {
                displayTime.hoursVal = displayTime.hours() - 12;
                displayTime.meridiem = "pm";
            }
            if (displayTime.hours() === 0) {
                displayTime.hoursVal = 12;
            }
            if (displayTime.hours() < 10) {
                displayTime.hoursVal = "0" + displayTime.hours();
            }
            if (displayTime.minutes() < 10) {
                displayTime.minutesVal = "0" + displayTime.minutes();
            }
        },

        resetValues: function () {
            displayTime.hoursVal = null;
            displayTime.minutesVal = null;
            //displayTime.secondsVal = null;
        },

        display: function () {
            var clockDiv = document.getElementById('clock');
            clockDiv.innerText = (displayTime.hoursVal === null ? displayTime.hours() : displayTime.hoursVal) + ":" + (displayTime.minutesVal === null ? displayTime.minutes() : displayTime.minutesVal) + " " + displayTime.meridiem;
        },

        incrementTime: function () {
            displayTime.currentTime = new Date(displayTime.currentTime.getTime() + (1000 * 60 * 60));
            displayTime.resetValues();
            displayTime.formatDate();
            displayTime.display();
        }
    };

    displayTime.init();
    setInterval(displayTime.init, 1000);
});

每按一次按钮前进1小时的Javascript时钟

1 个答案: