Question

我正在制作一个用户可以输入日期的计算器，它会显示自那时起所经过的时间。我已经得到它，以便在用户点击我编码的提交按钮后，页面刷新并显示如下的查询字符串：

file:///H:/dateselection/public_html/Document8.html?

请注意最后的问号。

我的问题是，我该怎么做并将其传递给一个值，以便我可以在我的页面上显示它？这是我的代码：

<!DOCTYPE html>
<html>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<Title>Elapsed Time Calculator</Title>

<body>
<!-- Navigation -->
    <nav>
      <ul class="w3-navbar w3-black">
        <li><a href="file:///C:/Users/Kyle/Desktop/Document1.html">Home</a></li> <!--Link to Home Page-->
        <li><a href="file:///C:/Users/Kyle/Desktop/Document2.html">NHL Teams</a></li><!--Link to Page of NHL Teams-->
        <li><a href="file:///C:/Users/Kyle/Desktop/Document3.html">AHL Teams</a></li><!--Link to Page of AHL Teams-->
        <li><a href="file:///C:/Users/Kyle/Desktop/Document4.html">WHL Teams</a></li><!--Link to Page of WHL Teams-->
        <li><a href="file:///C:/Users/Kyle/Desktop/Document5.html">G.A.A. Calculator</a></li><!--Link to Page of WHL Teams-->
        <li><a href="file:///C:/Users/Kyle/Desktop/Document6.html">Fan Survey</a></li><!--Link to Fan Survey Page-->
        <li><a href="file:///C:/Users/Kyle/Desktop/Document7.html">Web Safety</a></li><!--Link to Page about Web Safety-->
        <li><a href="file:///C:/Users/Kyle/Desktop/Document8.html">Elapsed Time</a></li><!--Link to Page That Calculates Elapsed Time Between Two Dates-->
      </ul>
    </nav>
    <header>
             <h1 style="text-align:center;">Elapsed Time Calculator</h1>
    </header>
   <article>
       <form id="frmdate" onsubmit="myfunction()">
          <fieldset>
            <label for="dateSelected">
              Select a date
            </label>
            <input type="date" id="dateSelected" />
          </fieldset>
          <fieldset class="button">
            <button type="submit" id="determineDay">Calculate</button>
          </fieldset>

     </form>

   </article> 

<div id="output"></div>
<script src="tools.js"></script>
</body>
</html>

这是我的脚本文件：

function myfunction()
{
    var enteredDate = document.getElementById('dateSelected').valueAsDate;
    var a= new Date();

    var elapsed_time = a- enteredDate;
var result=elapsed_time.toString('days-hours-minutes-seconds');



//var result = "Day: " + elapsed_time.getDate() + "<br/>" +
  //  "Month: " + elapsed_time.getMonth() + "<br/>" +
   // "Year: " + elapsed_time.getFullYear();
//document.getElementById('output').innerHTML = "Result is:<br/>" + result;

}


function secondsToString(result)
{
    var numyears = Math.floor(result / 31536000);
    var numdays = Math.floor(( result % 31536000) / 86400); 
    var numhours = Math.floor(((result % 31536000) % 86400) / 3600);
    var numminutes = Math.floor((((result % 31536000) % 86400) % 3600) / 60);
    var numseconds = (((result % 31536000) % 86400) % 3600) % 60;
    return numyears + " years " +  numdays + " days " + numhours + " hours " + numminutes + " minutes " + numseconds + " seconds";

}

Answer 1

事实上，因为你正在使用js并且实际上并没有提交任何内容，你可以禁用表单onsubmit并使用“提交按钮”onclick事件。

function myfunction() {
  var enteredDate = document.getElementById('dateSelected').valueAsDate;
  var a = new Date();
  var elapsed_time = a - enteredDate;
  var result = new Date(elapsed_time);
  
  var result = "Day: " + result.getDate() + "<br/>" +
               "Month: " + result.getMonth() + "<br/>" +
               "Year: " + result.getFullYear();
  
  document.getElementById('output').innerHTML = "Result is:<br/>" + result;
}

function secondsToString(result) {
    var numyears = Math.floor(result / 31536000);
    var numdays = Math.floor(( result % 31536000) / 86400); 
    var numhours = Math.floor(((result % 31536000) % 86400) / 3600);
    var numminutes = Math.floor((((result % 31536000) % 86400) % 3600) / 60);
    var numseconds = (((result % 31536000) % 86400) % 3600) % 60;
    return numyears + " years " +  numdays + " days " + numhours + " hours " + numminutes + " minutes " + numseconds + " seconds";
}

var calculateButton = document.getElementById('determineDay');
calculateButton.onclick = myfunction;

<form id="frmdate" onsubmit="return false;">
  <fieldset>
    <label for="dateSelected">
      Select a date
    </label>
    <input type="date" id="dateSelected" />
  </fieldset>
  <fieldset class="button">
    <button id="determineDay">Calculate</button>
  </fieldset>
</form>

<div id="output"></div>

按钮提交后查询字符串和显示javascript

1 个答案: