Question

我的getTime函数向我显示当前的小时，分钟和秒，没有任何问题。我的问题是如何在不同的跨度下调用小时，分钟和秒？例子

 <span id="hours" class="x"></span>
    <span id="minutes" class="y"></span>
    <span id="seconds" class="z"></span>

JavaScript函数

   <script language="JavaScript">

        function getTime() {
            const timeNow = new Date();
            const hours = timeNow.getHours();
            const minutes = timeNow.getMinutes();
            const seconds = timeNow.getSeconds();
            let timeString = '' + ((hours > 24) ? hours - 12 : hours);
            timeString += ((minutes < 10) ? ":0" : ":") + minutes;
            timeString += ((seconds < 10) ? ":0" : ":") + seconds;
            timeString += (hours >= 12) ? "" : "";
            //timeString += (hours >= 12) ? " P.M." : " A.M.";
            return timeString;
        }

        const hoursSpan = document.getElementById('Hour');

        setInterval(() => {
            hoursSpan.textContent = getTime();
        }, 1000);

    </script>

Answer 1

尝试一下。使变量成为全局变量，以获取小时，分钟和秒的单独值。您使用错误的ID来获取跨度，并且该函数返回完整的字符串，因此仅将其分割了几个小时

var timeNow = new Date();
            var hours = timeNow.getHours();
            var minutes = timeNow.getMinutes();
            var seconds = timeNow.getSeconds();

        function getTime() {
            timeNow = new Date();
             hours = timeNow.getHours();
             minutes = timeNow.getMinutes();
             seconds = timeNow.getSeconds();

            let timeString = '' + ((hours > 24) ? hours - 12 : hours);
            timeString += ((minutes < 10) ? ":0" : ":") + minutes;
            timeString += ((seconds < 10) ? ":0" : ":") + seconds;
            timeString += (hours >= 12) ? "" : "";
            //timeString += (hours >= 12) ? " P.M." : " A.M.";
            return timeString;
        }

        const hoursSpan = document.getElementById('hours');
         const min = document.getElementById('minutes');
          const sec = document.getElementById('seconds');

        setInterval(() => {
            hoursSpan.textContent = getTime().split(':')[0];
            min.textContent=":"+minutes;
            sec.textContent=":"+seconds;
        }, 1000);

<span id="hours" class="x"></span>
    <span id="minutes" class="y"></span>
    <span id="seconds" class="z"></span>

Answer 2

从DOM中获取元素，并将值分配给innerHtml属性

document.getElementById（'＃idName'）。innerHTML = timeNow.getHours（）;

不建议使用这种骇人听闻的方式。

Answer 3

第一期

您在此行中犯了一个愚蠢的错误 const hoursSpan = document.getElementById('Hour'); 没有ID为Hour的元素。您的span元素的ID为hours。您需要此： const hoursSpan = document.getElementById('hours');

第二个问题

如果您打算分别使用这三个部分，那么为什么要首先将它们连接成一个字符串？只需利用JavaScript函数可以返回对象的事实即可！

这看起来更干净！

<span id="hours" class="x"></span>
<span id="minutes" class="y"></span>
<span id="seconds" class="z"></span>

<script>
    function getTime() {
        const timeNow = new Date();

        const hours = timeNow.getHours();
        const minutes = timeNow.getMinutes();
        const seconds = timeNow.getSeconds();

        let hoursString = '' + ((hours > 12) ? hours - 12 : hours);
        let minutesString = ((minutes < 10) ? ":0" : ":") + minutes;
        let secondsString = ((seconds < 10) ? ":0" : ":") + seconds;

        return {
            h: hoursString,
            m: minutesString,
            s: secondsString
        };
    }

    const hoursSpan = document.getElementById('hours');
    const minutesSpan = document.getElementById('minutes');
    const secondsSpan = document.getElementById('seconds');

    setInterval(() => {
        const t = getTime();

        hoursSpan.textContent = t.h;
        minutesSpan.textContent = t.m;
        secondsSpan.textContent = t.s;
    }, 1000);

</script>

PS：该代码可以缩短很多，但我将其保留为这种方式，以便于理解。

JavaScript GetTime函数

3 个答案: