Question

所以我试图制作一个html标题，自动更改标题倒计时样式的数字。我有一个工作的javascript变量，它返回我的事件之前的天数。如何将变量“daysUntil”计算的数字拉入html页面中名为countdown的span id？

我搜索了一个解决方案并找到了一些关于getElementById的答案，但不确定如何实现它。我几乎没有学习，所以如果这是一个非常基本的问题，请提前感谢！

<!DOCTYPE html>
<head>
  <title>Countdown</title>
  <link rel="stylesheet" type="text/css" href="css/style.css">
  <script>
    var d1 = new Date(); //"now"
    var d2 = new Date("2016/11/28")  // some date
    var diff = Math.abs(d2-d1)/(1000*60*60*24);
    var daysUntil = Math.ceil(diff)
  </script>
</head>
<body>
<div class="nav" id="top">
  <ul>
    <li><a href="/">COUNTDOWN</a></li>
    <li><a href="portfolio.html">Portfolio</a></li>
    <li><a href="connect.html">Connect with Me</a></li>
  </ul>
</div>
<div class="clearfix" id="content">
  <div class="left">
    <h1>T Minus <span id="countdown"></span>days!</h1>
<!-- The rest of the code is omitted-->

Answer 1

https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent

这也是innerText和innerHTML的方法。

这个简单的例子如下：

document.getElementById('countdown').textContent = daysUntil.toString()

Answer 2

您必须将<script>放在倒计时元素之后。

See live demo

... 
<div class="left">
    <h1>T Minus <span id="countdown"></span>days!</h1>

    <script>
    var d1 = new Date(); //"now"
    var d2 = new Date("2016/11/28")  // some date
    var diff = Math.abs(d2-d1)/(1000*60*60*24);
    var daysUntil = Math.ceil(diff);

    var countdown = document.getElementById('countdown');        
    countdown.textContent = daysUntil + ' ';

    </script>
    </body>
  </html>

在html页面中使用javascript变量的值

2 个答案: