JavaScript 用户输入变量
JavaScript user input variable
n00b 在这里！
我已经设法 assemble JavaScript 编码，但我不明白为什么不能正常工作。
该代码旨在计算给定日期与今天日期之间的差异。我想我在脚本中的逻辑不正确，因为控制台中没有显示错误。
代码如下：
function setDate(){
let thedate = document.getElementById("startDate").value;
if (thedate){
document.getElementById("showinputhere").innerHTML = thedate;
}
else{
document.getElementById("showinputhere").innerHTML = "No Date set";
}
}
let today = new Date().toISOString().slice(0, 10)
var startDate = startDate; // Start Date
var endDate = today; // Today's Date
{
var diffInMs = new Date(endDate) - new Date(startDate)
var diffInDays = diffInMs / (1000 * 60 * 60 * 24);
document.getElementById("days").innerHTML = ("Day: ") + diffInDays; // Day Counter
var diffInWeeks = diffInMs / (1000 * 60 * 60 * 24 * 7);
document.getElementById("weeks").innerHTML = ("Week: ") + (diffInWeeks).toFixed(); // Week Counter
if (diffInWeeks < 4) {
stageStatus = ("<i class=\"fas fa-seedling\" ></i> Vegetation");
} else if (diffInWeeks > 6) {
stageStatus = "<i class=\"fas fa-pepper-hot\" ></i> Harvesting";
} else {
stageStatus = "<i class=\"fas fa-leaf\" ></i> Flowering";
}
document.getElementById("stage").innerHTML = stageStatus;
}
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</head>
<body>
<div class="card bg-secondary border-dark m-3 mb-3" style="width: 18rem;">
<!--SET START DATE USER INPUT-->
<input type="date" id="startDate" ><br>
<button onclick="setDate()">Set Date</button>
<!--SET START DATE USER INPUT END-->
<!-- SHOW THE CHOOSEN DATE-->
<p id="showinputhere"></p>
<!-- CHOOSEN DATE END-->
<!--DISPLAY DAY & WEEK-->
<div class="card-body text-center">
<div class="row">
<div class="col m-auto">
<div class="alert alert-light" role="alert"><h4><p id="days" class="mb-0"></p></h4></div>
</div>
<div class="col m-auto">
<div class="alert alert-light" role="alert"><h4><p id="weeks" class="mb-0"></p></h4></div>
</div>
</div>
<!--DAY & WEEK END-->
<!--STAGE START-->
<div class="alert alert-success m-3" role="alert">
<span class="h4"><p id="stage" class="mb-0"></p></span>
</div>
<!--STAGE END-->
</div>
</div>
我的目标是让用户输入开始日期，然后所有的魔法都应该发生，不幸的是，只有当我在这里硬编码日期时它才有效：var startDate = startDate; // Start Date 像这样：var startDate = "2022/01/01"; // Start Date
这是工作 JavaScript 没有用户输入日期：
let today = new Date().toISOString().slice(0, 10)
var startDate = "2022/01/01"; // Start Date
var endDate = today; // Today's Date
{
var diffInMs = new Date(endDate) - new Date(startDate)
var diffInDays = diffInMs / (1000 * 60 * 60 * 24);
document.getElementById("days").innerHTML = ("Day: ") + diffInDays; // Day Counter
var diffInWeeks = diffInMs / (1000 * 60 * 60 * 24 * 7);
document.getElementById("weeks").innerHTML = ("Week: ") + (diffInWeeks).toFixed(); // Week Counter
if (diffInWeeks < 4) {
stageStatus = ("<i class=\"fas fa-seedling\" ></i> Vegetation");
} else if (diffInWeeks > 6) {
stageStatus = "<i class=\"fas fa-pepper-hot\" ></i> Harvesting";
} else {
stageStatus = "<i class=\"fas fa-leaf\" ></i> Flowering";
}
document.getElementById("stage").innerHTML = stageStatus;
}
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</head>
<body>
<div class="card bg-secondary border-dark m-3 mb-3" style="width: 18rem;">
<!--SET START DATE USER INPUT
<input type="date" id="startDate" ><br>
<button onclick="setDate()">Set Date</button>
<!--SET START DATE USER INPUT END-->
<!--SHOW THE CHOOSEN DATE
<p id="showinputhere"></p>
CHOOSEN DATE END-->
<!--DISPLAY DAY & WEEK-->
<div class="card-body text-center">
<div class="row">
<div class="col m-auto">
<div class="alert alert-light" role="alert"><h4><p id="days" class="mb-0"></p></h4></div>
</div>
<div class="col m-auto">
<div class="alert alert-light" role="alert"><h4><p id="weeks" class="mb-0"></p></h4></div>
</div>
</div>
<!--DAY & WEEK END-->
<!--STAGE START-->
<div class="alert alert-success m-3" role="alert">
<span class="h4"><p id="stage" class="mb-0"></p></span>
</div>
<!--STAGE END-->
</div>
</div>
感谢观看
function setDate(){
let thedate = document.getElementById("startDate").value;
if (thedate){
document.getElementById("showinputhere").innerHTML = thedate;
}
else{
document.getElementById("showinputhere").innerHTML = "No Date set";
}
let today = new Date().toISOString().slice(0, 10)
var startDate = thedate; // Start Date
var endDate = today; // Today's Date
var diffInMs = new Date(endDate) - new Date(startDate)
var diffInDays = diffInMs / (1000 * 60 * 60 * 24);
document.getElementById("days").innerHTML = ("Day: ") + diffInDays; // Day Counter
var diffInWeeks = diffInMs / (1000 * 60 * 60 * 24 * 7);
document.getElementById("weeks").innerHTML = ("Week: ") + (diffInWeeks).toFixed(); // Week Counter
if (diffInWeeks < 4) {
stageStatus = ("<i class=\"fas fa-seedling\" ></i> Vegetation");
} else if (diffInWeeks > 6) {
stageStatus = "<i class=\"fas fa-pepper-hot\" ></i> Harvesting";
} else {
stageStatus = "<i class=\"fas fa-leaf\" ></i> Flowering";
}
document.getElementById("stage").innerHTML = stageStatus;
}
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</head>
<body>
<div class="card bg-secondary border-dark m-3 mb-3" style="width: 18rem;">
<!--SET START DATE USER INPUT-->
<input type="date" id="startDate" ><br>
<button onclick="setDate()">Set Date</button>
<!--SET START DATE USER INPUT END-->
<!-- SHOW THE CHOOSEN DATE-->
<p id="showinputhere"></p>
<!-- CHOOSEN DATE END-->
<!--DISPLAY DAY & WEEK-->
<div class="card-body text-center">
<div class="row">
<div class="col m-auto">
<div class="alert alert-light" role="alert"><h4><p id="days" class="mb-0"></p></h4></div>
</div>
<div class="col m-auto">
<div class="alert alert-light" role="alert"><h4><p id="weeks" class="mb-0"></p></h4></div>
</div>
</div>
<!--DAY & WEEK END-->
<!--STAGE START-->
<div class="alert alert-success m-3" role="alert">
<span class="h4"><p id="stage" class="mb-0"></p></span>
</div>
<!--STAGE END-->
</div>
</div>
我做了一些调整来计算开花天数：
document.getElementById('startDate').valueAsDate = new Date();
calcule();
function calcule() {
let date = document.getElementById("startDate").value;
var diffInMs = new Date() - new Date(date);
var diffInDays = diffInMs / (1000 * 60 * 60 * 24);
var labelDay = diffInDays > 2 ? "Days: " : "Day: ";
document.getElementById("days").innerHTML = labelDay + Math.round(diffInDays * 100) / 100; // Day Counter
var diffInWeeks = diffInMs / (1000 * 60 * 60 * 24 * 7);
var labelWeek = diffInDays > 2 ? "Weeks: " : "Week: ";
document.getElementById("weeks").innerHTML = labelWeek + (diffInWeeks).toFixed(); // Week Counter
if (diffInWeeks < 4) {
stageStatus = ("<i class=\"fas fa-seedling\" ></i> Vegetation");
} else if (diffInWeeks > 6) {
stageStatus = "<i class=\"fas fa-pepper-hot\" ></i> Harvesting";
} else {
stageStatus = "<i class=\"fas fa-leaf\" ></i> Flowering";
}
document.getElementById("stage").innerHTML = stageStatus;
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<div class="card bg-secondary border-dark m-3 mb-3" style="width: 18rem;">
<!--SET START DATE USER INPUT-->
<input type="date" id="startDate" onchange="calcule()"><br>
<!--DISPLAY DAY & WEEK-->
<div class="card-body text-center">
<div class="row">
<div class="col m-auto">
<div class="alert alert-light" role="alert">
<h4>
<p id="days" class="mb-0"></p>
</h4>
</div>
</div>
<div class="col m-auto">
<div class="alert alert-light" role="alert">
<h4>
<p id="weeks" class="mb-0"></p>
</h4>
</div>
</div>
</div>
<!--DAY & WEEK END-->
<!--STAGE START-->
<div class="alert alert-success m-3" role="alert">
<span class="h4"><p id="stage" class="mb-0"></p></span>
</div>
<!--STAGE END-->
</div>
</div>
n00b 在这里！
我已经设法 assemble JavaScript 编码，但我不明白为什么不能正常工作。
该代码旨在计算给定日期与今天日期之间的差异。我想我在脚本中的逻辑不正确，因为控制台中没有显示错误。
代码如下：
function setDate(){
let thedate = document.getElementById("startDate").value;
if (thedate){
document.getElementById("showinputhere").innerHTML = thedate;
}
else{
document.getElementById("showinputhere").innerHTML = "No Date set";
}
}
let today = new Date().toISOString().slice(0, 10)
var startDate = startDate; // Start Date
var endDate = today; // Today's Date
{
var diffInMs = new Date(endDate) - new Date(startDate)
var diffInDays = diffInMs / (1000 * 60 * 60 * 24);
document.getElementById("days").innerHTML = ("Day: ") + diffInDays; // Day Counter
var diffInWeeks = diffInMs / (1000 * 60 * 60 * 24 * 7);
document.getElementById("weeks").innerHTML = ("Week: ") + (diffInWeeks).toFixed(); // Week Counter
if (diffInWeeks < 4) {
stageStatus = ("<i class=\"fas fa-seedling\" ></i> Vegetation");
} else if (diffInWeeks > 6) {
stageStatus = "<i class=\"fas fa-pepper-hot\" ></i> Harvesting";
} else {
stageStatus = "<i class=\"fas fa-leaf\" ></i> Flowering";
}
document.getElementById("stage").innerHTML = stageStatus;
}
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</head>
<body>
<div class="card bg-secondary border-dark m-3 mb-3" style="width: 18rem;">
<!--SET START DATE USER INPUT-->
<input type="date" id="startDate" ><br>
<button onclick="setDate()">Set Date</button>
<!--SET START DATE USER INPUT END-->
<!-- SHOW THE CHOOSEN DATE-->
<p id="showinputhere"></p>
<!-- CHOOSEN DATE END-->
<!--DISPLAY DAY & WEEK-->
<div class="card-body text-center">
<div class="row">
<div class="col m-auto">
<div class="alert alert-light" role="alert"><h4><p id="days" class="mb-0"></p></h4></div>
</div>
<div class="col m-auto">
<div class="alert alert-light" role="alert"><h4><p id="weeks" class="mb-0"></p></h4></div>
</div>
</div>
<!--DAY & WEEK END-->
<!--STAGE START-->
<div class="alert alert-success m-3" role="alert">
<span class="h4"><p id="stage" class="mb-0"></p></span>
</div>
<!--STAGE END-->
</div>
</div>
我的目标是让用户输入开始日期，然后所有的魔法都应该发生，不幸的是，只有当我在这里硬编码日期时它才有效：var startDate = startDate; // Start Date 像这样：var startDate = "2022/01/01"; // Start Date
这是工作 JavaScript 没有用户输入日期：
let today = new Date().toISOString().slice(0, 10)
var startDate = "2022/01/01"; // Start Date
var endDate = today; // Today's Date
{
var diffInMs = new Date(endDate) - new Date(startDate)
var diffInDays = diffInMs / (1000 * 60 * 60 * 24);
document.getElementById("days").innerHTML = ("Day: ") + diffInDays; // Day Counter
var diffInWeeks = diffInMs / (1000 * 60 * 60 * 24 * 7);
document.getElementById("weeks").innerHTML = ("Week: ") + (diffInWeeks).toFixed(); // Week Counter
if (diffInWeeks < 4) {
stageStatus = ("<i class=\"fas fa-seedling\" ></i> Vegetation");
} else if (diffInWeeks > 6) {
stageStatus = "<i class=\"fas fa-pepper-hot\" ></i> Harvesting";
} else {
stageStatus = "<i class=\"fas fa-leaf\" ></i> Flowering";
}
document.getElementById("stage").innerHTML = stageStatus;
}
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</head>
<body>
<div class="card bg-secondary border-dark m-3 mb-3" style="width: 18rem;">
<!--SET START DATE USER INPUT
<input type="date" id="startDate" ><br>
<button onclick="setDate()">Set Date</button>
<!--SET START DATE USER INPUT END-->
<!--SHOW THE CHOOSEN DATE
<p id="showinputhere"></p>
CHOOSEN DATE END-->
<!--DISPLAY DAY & WEEK-->
<div class="card-body text-center">
<div class="row">
<div class="col m-auto">
<div class="alert alert-light" role="alert"><h4><p id="days" class="mb-0"></p></h4></div>
</div>
<div class="col m-auto">
<div class="alert alert-light" role="alert"><h4><p id="weeks" class="mb-0"></p></h4></div>
</div>
</div>
<!--DAY & WEEK END-->
<!--STAGE START-->
<div class="alert alert-success m-3" role="alert">
<span class="h4"><p id="stage" class="mb-0"></p></span>
</div>
<!--STAGE END-->
</div>
</div>
感谢观看
function setDate(){
let thedate = document.getElementById("startDate").value;
if (thedate){
document.getElementById("showinputhere").innerHTML = thedate;
}
else{
document.getElementById("showinputhere").innerHTML = "No Date set";
}
let today = new Date().toISOString().slice(0, 10)
var startDate = thedate; // Start Date
var endDate = today; // Today's Date
var diffInMs = new Date(endDate) - new Date(startDate)
var diffInDays = diffInMs / (1000 * 60 * 60 * 24);
document.getElementById("days").innerHTML = ("Day: ") + diffInDays; // Day Counter
var diffInWeeks = diffInMs / (1000 * 60 * 60 * 24 * 7);
document.getElementById("weeks").innerHTML = ("Week: ") + (diffInWeeks).toFixed(); // Week Counter
if (diffInWeeks < 4) {
stageStatus = ("<i class=\"fas fa-seedling\" ></i> Vegetation");
} else if (diffInWeeks > 6) {
stageStatus = "<i class=\"fas fa-pepper-hot\" ></i> Harvesting";
} else {
stageStatus = "<i class=\"fas fa-leaf\" ></i> Flowering";
}
document.getElementById("stage").innerHTML = stageStatus;
}
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</head>
<body>
<div class="card bg-secondary border-dark m-3 mb-3" style="width: 18rem;">
<!--SET START DATE USER INPUT-->
<input type="date" id="startDate" ><br>
<button onclick="setDate()">Set Date</button>
<!--SET START DATE USER INPUT END-->
<!-- SHOW THE CHOOSEN DATE-->
<p id="showinputhere"></p>
<!-- CHOOSEN DATE END-->
<!--DISPLAY DAY & WEEK-->
<div class="card-body text-center">
<div class="row">
<div class="col m-auto">
<div class="alert alert-light" role="alert"><h4><p id="days" class="mb-0"></p></h4></div>
</div>
<div class="col m-auto">
<div class="alert alert-light" role="alert"><h4><p id="weeks" class="mb-0"></p></h4></div>
</div>
</div>
<!--DAY & WEEK END-->
<!--STAGE START-->
<div class="alert alert-success m-3" role="alert">
<span class="h4"><p id="stage" class="mb-0"></p></span>
</div>
<!--STAGE END-->
</div>
</div>
我做了一些调整来计算开花天数：
document.getElementById('startDate').valueAsDate = new Date();
calcule();
function calcule() {
let date = document.getElementById("startDate").value;
var diffInMs = new Date() - new Date(date);
var diffInDays = diffInMs / (1000 * 60 * 60 * 24);
var labelDay = diffInDays > 2 ? "Days: " : "Day: ";
document.getElementById("days").innerHTML = labelDay + Math.round(diffInDays * 100) / 100; // Day Counter
var diffInWeeks = diffInMs / (1000 * 60 * 60 * 24 * 7);
var labelWeek = diffInDays > 2 ? "Weeks: " : "Week: ";
document.getElementById("weeks").innerHTML = labelWeek + (diffInWeeks).toFixed(); // Week Counter
if (diffInWeeks < 4) {
stageStatus = ("<i class=\"fas fa-seedling\" ></i> Vegetation");
} else if (diffInWeeks > 6) {
stageStatus = "<i class=\"fas fa-pepper-hot\" ></i> Harvesting";
} else {
stageStatus = "<i class=\"fas fa-leaf\" ></i> Flowering";
}
document.getElementById("stage").innerHTML = stageStatus;
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<div class="card bg-secondary border-dark m-3 mb-3" style="width: 18rem;">
<!--SET START DATE USER INPUT-->
<input type="date" id="startDate" onchange="calcule()"><br>
<!--DISPLAY DAY & WEEK-->
<div class="card-body text-center">
<div class="row">
<div class="col m-auto">
<div class="alert alert-light" role="alert">
<h4>
<p id="days" class="mb-0"></p>
</h4>
</div>
</div>
<div class="col m-auto">
<div class="alert alert-light" role="alert">
<h4>
<p id="weeks" class="mb-0"></p>
</h4>
</div>
</div>
</div>
<!--DAY & WEEK END-->
<!--STAGE START-->
<div class="alert alert-success m-3" role="alert">
<span class="h4"><p id="stage" class="mb-0"></p></span>
</div>
<!--STAGE END-->
</div>
</div>