个人中心
gpt4 book ai didi

javascript - JavaScript 时钟问题

转载 作者：行者123 更新时间：2023-12-03 10:26:05 25 4
gpt4 key购买 nike

我在修改此 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) {
  1. 您添加的行中的 currentTime 拼写错误
  2. 变量 currentClock12h 未在任何地方定义(至少在您向我们展示的代码中)

在同一个风向标中，这一行:

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

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

关于javascript - JavaScript 时钟问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29395438/

25 4 0
文章推荐： javascript - 在数组上调用 forEach 时出错
文章推荐： 带有完整网址的 AngularJs $location.path
文章推荐： sql - “not null”和 “not null enable”之间有区别吗？
文章推荐： javascript - 选择值，然后只调用函数
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com