Javascript 用户输入未来日期变量的计时器

如果有人能为我正在进行的一个学校项目指出正确的方向，那就太好了。下面你可以看到一个超级简单的计时器，我是在youtuber网站开发人员的指导下制作的。这个例子将除夕夜硬编码到脚本中。但是我想更进一步，让用户输入他们的特殊日期，例如，让计时器倒计时到他们的生日

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

哦，理想情况下，我应该找到一种方法，在用户单击“回车”按钮时，让输入表单立即消失

对于我之前的问题，有人非常友好地为我编码了整个答案。但是，由于这是一个学习的过程，我非常乐意在正确的方向上提供一些提示和指点

        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);

年
月
白天
进入
有

天
小时
会议记录
秒
直到

您应该可以通过几个简单的提示或文本输入字段来完成此操作

例如：

请用户输入一个月，然后输入一天，然后输入一年。 您可以将这些输入保存为单独的变量。然后使用const newYearTime，但不使用硬编码日期，而是使用变量作为日期

现在您有了const newYearTime=新日期（'1月'、1日、当前年份等…）

根据提示，您可以执行以下操作：

let year = number(prompt: enter year)
let day = number(prompt: enter day)
let month = prompt: enter month

然后你只需将const newYearTime改为

Const newYearTime = new Date(month, day, year)

我知道我的代码不正确。我不在我的电脑上，所以我没有我的编辑器来编写它，但我想你明白我的意思了

---

我对javascript也很陌生，但如果我认为自己知道如何使用javascript，我会尽力提供帮助。为了补充他的答案，您还想使用LocalStorage

因此，您可以将用户输入的特殊日期存储到LocalStorage中。因此，您不需要在用户每次进入页面时询问用户

下面是一个关于如何将数据存储到本地存储的示例。dtUserDate是用户输入的特殊日期

window.localStorage.setItem("Some Name", JSON.stringify( { "SpecialDate" : dtUserDate } ));

---

您还可以只使用一个变量和.substring JS方法解析用户的日期字符串。读起来会有点困难，但如果存储是一个因素，你可以这样做。例如，在输入中使用占位符要求输入MM/DD/YYYY，您可以使用：

userDate.substring（0,2）=月份

userDate.substring（3,5）=天

userDate.substring（6，userDate.length）=年

要获得日期：

var newYearTime = new Date(userDate.substring(6, userDate.length), (userDate.substring(0, 2) - 1), userDate.substring(3, 5));

所以我在我的编辑器中重新创建了你的代码。我现在看到的问题是，当用户按下enter键（或单击它）时，它不会更新html

您在测试控制台时检查过它吗？因为我第一次尝试时打开了控制台，立即发现了问题：

Uncaught ReferenceError: userYearEntered is not defined

有了这个，你应该能够自己找到问题的答案。我将给您一点提示：当页面第一次加载时，var userYearEntered没有值。这从一开始就破坏了代码。想想你能如何改变这一点。这个问题有多种解决方案

此外，我看到您希望在按下或单击enter键后立即隐藏输入。只需在输入的父div上添加一个隐藏属性，就可以很容易地做到这一点。只要这一次没有发生，它就是假的。如果发生了onclick，您可以将其更改为true。
这里有一个使用a的解决方案，它对最终用户来说越来越重要

它使用内联样式在表单和倒计时之间进行切换，但同样可以使用。以及用于显示或隐藏特定视图的类

您还应该实现某种形式的错误处理（例如，现在在没有设置日期的情况下单击按钮时，它什么也不做，并且它还支持过去的日期，从而导致负数）

有关
setInterval（）
的注释：它不够可靠/准确，可能导致跳过秒数或更改过快。有关这方面的更多背景信息和可靠的解决方案，我推荐这段视频。该解决方案也可作为一个

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


让userDate=null；
const usermission='我需要展示这个项目'；
const userDateInput=document.getElementById（'user-date'）；
const formView=document.getElementById（'form-view'）；
const counterView=document.getElementById（'counter-view'）；
函数enterSpecialDate（）{
userDate=userDateInput.valueAsDate；
如果（用户日期）{
//启动该函数一次，因此我们立即开始填充数字
updateCountdowntime（）；
//请参见答案中关于setInterval（）的注释
setInterval（updateCountdowntime，1000）；
//在窗体和计数器视图之间切换
formView.style.display='none'；
counterView.style.display='block'；
}
}
/*使用减法创建倒计时计时器*/
函数updateCountdowntime（）{
const currentTime=新日期（）；
const diff=用户日期-当前时间；
/*我们已经得到了毫秒的差值，所以需要一些除法*/
常数d=数学楼层（差异/1000/60/60/24）；
常数h=数学楼层（差异/1000/60/60）%24；
常数m=数学楼层（dif
var newYearTime = new Date(userDate.substring(6, userDate.length), (userDate.substring(0, 2) - 1), userDate.substring(3, 5));

Uncaught ReferenceError: userYearEntered is not defined