2017-01-04 2 views
0

Ich arbeite gerade an einem Skript, das die Zeit anzeigt, bis eine Periode in meiner Schule endet oder beginnt. Einer der Datensätze im Array muss davon ausgeschlossen werden, als Periode gezählt zu werden.JavaScript Time Exception Nachricht

{ start: minutes(11, 20), end: minutes(11, 46) }, 

Ich möchte diese Daten auszuschließen, weil seine nicht ein vollwertiges Zeit, sein Mittagessen und im nicht sicher, wie ich über das Tun es gehen sollte. Irgendwelche Ideen? Außerdem müsste die Nachricht an den Benutzer anstatt geändert werden.

document.getElementById("result").innerHTML = "There are " + timeLeft + " minutes left until period " + (i+1) + " is over." 

Irgendwelche Ideen?

body, html { 
 
    height: 100%; 
 
} 
 
body { 
 
    background-color: #a00000; 
 
    margin: 0; /* remove default margins added by browsers */ 
 
} 
 
.wrapper { 
 
    display: flex; 
 
    height: 100%; 
 
} 
 
#result { 
 
    margin: auto; 
 
    padding: 25px; 
 
    font-weight: bold; 
 
    text-align: center; 
 
    color:black; 
 
    width: 250px; 
 
    border-radius: 10px; 
 
    background-color: white; 
 
} 
 
h1 { 
 
    font-weight: bold; 
 
    margin:auto; 
 
    font-size: 20px; 
 
} 
 
.lunch { 
 
    width: 95px; 
 
    background-color: #a00000; 
 
    color: white; 
 
    border: 1px solid black; 
 
    border-radius: 5px; 
 
    padding: 5px; 
 
    margin-top: 10px; 
 
}
<html> 
 
    <head> 
 
     <meta charset="UTF-8"> 
 
     <title>Marking Period Countdow</title> 
 
     <meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport' /> 
 
     <link rel="stylesheet" href="css/bootstrap.min.css"> 
 
     <link rel="stylesheet" href="css/style.css"> 
 
    </head> 
 
    <body onload="myFunction(myTime, periods);"> 
 
     <script> 
 
      //Get current date & midnight 
 
      var now = new Date(); 
 
      var midnight = new Date(); 
 
      midnight.setHours(0,0,0,0); 
 
      //Get number of minutes that passed since midnight: 
 
      var myTime = Math.floor((now.getTime() - midnight.getTime())/60000); 
 
      //For Testing Purposes. 
 
      // console.log(myTime + ' minutes passed since midnight.'); 
 

 
      function minutes(hour, min) { 
 
       return hour * 60 + min; 
 
      } 
 

 
      //All the periods throughout my school day. 
 
      var periods = [ 
 
       { start: minutes(7, 45), end: minutes(8, 34) }, 
 
       { start: minutes(8, 38), end: minutes(9, 30) }, 
 
       { start: minutes(9, 34), end: minutes(10, 23) }, 
 
       { start: minutes(10, 27), end: minutes(11, 16) }, 
 
       { start: minutes(11, 20), end: minutes(12, 09) }, 
 
       { start: minutes(12, 12), end: minutes(12, 38) }, 
 
       { start: minutes(12, 42), end: minutes(13, 31) }, 
 
       { start: minutes(13, 35), end: minutes(14, 25) }, 
 
      ]; 
 

 
      function myFunction(myTime, periods) { 
 
       periods.every(function (period, i) { 
 
        if (myTime < period.start) { 
 
         if (i == 0) { 
 
          console.log('School has not started yet'); 
 
          document.getElementById("result").innerHTML = "School has not started yet"; 
 

 
         } else { 
 
          var timeLeft = period.start - myTime; 
 
          console.log("There are " + timeLeft + " minutes left until period " + (i+1) + " starts."); 
 
          document.getElementById("result").innerHTML = "There are " + timeLeft + " minutes left until period " + (i+1) + " starts."; 
 
         } 
 
        } else if (myTime < period.end) { 
 
         var timeLeft = period.end - myTime; 
 
          console.log("There are " + timeLeft + " minutes left until period " + (i+1) + " is over."); 
 
          document.getElementById("result").innerHTML = "There are " + timeLeft + " minutes left until period " + (i+1) + " is over."; 
 
        } else if (i == periods.length - 1) { 
 
          console.log('School has finished for today'); 
 
          document.getElementById("result").innerHTML = "School has finished for today"; 
 
        } else { 
 
         return true; // keep looking for the right period 
 
        } 
 
       }); 
 
      } 
 
     </script> 
 
     <div class="wrapper"> 
 
      <div id="result"></div> 
 
     </div> 
 
    </body> 
 
</html>

+2

Sie haben vergessen, eine Frage zu stellen. – Ibu

+0

Können Sie diesem Datenelement eine weitere Eigenschaft hinzufügen, 'isLunch = true'? – Amy

Antwort

0

Wenn Sie es mehr funktionsfähig machen möchten, können Sie sich Funktionen für Ihre Nachrichten und dann lassen Sie die Zeiträume erstellen Definieren Sie, welche Nachrichten angezeigt werden sollen. Wie das Folgende.

//Get current date & midnight 
 
var now = new Date(); 
 
var midnight = new Date(); 
 
midnight.setHours(0, 0, 0, 0); 
 
//Get number of minutes that passed since midnight: 
 
var myTime = Math.floor((now.getTime() - midnight.getTime())/60000); 
 

 
function minutes(hour, min) { 
 
    return hour * 60 + min; 
 
} 
 

 
function defaultMessage(minutes, i) { 
 
    document.getElementById("result").innerHTML = "There are " + minutes + " minutes left until period " + (i + 1) + " is over."; 
 
}; 
 

 
function lunchMessage(minutes, i) { 
 
    document.getElementById("result").innerHTML = "Lunch will end in " + minutes + " minutes"; 
 
}; 
 

 
//All the periods throughout my school day. 
 
var periods = [{ 
 
    start: minutes(7, 45), 
 
    end: minutes(8, 34), 
 
    message: defaultMessage 
 
}, { 
 
    start: minutes(8, 38), 
 
    end: minutes(9, 30), 
 
    message: defaultMessage 
 
}, { 
 
    start: minutes(9, 34), 
 
    end: minutes(10, 23), 
 
    message: defaultMessage 
 
}, { 
 
    start: minutes(10, 27), 
 
    end: minutes(11, 16), 
 
    message: defaultMessage 
 
}, { 
 
    start: minutes(11, 20), 
 
    end: minutes(12, 09), 
 
    message: defaultMessage 
 
}, { 
 
    start: minutes(12, 12), 
 
    end: minutes(12, 38), 
 
    message: lunchMessage 
 
}, { 
 
    start: minutes(12, 42), 
 
    end: minutes(13, 31), 
 
    message: defaultMessage 
 
}, { 
 
    start: minutes(13, 35), 
 
    end: minutes(14, 25), 
 
    message: defaultMessage 
 
}, ]; 
 

 
function myFunction(myTime, periods) { 
 
    periods.every(function(period, i) { 
 
    if (myTime < period.start) { 
 
     if (i == 0) { 
 
     document.getElementById("result").innerHTML = "School has not started yet"; 
 
     } else { 
 
     var timeLeft = period.start - myTime; 
 
     document.getElementById("result").innerHTML = "There are " + timeLeft + " minutes left until period " + (i+1) + " starts."; 
 
     } 
 
    } else if (myTime < period.end) { 
 
     var timeLeft = period.end - myTime; 
 
     period.message(timeLeft, i); 
 
    } else if (i == periods.length - 1) { 
 
     document.getElementById("result").innerHTML = "School has finished for today"; 
 
    } else { 
 
     return true; // keep looking for the right period 
 
    } 
 
    }); 
 
}
body, 
 
html { 
 
    height: 100%; 
 
} 
 
body { 
 
    background-color: #a00000; 
 
    margin: 0; 
 
    /* remove default margins added by browsers */ 
 
} 
 
.wrapper { 
 
    display: flex; 
 
    height: 100%; 
 
} 
 
#result { 
 
    margin: auto; 
 
    padding: 25px; 
 
    font-weight: bold; 
 
    text-align: center; 
 
    color: black; 
 
    width: 250px; 
 
    border-radius: 10px; 
 
    background-color: white; 
 
} 
 
h1 { 
 
    font-weight: bold; 
 
    margin: auto; 
 
    font-size: 20px; 
 
} 
 
.lunch { 
 
    width: 95px; 
 
    background-color: #a00000; 
 
    color: white; 
 
    border: 1px solid black; 
 
    border-radius: 5px; 
 
    padding: 5px; 
 
    margin-top: 10px; 
 
}
<body onload="myFunction(myTime, periods);"> 
 
    <div class="wrapper"> 
 
    <div id="result"></div> 
 
    </div> 
 
</body>

0

Ich kann nur Bild, wie viele Schüler werden wollen wissen, wie viel Zeit sie verlassen haben;)

Was ich dir glauben gesuchte im Hinblick auf der Ausschluss lautet:

if (myTime > periods[4].start && myTime < periods[4].end) { 
    console.log('Lunch period'); 
    document.getElementById("result").innerHTML = "Lunch period"; 
} 

Platzieren Sie das kurz vor if (myTime < period.start) und wandle diese Zeile in eine else if um.

nicht sicher, wo Sie Ihre Mittagspause von Ihrem Array-Struktur, aber ersetzen 4 mit der Pause :)

Verwandte Themen