Расчет прошедшего времени из формы в JavaScript

Я работаю над калькулятором прошедшего времени, когда пользователь вводит месяц, день и год. По их вводу и текущей дате я хочу рассчитать, сколько дней между ними, а затем отобразить, сколько лет, месяцев и дней прошло. Я начал с создания формы с тремя входными значениями «месяц», «день» и «год». Затем я начал по сценарию:

function timeElapsed() {
       var timeMonth = document.getElementById("month");
       var timeDay = document.getElementById("day");
       var timeYear = document.getElementById("year");
       var currentDate = new Date();
       var elapsed = 
       document.getElementById("timeElapsed").innerHTML = elapsed;
   }
       //Event Listener
       var submitButton= document.getElementById("sButton");
    if (submitButton.addEventListener) {
        submitButton.addEventListener("click", timeElapsed, false);
    } else if (submitButton.attachEvent) {
        submitButton.attachEvent("onclick", timeElapsed);
    }

Очевидно, как вы можете сказать, я как бы остановился, потому что я в тупике, куда идти дальше. Это лаборатория в школе для меня, и я просто хочу понять, как это сделать. Мой учитель упомянул "Обратите внимание, что ваша программа должна включать код для преобразования значений дней, превышающих 31, в месяцы, а месяцев, превышающих 12, в годы". и я на самом деле совершенно сбит с толку, но понимаю, что он имеет в виду. . Это просто понимание того, как на самом деле это сделать. Это веб-класс, и его очень сложно понять только по учебнику. Я немного посмотрел в Интернете, но я не нашел ничего полезного для моей ситуации. Если вы можете помочь мне, большое спасибо.


javascript forms html date elapsedtime
person Megan    schedule 29.03.2017    source источник
comment
Вы можете начать с создания даты с new Date(year, month-1, day), а затем получить разницу, как показано здесь: Преобразование даты из DD-MM-YYYY в DD/MM/YYYY в Javascript и поиск разницы. Обратите внимание, что вам, вероятно, следует обнулить часы для currentDate, а затем округлить до целых дней, чтобы учесть возможные проблемы с переходом на летнее время (или использовать все методы UTC).   -  person RobG    schedule 29.03.2017

Ответы (2)


arrow_upward
1
arrow_downward

Вот example, который вы можете использовать для расчета разницы дат

function get(ID){
  return document.getElementById(ID);
}

function calculateDiff(){
  var FromYear 	= get('FromYear').value;
  var FromMonth = get('FromMonth').value;
  var FromDay 	= get('FromDay').value;

  var ToYear 	= get('ToYear').value;
  var ToMonth 	= get('ToMonth').value;
  var ToDay 	= get('ToDay').value;
	
  var date1 	= new Date(FromYear,FromMonth,FromDay);   /*Create Date Object From date*/
  var date2 	= new Date(ToYear,ToMonth,ToDay);         /*Create Date Object To date*/
  var diff 	= new Date(date2.getTime() - date1.getTime());

  get('ResultYear').value  = diff.getUTCFullYear()-1970;  /*Calculate year difference*/
  get('ResultMonth').value = diff.getUTCMonth();          /*Count month difference*/
  get('ResultDay').value   = diff.getUTCDate()-1;         /*Count day difference*/
}

calculateDiff();

var calculate = get('calculate');

calculate.onclick = function(){
  calculateDiff();
}
table input{
  width: 60px;
}
button{
  width: 80%;
  margin: 10px auto;
}
<table border="1">
  <tbody>
    <tr class="header">
      <th>&nbsp;</th>
      <th>YYYY</th>
      <th>MM</th>
      <th>DD</th>
    </tr>
    <tr>
      <th>FROM</th>
      <td><input  id="FromYear"  placeholder="YYYY" value="2017"></td>
      <td><input  id="FromMonth" placeholder="MM" value="3"></td>
      <td><input  id="FromDay"   placeholder="DD" value="18"></td>
    </tr>
    <tr>
      <th>TO</th>
      <td><input  id="ToYear"  placeholder="YYYY" value="2017"></td>
      <td><input  id="ToMonth" placeholder="MM" value="3"></td>
      <td><input  id="ToDay"   placeholder="DD" value="29"></td>
	</tr>
    <tr>
      <th colspan="4">
        <button id="calculate">Calculate</button>
      </th>
    </tr>
    <tr>
       <th>RESULT</th>
       <td><input  id="ResultYear"  placeholder="YYYY" value=""></td>
       <td><input  id="ResultMonth" placeholder="MM" value=""></td>
       <td><input  id="ResultDay"   placeholder="DD" value=""></td>
     </tr>
  </tbody>
</table>

person Sumon Sarker    schedule 29.03.2017

arrow_upward
0
arrow_downward

В javascript вы можете получить текущую дату как

var currentDate = new Date();
var currentMonth = currentDate.getMonth() + 1; // as it starts from 0
var currentDay = currentDate.getDate();
var currentYear = currentDate.getFullYear();

После получения значений из полей ввода даты вам необходимо выполнить некоторые основные математические операции, такие как

if(currentMonth < inputMonth) {
  monthBetween = inputMonth - currentMonth;
} else if(currentMonth > inputMonth) {
  monthBetween = currentMonth - inputMonth;
} else {
  monthBetween = 0;
}

Вот пример кода, с которым вы можете поэкспериментировать и чему-то научиться. https://jsfiddle.net/8pd5f3pe/1/

person AZee    schedule 29.03.2017