英文:
I need help fixing my html and java script code
问题
我想创建一个地方，你可以输入你的下一个生日，页面会使用 window.alert 告诉你距离你的生日还有多少天。当我运行这段代码时，在我输入生日之前，警报显示 NaN，这意味着不是一个数字。我希望在我输入生日并点击提交后它能够正常工作。这是我的代码：
<form name="form">
<input type="date" id="bday"><br><br>
<input type="submit" value="Submit">
</form>
<script>
let date_1 = new Date(document.getElementById("bday").value);
let date_2 = new Date();
let difference = date_1.getTime() - date_2.getTime();
let TotalDays = Math.ceil(difference / (1000 * 3600 * 24));
window.alert(TotalDays);
</script>
</body>
注意： 这段代码在加载页面时就会计算日期差异并显示 window.alert，而不是在点击提交按钮后再进行计算。如果你想在点击提交按钮后才计算，需要将 JavaScript 代码放入一个函数中，并在提交按钮的点击事件上调用该函数。
英文:
I want to make a place where you key in your next birthday and the page does a window.alert to tell you how many days are left for your birthday. When I run the code, before I key in the birthday, the alert says NaN which means not a number. I want it to work after I key in the birthday after I click submit. This is what I coded:
` <form name = "form">
<input type="date" id="bday"><br><br>
<input type="submit" value="Submit">
</form>
<script>
let date_1 = new Date(document.getElementById("bday").value);
let date_2 = new Date();
let difference = date_1.getTime() - date_2.getTime();
let TotalDays = Math.ceil(difference / (1000 * 3600 * 24));
window.alert(TotalDays);
</script>
</body>`
答案1
得分: 0
我看到基本上有两个问题。
首先，你从bday获取的值将是一个字符串，所以你应该确定该值的格式。你需要获取日、月和年，以创建一个字符串，例如"day/month/year"，然后使用Date.parse()将其转换为日期类型。
其次，要获取实际日期，你应该使用Date.now()。仅构造函数本身不会起作用。
应用这些更改后，我们有：
let date_1 = Date.parse("13/10/2023");
let date_2 = Date.now();
let difference = date_1 - date_2;
let TotalDays = Math.ceil(difference / (1000 * 3600 * 24));
window.alert(TotalDays);
英文:
I see basically two problems here.
First of all, the value that you are getting from bday is going to be a string, so you should be sure of the format of that value. You need to get the day, the month and the year, in order to create a string like "day/month/year", to convert it into a date type, using Date.parse().
Secondly, to get the actual date, you should use Date.now(). The constructor alone will not work.
Apllying these changes we have:
let date_1 = Date.parse("13/10/2023");
let date_2 = Date.now();
let difference = date_1 - date_2;
let TotalDays = Math.ceil(difference / (1000 * 3600 * 24));
window.alert(TotalDays);
答案2
得分: -1
<!-- 开始代码段：js 隐藏：false 控制台：true Babel：false -->
<!-- 语言：lang-js -->
<!DOCTYPE html>
<html>
<head>
<title>生日倒计时</title>
</head>
<body>
<form onsubmit="calculateDaysLeft(event)">
<label for="bday">输入您的生日：</label>
<input type="date" id="bday" name="bday" required>
<input type="submit" value="提交">
</form>
<script>
function calculateDaysLeft(event) {
event.preventDefault(); // 防止表单提交以避免页面重新加载
// 从输入字段获取用户生日
let userBirthday = new Date(document.getElementById("bday").value);
// 获取当前日期
let currentDate = new Date();
// 计算毫秒差异
let difference = userBirthday.getTime() - currentDate.getTime();
// 计算天数差异并显示警报
let totalDays = Math.ceil(difference / (1000 * 3600 * 24));
window.alert(`距离您的生日还有 ${totalDays} 天！`);
}
</script>
</body>
</html>
<!-- 结束代码段 -->
英文:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
<!DOCTYPE html>
<html>
<head>
<title>Birthday Countdown</title>
</head>
<body>
<form onsubmit="calculateDaysLeft(event)">
<label for="bday">Enter your birthday:</label>
<input type="date" id="bday" name="bday" required>
<input type="submit" value="Submit">
</form>
<script>
function calculateDaysLeft(event) {
event.preventDefault(); // Prevent form submission to avoid page reload
// Get the user's birthday from the input field
let userBirthday = new Date(document.getElementById("bday").value);
// Get the current date
let currentDate = new Date();
// Calculate the difference in milliseconds
let difference = userBirthday.getTime() - currentDate.getTime();
// Calculate the difference in days and show the alert
let totalDays = Math.ceil(difference / (1000 * 3600 * 24));
window.alert(`There are ${totalDays} days left until your birthday!`);
}
</script>
</body>
</html>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论