javascript - 显示 If 语句的结果
问题描述
我的代码中有一个似乎无法显示的 if 语句。我不断得到未定义(输出3)。这是一个计算,以确定直到下一个生日的天数。基本上如果出生日期已经过去,它会在出生日期上增加一年并减去当前日期。如何在 JS 代码顶部的语句中显示它以及按下“计算”按钮时显示的其他语句?谢谢!
这是让我了解如何显示它的主要代码块。
if (diff.cbdiff < 0 ) {
var date = new Date(currentBday);
date.setFullYear(date.getFullYear() + 1);
document.getElementById('output3').innerHTML= ((date-date2)/(1000*60*60*24));
console.log(output3);
} else {
document.getElementById('output3').innerHTML=diff.cbdiff;
console.log(output3);
}
这是完整的JS代码:
function calc() {
var date1 = new Date();
var date2 = new Date(document.getElementById("date2").value);
var diff = dateDiff(date1, date2);
var output = "You are " + diff.year + " year" + "s " + diff.month + " month" + "s And " + diff.day + " day" + "s Old";
var output1 = "You are " + diff.days + " day" + "S" + "old";
var output2 = "You are " + diff.secondsalive + " seconds" + "old";
var output3 = "It is " + output3 + " days until your next Birthday";
document.getElementById("output").innerHTML = output;
document.getElementById("output1").innerHTML = output1;
document.getElementById("output2").innerHTML = output2;
document.getElementById("output3").innerHTML = output3;
console.log(date1);
console.log(date2);
}
function dateDiff(date1, date2) {
if (date1 > date2) return dateDiff(date2, date1);
var diff = {};
//console.log(currentBday);
diff.secondsalive = ((date2 - date1) / (1000)).toLocaleString({
undefined,
maximumFractionDigits: 1
});
diff.day = date2.getDate() - date1.getDate();
diff.days = ((date2 - date1) / (1000 * 60 * 60 * 24)).toFixed(1);
diff.year = date2.getFullYear() - date1.getFullYear();
diff.month = date2.getMonth() - date1.getMonth();
var currentBdYear = date2.getFullYear();
var currentBdMonth = date1.getMonth() + 1;
var currentBdDay = date1.getDate();
var currentYearBD = (diff.year + date2);
var addDate = new Date(diff.year);
//console.log(addDate);
var currentBday = new Date(currentBdMonth + "/" + currentBdDay + "/" + currentBdYear);
diff.cbdiff = ((currentBday - date2) / (1000 * 60 * 60 * 24)).toFixed(0);
console.log(diff.cbdiff);
if (diff.cbdiff < 0) {
var date = new Date(currentBday);
date.setFullYear(date.getFullYear() + 1);
document.getElementById('output3').innerHTML = ((date - date2) / (1000 * 60 * 60 * 24));
console.log(output3);
} else {
document.getElementById('output3').innerHTML = diff.cbdiff;
console.log(output3);
}
if (diff.day < 0) {
diff.month--;
var dayDiff = new Date(date2.getYear(), date2.getMonth(), 0).getDate() - date1.getDate();
diff.day = date2.getDate();
if (dayDiff > 0) {
diff.day += dayDiff;
}
}
if (diff.month < 0) {
diff.month += 12;
diff.year--;
}
return diff;
}
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body id="gradient">
<div>
<h1>Birthday Calculator</h1>
<h2> Enter Birthday</h2>
<td>BirthDate:</td>
<input id="date2" value="10/1/74" />
<button onclick="calc()" style="height:50px">Calculate</button>
<br><br>
<table class="center">
<tr>
<td>
<div id="output"></div>
</td>
</tr>
<tr>
<td>
<div id="output1"></div>
</td>
</tr>
<tr>
<td>
<div id="output2"></div>
</td>
</tr>
<tr>
<td>
<div id="output3"></div>
</td>
</tr>
</table>
<p It is id="output3"></p>
<h3></h3>
<script type="text/javascript" src="script.js"></script>
</body>
</html>
解决方案
问题是这一行:
var output3 = "It is " + output3 + " days until your next Birthday";
output3
是您要声明的变量,它不包含距离您下一个生日的天数。那是在diff.cbdiff
.
另一个问题是dateDiff()
将修正后的差异写入output3
DIV。但calc()
使用diff.cbdiff
. 所以dateDiff()
应该把更正的差异放在diff.cbdiff
而不是 DOM 中。
function calc() {
var date1 = new Date();
var date2 = new Date(document.getElementById("date2").value);
var diff = dateDiff(date1, date2);
var output = "You are " + diff.year + " year" + "s " + diff.month + " month" + "s And " + diff.day + " day" + "s Old";
var output1 = "You are " + diff.days + " day" + "S" + "old";
var output2 = "You are " + diff.secondsalive + " seconds" + "old";
var output3 = "It is " + diff.cbdiff + " days until your next Birthday";
document.getElementById("output").innerHTML = output;
document.getElementById("output1").innerHTML = output1;
document.getElementById("output2").innerHTML = output2;
document.getElementById("output3").innerHTML = output3;
console.log(date1);
console.log(date2);
}
function dateDiff(date1, date2) {
if (date1 > date2) return dateDiff(date2, date1);
var diff = {};
//console.log(currentBday);
diff.secondsalive = ((date2 - date1) / (1000)).toLocaleString({
undefined,
maximumFractionDigits: 1
});
diff.day = date2.getDate() - date1.getDate();
diff.days = ((date2 - date1) / (1000 * 60 * 60 * 24)).toFixed(1);
diff.year = date2.getFullYear() - date1.getFullYear();
diff.month = date2.getMonth() - date1.getMonth();
var currentBdYear = date2.getFullYear();
var currentBdMonth = date1.getMonth() + 1;
var currentBdDay = date1.getDate();
var currentYearBD = (diff.year + date2);
var addDate = new Date(diff.year);
//console.log(addDate);
var currentBday = new Date(currentBdMonth + "/" + currentBdDay + "/" + currentBdYear);
diff.cbdiff = ((currentBday - date2) / (1000 * 60 * 60 * 24)).toFixed(0);
console.log(currentBday, diff.cbdiff);
if (diff.cbdiff < 0) {
var date = new Date(currentBday);
date.setFullYear(date.getFullYear() + 1);
diff.cbdiff = ((date - date2) / (1000 * 60 * 60 * 24)).toFixed(0);
console.log(diff.cbdiff);
}
if (diff.day < 0) {
diff.month--;
var dayDiff = new Date(date2.getYear(), date2.getMonth(), 0).getDate() - date1.getDate();
diff.day = date2.getDate();
if (dayDiff > 0) {
diff.day += dayDiff;
}
}
if (diff.month < 0) {
diff.month += 12;
diff.year--;
}
return diff;
}
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body id="gradient">
<div>
<h1>Birthday Calculator</h1>
<h2> Enter Birthday</h2>
<td>BirthDate:</td>
<input id="date2" value="10/1/74" />
<button onclick="calc()" style="height:50px">Calculate</button>
<br><br>
<table class="center">
<tr>
<td>
<div id="output"></div>
</td>
</tr>
<tr>
<td>
<div id="output1"></div>
</td>
</tr>
<tr>
<td>
<div id="output2"></div>
</td>
</tr>
<tr>
<td>
<div id="output3"></div>
</td>
</tr>
</table>
<p It is id="output3"></p>
<h3></h3>
<script type="text/javascript" src="script.js"></script>
</body>
</html>
推荐阅读
- python - 无法垂直旋转 3D 相机,而是转换图像
- javascript - 使用变量作为 JavaScript 选择器 ID
- graphql - 将 Hasura 用作数据访问层的最佳和正确方法是什么
- kamailio - OpenSIPs 控制面板错误
- c++ - 在 C 中生成“pieslice”而不使用 graphics.h 的 pieslice()
- scala - 为什么编译器出错但在 Spark-shell 上运行?
- angular - 获取“服务命令需要在 Angular 项目中运行,但找不到项目定义”运行 Docker Compose
- javascript - 从两个不同端口上的父窗口使用 jquery 访问 iframe
- filter - 有没有办法为最终用户预过滤事件(针对特定事件名称)而不涉及他们(没有复选框或下拉菜单)(JSON 提要)
- sql - 如何在 PostgreSQL V9.4 中添加和删除新的 json-array 元素