Question

我在修改此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);

}

Answer 1

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

中

 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也未在您包含的代码中的任何位置定义。

JavaScript时钟的问题

1 个答案: