JavaScript时钟问题

Issues with JavaScript clock

本文关键字：问题时钟 JavaScript 更新时间：2023-09-26

我在修改此javascript代码以在显示的时钟上包含秒时遇到问题。我试着在HTML和Javascript中的节前后通过''|/''|/突出显示我对源代码所做的添加。如果不太清楚，我很抱歉。没有办法将代码部分加粗。

我很容易理解HTML：

<body>
<div id="wrapper">
    <div id="topPadding"><br><br><br><br></div>
    <br><br>
    <div id="clock">
        <span id="hour"></span><span id="colon" class="on">:</span><span id="minute"></span> '|/'|/ <span id="colon" class="on">:</span><span id="second"></span> '|/'|/
        <!-- <span id="suffix"></span> -->
    </div>
    <div id="thedate">
        <span id="day"></span>,
        <span id="month"></span>
        <span id="date"></span>
    </div>
</div>
<div id="settings" class="icon">
    <div id="changeFont" class="icon setting"></div>
    <div id="changeBg" class="icon setting"></div>
    <div id="changeClock" class="icon setting"></div>
</div>
<div id="apps" class="icon"></div>
<script src="clock.js"></script>

以下是Javascript代码（我删除了样式修改部分，因为这不是问题的必需部分）：

        window.addEventListener('load', init, false);
    /* =================================================== */
    /* === GENERAL UTILITIES ============================= */
    /* =================================================== */
    function $(selector, parent) { // Get element(s) shortcut
        if ( selector.nodeType ) { // if it an element, return it
            return selector;
        }
        // Set the parent element to search within
        if ( !parent ) {
            parent = document;
        }
        else if ( !parent.nodeType ) { // parent given is an id
            parent = $(parent);
        }
        switch ( selector.charAt(0) ) {
            case ".": return parent.getElementsByClassName(selector.substr(1))[0]; break;
            case "#": return parent.getElementById(selector.substr(1)); break;
            case ",": return parent.getElementsByClassName(selector.substr(1)); break;
            case ">": return parent.getElementsByTagName(selector.substr(1)); break;
            default:  return parent.getElementsByTagName(selector)[0]; break;
        }
    }
    function checkForClass(nameOfClass, element) {
        if (typeof element == 'string') { element = $(element); }
        if (element && element.className != '') {
            return new RegExp('''b' + nameOfClass + '''b').test(element.className);
        } else {
            return false;
        }
    }
    function addClass(nameOfClass, element) {
        if (typeof element == 'string') { element = $(element); }
        if (element && !checkForClass(nameOfClass, element)) {
            element.className += (element.className ? ' ' : '') + nameOfClass;
        }
    }
    function removeClass(nameOfClass, element) {
        if (typeof element == 'string') { element = $(element); }
        if (element && checkForClass(nameOfClass, element)) {
            element.className = element.className.replace( (element.className.indexOf(' ' + nameOfClass) >= 0 ? ' ' + nameOfClass : nameOfClass), '');
        }
    }
    function toggleClass(nameOfClass, element) {
        if (typeof element == 'string') { element = $(element); }
        if (element && checkForClass(nameOfClass, element)) {
            removeClass(nameOfClass, element);
        } else {
            addClass(nameOfClass, element);
        }
    }
    /* =================================================== */
    /* === CLOCK ========================================= */
    /* =================================================== */
    var hour, min, colon, '|/'|/ sec '|/'|/ ;
    function date() {
        var currentTime = new Date();
        var miliseconds = currentTime.getSeconds() * 1000;
        setTimeout(startClock, miliseconds);
        var theday = currentTime.getDay();
        var thedate = currentTime.getDate();
        var themonth = currentTime.getMonth();
        switch(theday) {
            case 0: theday = 'Sunday'; break;
            case 1: theday = 'Monday'; break;
            case 2: theday = 'Tuesday'; break;
            case 3: theday = 'Wednesday'; break;
            case 4: theday = 'Thursday'; break;
            case 5: theday = 'Friday'; break;
            case 6: theday = 'Saturday'; break;
        }
        switch(themonth) {
            case 0: themonth = 'January'; break;
            case 1: themonth = 'February'; break;
            case 2: themonth = 'March'; break;
            case 3: themonth = 'April'; break;
            case 4: themonth = 'May'; break;
            case 5: themonth = 'June'; break;
            case 6: themonth = 'July'; break;
            case 7: themonth = 'August'; break;
            case 8: themonth = 'September'; break;
            case 9: themonth = 'October'; break;
            case 10: themonth = 'November'; break;
            case 11: themonth = 'December'; break;
        }
        $("#day").innerText = theday;
        $("#month").innerText = themonth;
        $("#date").innerText = thedate;
        // var thehour = currentTime.getHours();
        // var suffix = "AM";
        // if (thehour >= 12) {
        //  suffix = "PM";
        // }
        // $("#suffix").innerText = suffix;
    }
    function startClock() {
        clock();
        setInterval(clock, 1000);
    }
    function clock() {
        var currentTime = new Date();
        var thehour = currentTime.getHours();
        var theminute = currentTime.getMinutes();
        '|/'|/ var thesecond = curentTime.getSeconds(); '|/'|/
        if (currentClock12h == 1) {
            if (thehour >= 12) {
                thehour = thehour - 12;
            }
            if (thehour == 0) {
                thehour = 12;
            }
        }
        if (theminute < 10) {
            theminute = "0" + theminute;
        }
        '|/'|/ if (thesecond < 10) {
            thesecond = "0" + thesecond;
        }
        '|/'|/
        hour.innerText = thehour;
        min.innerText = theminute;
        '|/'|/ sec.innerText = thesecond; '|/'|/
    }

    function blink() {
        toggleClass("on", colon);
    }
    // INIT
    function init() {
        hour = $("#hour");
        min = $("#minute");
        colon = $("#colon");
        '|/'|/ sec = $("#second"); '|/'|/
        date();
        clock();
        setInterval(blink, 1000);
        addClass('loaded', body);
        body.addEventListener('contextmenu', cycleOptions, false);
        $("#apps").addEventListener('click', function() {
            chrome.tabs.update({ url: 'chrome://apps' });
        }, false);
        $("#settings").addEventListener('click', function() {
            toggleSettings();
        }, false);
        $("#changeFont").addEventListener('click', function() {
            cycleFont();
        }, false);
        $("#changeBg").addEventListener('click', function() {
            cycleBg();
        }, false);
        $("#changeClock").addEventListener('click', function() {
            cycleClock();
        }, false);
}

您的代码中有两个明显的错误，都在的这个小节中

 function clock() {
    var currentTime = new Date();
    var thehour = currentTime.getHours();
    var theminute = currentTime.getMinutes();
    '|/'|/ var thesecond = curentTime.getSeconds(); '|/'|/
    if (currentClock12h == 1) {

您在添加的行中拼写错了currentTime
变量currentClock12h没有在任何地方定义（至少在您向我们展示的代码中）

在同一叶片中，这一行：

body.addEventListener('contextmenu', cycleOptions, false);

变量body也没有在您包含的代码中的任何位置定义。