javascript - 用户输入 future 日期变量的计时器

Question

关闭。这个问题需要更多 focused .它目前不接受答案。

---

想要改进这个问题吗？ 更新问题，使其只关注一个问题 editing this post .

关闭去年。

Improve this question

如果有人能为我正在从事的学校项目指明正确的方向，那就太好了。下面你会看到一个 super 简单的计时器，这是我在一个名为 Web Dev 的 youtuber 的教程的帮助下制作的。该示例将新年前夜硬编码到脚本中。但我想更进一步，要求用户输入他们的特殊日期 - 例如，让计时器倒计时到他们的生日。

到目前为止，我已经设法使计数器从给定日期开始倒计时，而不仅仅是硬编码的日期，并且我已经设法为用户生成的数据创建输入表单。但是，一旦我尝试将两者结合起来，就出现了问题。我猜我需要将用户生成的数字输入到其中一个函数中，而不仅仅是将它们列为 let、var 和 const？

哦，理想情况下，我应该想办法让输入表单在用户单击“输入”按钮后立即消失。

对于我之前的 StackOverflow 问题，有人非常友好地为我编写了整个答案。但由于这是一个非常重要的学习过程，我会非常满意一些正确方向的提示和指示。

        let userYear = userYearEntered;
        let userMonth = userMonthEntered;
        let userDay = userDayEntered;

        const userDate = new Date(userYear, userMonth, userDay, 0, 0, 0);
        const userOccasion = 'I need to present this project';


        function enterSpecialDate() {
            var userYearEntered = document.getElementById('userYear').value;
            console.log(userYearEntered);

            var userMonthEntered = document.getElementById('userMonth').value;
            console.log(userMonthEntered);

            var userDayEntered = document.getElementById('userDay').value;
            console.log(userDayEntered);
        }

        /*create countdown timer using substraction*/
        function updateCountdowntime() {
            const currentTime = new Date();
            const diff = userDate - currentTime;
            console.log(diff);

            /* we've been given the difference in milliseconds, so some division is needed */
            const d = Math.floor(diff / 1000 / 60 / 60 / 24);
            const h = Math.floor(diff / 1000 / 60 / 60) % 24;
            const m = Math.floor(diff / 1000 / 60) % 60;
            const s = Math.floor(diff / 1000) % 60;

            /* send values back into HTML document */

            document.getElementById('days').innerHTML = d;
            document.getElementById('hours').innerHTML = h;
            document.getElementById('minutes').innerHTML = m;
            document.getElementById('seconds').innerHTML = s;

            document.getElementById('userOccasion').innerHTML = userOccasion;
        }

        setInterval(updateCountdowntime, 1000);

       * {
            box-sizing: border-box;
        }

        body {
            background-color: rgb(44, 48, 48);
            font-family: sans-serif;
            color: rgb(239, 239, 239);
            font-size: 3em;
            font-weight: 300;
            height: 100vh;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }

        div {
            margin-top: 1vh;
        }

        label {
            font-size: 0.4em;
        }

<div>
        <label for="userYear">year</label>
        <input id="userYear" type="number" value="" placeholder="e.g. 2021">

        <label for="userMonth">month</label>
        <input id="userMonth" type="number" value="" placeholder="e.g. 8">

        <label for="userDay">day</label>
        <input id="userDay" type="number" value="" placeholder="17">

        <button onclick="enterSpecialDate()">Enter</button>

    </div>

    <div>

        <p>there are</p>

        <div class="time">
            <span id="days"></span>
            <span>days</span>
        </div>

        <div class="time">
            <span id="hours"></span>
            <span>hours</span>
        </div>

        <div class="time">
            <span id="minutes"></span>
            <span>minutes</span>
        </div>

        <div class="time">
            <span id="seconds"></span>
            <span>seconds</span>
        </div>

        <p>until <span id="userOccasion"></span></p>

    </div>

Answer 1

这是使用 date input 的解决方案, 更多 semantic , accessible和更多comfortable to use最终用户。

它使用内联样式在表单和倒计时之间切换，但同样可以使用 classList 来实现. toggle()以及用于显示或隐藏特定 View 的类。

您还应该实现某种形式的错误处理(例如，现在它在没有设置日期的情况下单击按钮时根本不执行任何操作，并且它还支持过去的日期，从而导致负数)。

关于 setInterval() 的说明:它不够可靠/不够精确，可能会导致秒数被跳过或更改过快。有关这方面的更多背景信息和可靠的解决方案，我推荐视频 "JavaScript counters the hard way - HTTP 203" on YouTube .该解决方案也可作为 reusable code snippet in this gist .

现在为场合文本实现附加输入应该相当简单。

let userDate = null;
const userOccasion = 'I need to present this project';
const userDateInput = document.getElementById('user-date');
const formView = document.getElementById('form-view');
const counterView = document.getElementById('counter-view');

function enterSpecialDate() {
  userDate = userDateInput.valueAsDate;
  if (userDate) {
    // fire the function once, so we start with filled in numbers right away
    updateCountdowntime();
    // see the note on setInterval() in the answer
    setInterval(updateCountdowntime, 1000);
    // switch between the form and the counter view
    formView.style.display = 'none';
    counterView.style.display = 'block';
  }
}

/*create countdown timer using substraction*/
function updateCountdowntime() {
  const currentTime = new Date();
  const diff = userDate - currentTime;

  /* we've been given the difference in milliseconds, so some division is needed */
  const d = Math.floor(diff / 1000 / 60 / 60 / 24);
  const h = Math.floor(diff / 1000 / 60 / 60) % 24;
  const m = Math.floor(diff / 1000 / 60) % 60;
  const s = Math.floor(diff / 1000) % 60;

  /* send values back into HTML document */

  document.getElementById('days').innerHTML = d;
  document.getElementById('hours').innerHTML = h;
  document.getElementById('minutes').innerHTML = m;
  document.getElementById('seconds').innerHTML = s;

  document.getElementById('userOccasion').innerHTML = userOccasion;
}

* {
  box-sizing: border-box;
}

body {
  background-color: rgb(44, 48, 48);
  font-family: sans-serif;
  color: rgb(239, 239, 239);
  font-size: 2em;
  font-weight: 300;
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

div {
  margin-top: 1vh;
}

<div id="form-view">
  <input type="date" id="user-date">
  <button onclick="enterSpecialDate()">Enter</button>
</div>

<div id="counter-view" style="display: none;">

  <p>there are</p>

  <div class="time">
    <span id="days"></span>
    <span>days</span>
  </div>

  <div class="time">
    <span id="hours"></span>
    <span>hours</span>
  </div>

  <div class="time">
    <span id="minutes"></span>
    <span>minutes</span>
  </div>

  <div class="time">
    <span id="seconds"></span>
    <span>seconds</span>
  </div>

  <p>until <span id="userOccasion"></span></p>

</div>