两次打印日期

时间:2018-12-28 06:53:11

标签: javascript html css

我想两次打印日期,就像这样:

output
 -date: the date
 -someotherdate: the someotherdate

好吧,无论如何下面的代码都不会显示:

document.querySelectorAll('.seconds')[0].innerHTML = secsleft % 60;
document.querySelectorAll('.minutes')[0].innerHTML = secsleft / 60 % 60;

此代码可以:

document.querySelectorAll('.seconds')[0].innerHTML = secsleft % 60;

虽然我的其余代码未更改。 secsleft =距下一个纪元还剩秒数。所以我认为是因为它会改变大小,这可能是个问题吗?

我不知道。 AnyHelp太棒了。

编辑:其余代码

<html>
<head>
    <style>
        .seconds {
            font-size: 5em;
        }
        .minutes {
            font-size: 4em;
        }
        .hours {
            font-size: 3em;
        }
        .days {
            font-size: 2em;
        }
    </style>
</head>
<body>
    <span class="seconds"/>
    <span class="minutes"/>
    <span class="hours"/>
    <span class="days"/>
    <article>
    <script type="text/javascript">
        function clock() {
            var time = new Date(),
            secsleft = (Math.pow(2, 31) - time.getTime() / 1000);
            document.querySelectorAll('.seconds')[0].innerHTML = secsleft % 60
        }
        setInterval(clock, 1000);
    </script>
    </article>
</body>

这行不通的是

<html>
<head>
    <style>
        .seconds {
            font-size: 5em;
        }
        .minutes {
            font-size: 4em;
        }
        .hours {
            font-size: 3em;
        }
        .days {
            font-size: 2em;
        }
    </style>
</head>
<body>
    <span class="seconds"/>
    <span class="minutes"/>
    <span class="hours"/>
    <span class="days"/>
    <article>
    <script type="text/javascript">
        function clock() {
            var time = new Date(),
            secsleft = (Math.pow(2, 31) - time.getTime() / 1000);
            document.querySelectorAll('.seconds')[0].innerHTML = secsleft % 60;
            document.querySelectorAll('.minutes')[0].innerHTML = secsleft / 60 % 60;
            document.querySelectorAll('.hours')[0].innerHTML = secsleft 3600 % 24;
            document.querySelectorAll('.days')[0].innerHTML = secsleft % 86400;
        }
        setInterval(clock, 1000);
    </script>
    </article>
</body>

谢谢

1 个答案:

答案 0 :(得分:1)

原因是因为您使用的<span>标签不正确。 Span标签需要一个结束标签,而不是开始标签中的/。

来自https://developer.mozilla.org/en-US/docs/Web/HTML/Element/span

  

省略标记:无,开始标记和结束标记都是必需的。

替换:

<span class="seconds"/>
<span class="minutes"/>
<span class="hours"/>
<span class="days"/>

使用

<span class="seconds"></span>
<span class="minutes"></span>
<span class="hours"></span>
<span class="days"></span>

它应该可以工作。