Zeit abgelaufen Berechnung aus Formular in JavaScript

Question

Ich arbeite an einem Zeit abgelaufen Rechner, wenn der Benutzer in einem Monat, Tag und Jahr eingibt. Von ihrer Eingabe und dem aktuellen Datum möchte ich berechnen, wie viele Tage dazwischen liegen und dann anzeigen, wie viele Jahre, Monate und Tage verstrichen sind. Ich begann mit einem Formular mit den drei Eingabewerten "Monat", "Tag" und "Jahr". Ich begann dann auf das Skript:

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); 
    } 

Offensichtlich, wie Sie sagen, kann ich irgendwie aufgehört, weil ich auf ratlos bin, wo man von hier geht. Dies ist ein Labor in der Schule für mich und ich möchte nur verstehen, wie es geht. Mein Lehrer erwähnte "Beachten Sie, dass Ihr Programm Code enthalten muss, um Tageswerte über 31 in Monate und Monate über 12 in Jahre zu konvertieren." und ich bin eigentlich total verwirrt aber verstehe was er meint. Es ist nur zu verstehen, wie man das tatsächlich macht. Es ist eine Web-Klasse und es ist sehr schwer, nur aus einem Lehrbuch zu verstehen. Ich habe ein wenig online geschaut, aber ich habe nichts gefunden, was für meine Situation nützlich wäre. Wenn Sie mir helfen können, vielen Dank.

Answer 1

In javascript können Sie das aktuelle Datum als

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

Nach Werte aus Ihrer Eingabe von Datumsfeldern bekommen Sie bekommen müssen einige grundlegende mathematische Operationen wie

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

hier zu tun ist, einige Beispielcode können Sie herumspielen und von lernen. https://jsfiddle.net/8pd5f3pe/1/

Answer 2

Hier ist ein example Sie Datum Unterschied

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

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

 
    var ToYear \t = get('ToYear').value; 
 
    var ToMonth \t = get('ToMonth').value; 
 
    var ToDay \t = get('ToDay').value; 
 
\t 
 
    var date1 \t = new Date(FromYear,FromMonth,FromDay); /*Create Date Object From date*/ 
 
    var date2 \t = new Date(ToYear,ToMonth,ToDay);   /*Create Date Object To date*/ 
 
    var diff \t = 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> 
 
\t </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>