我正在尝试使用 HTML 和 Javascript 制作一个倒数计时器，它具有预设日期，但用户可以更改其日期
[英]I'm trying to make a countdown timer with HTML and Javascript which has a preset date, but whose date can be changed by the user
问题描述
I'm currently using a form so that the user can change the date the timer is set to count down to.
我目前正在使用一个表单，以便用户可以更改计时器设置为倒计时的日期。 The problem is that the Javascript function that's supposed to run when the user clicks the "submit" button is working, but even though I've entered something into the "date" input box of the form, multiple tests have shown that it doesn't show that I've input anything.问题是当用户单击“提交”按钮时应该运行的 Javascript 函数正在运行，但即使我已经在表单的“日期”输入框中输入了一些内容，多次测试表明它没有t 表明我已经输入了任何东西。 I don't understand what I need to do.我不明白我需要做什么。 Here is my code:这是我的代码：
<html>
<p id="demo"></p>
<div class='form'>
<form>
enter any date here <br>
<br>
<input type="date" id="date"> <br>
<br>
<button onclick='countdown()' class="submitbutton">submit</button>
</form>
</div>
<script>
if (document.cookie=="[object HTMLInputElement]") {
var countDownDate = new Date("10/17/2020").getTime();
}
else {
var countDownDate = new Date(document.cookie).getTime();
}
var countDownDate = new Date("10/17/2020").getTime();
var x = setInterval(function() {
var now = new Date().getTime();
var distance = countDownDate - now;
var days = Math.floor(distance / (1000 * 60 * 60 * 24));
var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((distance % (1000 * 60)) / 1000);
document.getElementById("demo").innerHTML = days + "d " + hours + "h " + minutes + "m " + seconds + "s ";
}, 1000);
</script>
<script>
function countdown() {
var date = document.getElementById("date");
document.cookie = date;
countDownDate = new Date("10/17/2020").getTime();
var x = setInterval(function() {
var now = new Date().getTime();
var distance = countDownDate - now;
var days = Math.floor(distance / (1000 * 60 * 60 * 24));
var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((distance % (1000 * 60)) / 1000);
document.getElementById("demo").innerHTML = days + "d " + hours + "h " + minutes + "m " + seconds + "s ";
if (distance < 0) {
clearInterval(x);
document.getElementById("demo").innerHTML = "the date you entered is before today";
}
}, 1000);
}
</script>
</html>
Thank you in advance.先感谢您。
1 个解决方案
解决方案1
0 已采纳
I think that you should enter the count down date.我认为您应该输入倒计时日期。 but current code is not working.但当前代码不起作用。 They have a issues in the part to get the date.他们在获取日期的部分有问题。 I fixed it.我修好了它。 please check it.请检查一下。
https://codepen.io/stargroup0075/pen/jOPdRPd https://codepen.io/stargroup0075/pen/jOPdRPd
<html>
<p id="demo"></p>
<div class='form'>
<form>
enter any date here <br>
<br>
<input type="date" id="date"> <br>
<br>
<button onclick='countdown()' class="submitbutton" type="button">submit</button>
</form>
</div>
<script>
if (document.cookie=="[object HTMLInputElement]") {
var countDownDate = new Date("10/17/2020").getTime();
}
else {
var countDownDate = new Date(document.cookie).getTime();
}
var countDownDate = new Date("10/17/2020").getTime();
var x = setInterval(function() {
var now = new Date().getTime();
var distance = countDownDate - now;
var days = Math.floor(distance / (1000 * 60 * 60 * 24));
var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((distance % (1000 * 60)) / 1000);
document.getElementById("demo").innerHTML = days + "d " + hours + "h " + minutes + "m " + seconds + "s ";
}, 1000);
</script>
<script>
function countdown() {
var date = document.getElementById("date").value;
document.cookie = date;
countDownDate = new Date(date).getTime();
var x = setInterval(function() {
var now = new Date().getTime();
var distance = countDownDate - now;
var days = Math.floor(distance / (1000 * 60 * 60 * 24));
var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((distance % (1000 * 60)) / 1000);
document.getElementById("demo").innerHTML = days + "d " + hours + "h " + minutes + "m " + seconds + "s ";
if (distance < 0) {
clearInterval(x);
document.getElementById("demo").innerHTML = "the date you entered is before today";
}
}, 1000);
}
</script>
</html>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.