JavaScript GetTime函数

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来获取span，并且该函数返回完整的字符串，因此将其拆分了几个小时

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（）;

有点hackish做这个，不推荐。

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：这段代码可以缩短很多，但我保持这种方式，所以很容易理解。