mehrere Wecker in Javascript mit dynamisch generierten Eingabeelementen in Javascript

Question

Ich versuche, eine Webseite zu machen, die mehrere Alarme mit dynamischen Element erstellen Eigenschaft von Javascript setzen kann, aber ich bin nicht in der Lage, die Werte dieser multiple zu bekommen Elemente und erstellen Sie eine Warnung zu dieser Zeit. Dies ist mein Code so weit

<div id="TextBoxContainer"> 
    <!--Textboxes will be added here --> 
</div> 
<br /> 
<input id="btnAdd" type="button" value="add" onclick="AddTextBox();" /> 

<script type="text/javascript"> 
     var room = 0; 
     var i = 0; 
     function GetDynamicTextBox(){ 
      return '<div>Alarm ' + room +':</div><input type="number"style="text-align:center;margin:auto;padding:0px;width:200px;" min="0" max="23" placeholder="hour" id="a'+room+'" /><input type="number" min="0" max="59" placeholder="minute" style="text-align:center; padding:0px; margin:auto; width:200px;" id="b'+room+'" /><input type="date" style="margin:auto;text-align:center; width:200px; padding:10px"><input type="button" value ="Set" onclick = "AddAlarm('+room+');" /> <input type="button" value ="Remove" onclick = "RemoveTextBox(this)" />'; 
     } 
     function AddTextBox() { 
      var div = document.createElement('DIV'); 
      div.innerHTML = GetDynamicTextBox(""); 
      document.getElementById("TextBoxContainer").appendChild(div); 
     } 

     function RemoveTextBox(div) { 
      document.getElementById("TextBoxContainer").removeChild(div.parentNode); 
     } 

     function RecreateDynamicTextboxes() { 
       var html = ""; 
       html += "<div>" + GetDynamicTextBox() + "</div>"; 
       document.getElementById("TextBoxContainer").innerHTML = html; 
       room++; 
     } 
     window.onload = RecreateDynamicTextboxes; 

     function AddAlarm(values){ 
      var hour = document.getElementById(''); 
      var minute = document.getElementById(''); 
      var date = document.getElementById(''); 
     } 
</script> 

Answer 1

Sie das ID-Attribut auf der Datumseingabe vergessen hat, und Sie können die Eingabeelemente in AddAlarm statt ihren Werte zu sammeln.

EDIT: Um die Alarme zu überprüfen, müssen Sie sie speichern und jede Minute überprüfen, wenn das aktuelle Datum mit einem der Alarme übereinstimmt. Ich habe dort eine kurze Implementierung hinzugefügt.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="TextBoxContainer"> 
 
    <!--Textboxes will be added here --> 
 
</div> 
 
<br /> 
 
<input id="btnAdd" type="button" value="add" onclick="AddTextBox();" /> 
 

 
<script type="text/javascript"> 
 
     var alarms = {}; 
 
     var room = 0; 
 
     var i = 0; 
 
     
 
     setInterval(function() { 
 
      var current = new Date(); 
 
      for (var nr in alarms) { 
 
      var alarm = alarms[nr]; 
 
      console.log("checking alarm " + nr + " (" + alarm + ")"); 
 
      if(current.getHours() == alarm.getHours() 
 
       && current.getMinutes() == alarm.getMinutes()) { // also check for day, month and year 
 
       alert("ALERT\n"+alarm); 
 
      } else{ 
 
       console.log('Alarm ' + nr + '('+alarm+') not matching current date ' + current); 
 
      } 
 
      } 
 
     }, 60000); 
 
     
 
     function GetDynamicTextBox(){ 
 
      return '<div>Alarm ' + room +':</div><input type="number"style="text-align:center;margin:auto;padding:0px;width:200px;" min="0" max="23" placeholder="hour" id="a'+room+'" /><input type="number" min="0" max="59" placeholder="minute" style="text-align:center; padding:0px; margin:auto; width:200px;" id="b'+room+'" /><input type="date" style="margin:auto;text-align:center; width:200px; padding:10px" id="c'+room+'"><input type="button" value ="Set" onclick = "AddAlarm('+room+');" /> <input type="button" value ="Remove" onclick = "RemoveTextBox(this)" />'; 
 
     } 
 
     function AddTextBox() { 
 
      var div = document.createElement('DIV'); 
 
      div.innerHTML = GetDynamicTextBox(""); 
 
      document.getElementById("TextBoxContainer").appendChild(div); 
 
     } 
 

 
     function RemoveTextBox(div) { 
 
      document.getElementById("TextBoxContainer").removeChild(div.parentNode); 
 
     } 
 

 
     function RecreateDynamicTextboxes() { 
 
       var html = ""; 
 
       html += "<div>" + GetDynamicTextBox() + "</div>"; 
 
       document.getElementById("TextBoxContainer").innerHTML = html; 
 
       room++; 
 
     } 
 
     window.onload = RecreateDynamicTextboxes; 
 

 
     function AddAlarm(values){ 
 
      var hour = $('#a'+values).val(); 
 
      var minute = $('#b'+values).val(); 
 
      var date = $('#c'+values).val(); 
 
      console.log(hour + ':' + minute + ' on ' + date); 
 
      var dateObj = new Date(date); 
 
      dateObj.setMinutes(minute); 
 
      dateObj.setHours(hour); 
 
      console.log(dateObj); 
 
      alarms[values] = dateObj; 
 
     } 
 
</script>

Answer 2

Bisher bin ich in der Lage einen Alarm zu erzeugen, wenn die Werte der Systemzeit passen, aber ich weiß nicht, wie die Array-Wert zu löschen, wenn ein Element gelöscht wird. Ich kann das nicht machen. Dies ist mein Code so weit:

<script type="text/javascript"> 

     var snd = new Audio("clock.mp3"); // buffers automatically when created 
     // Get 
     if (localStorage.getItem("test")) { 
      data = JSON.parse(localStorage.getItem("test")); 
     } else { 
      // No data, start with an empty array 
      data = []; 
     } 

     var today = new Date(); 
     var d = today.getDay(); 
     var h = today.getHours(); 
     var m = today.getMinutes(); 
     //since page reloads then we will just check it first for the data 
     function check() { 
     //current system values 
     console.log("inside check"); 
     //if time found in the array the create a alert and delete that array object 
     for(var i = 0; i < data.length; i++) { 
      var today = new Date(); 
      var d = today.getDay(); 
      var h = today.getHours(); 
      var m = today.getMinutes(); 

      if (data[i].hours == h && data[i].minutes == m && data[i].dates == d) { 
       data.splice(i,1); 
       localStorage["test"] = JSON.stringify(data); 
       snd.play(); 
       alert("Wake Up Man ! Alarm is over "); 
       } 
      } 
      if((data.length)>0) 
      { 
       setTimeout(check, 1000); 
      } 

     } 
     //we do not want to run the loop everytime so we will use day to check 
     for(var i =0 ; i< data.length; i++) 
     { 
      if((data[i].dates == d) && (data[i].hours >= h) && (data[i].minutes >= m)) 
      { 
       check(); 
      } 
     } 

     console.log(data); 


     var room = 1; 
     //var data = []; 
     var i = 0; 
     function GetDynamicTextBox(){ 

      var date = new Date(); 
      var h = date.getHours(); 
      var m = date.getMinutes(); 
      var d = date.getDay(); 

      return '<div>Alarm ' + room +':</div><input type="number" style="text-align:center;margin:auto;padding:0px;width:200px;" min="0" max="23" value ='+h+' placeholder="hour" id="a'+room+'" /> <input type="number" min="0" max="59" placeholder="minute" style="text-align:center; padding:0px; margin:auto; width:200px;" id="b'+room+'" value ='+m+' /> <select id="c'+room+'" style="margin:auto; width:150px; padding:10px; color: black" required> <option value="1">Monday</option> <option value="2">Tuesday</option> <option value="3">Wednesday</option> <option value="4">Thursday</option> <option value="5">Friday</option> <option value="6">Saturday</option> <option value="0">Sunday</option> </select> <input type="button" value ="Set" onclick = "AddAlarm('+room+');" /> <input type="button" value ="Remove" onclick = "RemoveTextBox(this)" />'; 
     } 
     function AddTextBox() { 
      room++; 
      var div = document.createElement('DIV'); 
      div.innerHTML = GetDynamicTextBox(""); 
      document.getElementById("TextBoxContainer").appendChild(div); 
     } 

     function RemoveTextBox(div) { 
      document.getElementById("TextBoxContainer").removeChild(div.parentNode); 
     } 

     function RecreateDynamicTextboxes() { 
       var html = ""; 
       html += "<div>" + GetDynamicTextBox() + "</div>"; 
       document.getElementById("TextBoxContainer").innerHTML = html; 
     } 
     window.onload = RecreateDynamicTextboxes; 

     function AddAlarm(values){ 
      var hour = $('#a'+values).val(); 
      var minute = $('#b'+values).val(); 
      var date = $('#c'+values).val(); 

      //get the current time and date 
      var today = new Date(); 

      //current system values 
      var d = today.getDay(); 
      var h = today.getHours(); 
      var m = today.getMinutes(); 

      //first check that whether a same date present in the array or not then push it 
      var found = -1; 
      for(var i = 0; i < data.length; i++) { 
       if (data[i].hours == hour && data[i].minutes == minute && data[i].dates == date) { 
        found = 0; 
        break; 
       } 
      } 

      //if value does not present then push it into the array 
      if(found == -1) 
      { 
       data.push({hours: hour, minutes: minute, dates: date}); 
       //storing it into localstorage 
       localStorage.setItem("test", JSON.stringify(data)); 
      } 
      else 
      { 
       alert("Same value Exists"); 
      } 

      //console.log(data); 

      function check() { 
       //current system values 
       //console.log("inside check"); 
       //if time found in the array the create a alert and delete that array object 
       for(var i = 0; i < data.length; i++) { 
        var today = new Date(); 
        var d = today.getDay(); 
        var h = today.getHours(); 
        var m = today.getMinutes(); 

        if (data[i].hours == h && data[i].minutes == m && data[i].dates == d) { 
         data.splice(i,1); 
         snd.play(); 
         alert("Wake Up Man ! Alarm is over "); 
        } 
       } 
       if((data.length)>0) 
       { 
        setTimeout(check, 1000); 
       } 

      } 
      //we do not want to run the loop everytime so we will use day to check 
      for(var i =0 ; i< data.length; i++) 
      { 
       if((data[i].dates == d) && (data[i].hours >= h) && (data[i].minutes >= m)) 
       { 
        check(); 
       } 
      } 
     } 



     </script> 

Answer 3

Um eine Benachrichtigung zu erstellen, wenn eine bestimmte Zeit oder Zustand erreicht ist, ich glaube, Sie suchen nach setInterval (siehe reference).

Mit dieser Methode können Sie in regelmäßigen Abständen Maßnahmen ergreifen und versuchen, dieses Intervall so gut wie möglich zu nutzen. Es kommt zu einem häufigen Fehler, wenn Ihre Aktion länger als diese Intervalldauer dauern kann. Seien Sie also vorsichtig, wenn Sie ein zu kurzes Intervall verwenden. In einem solchen Fall können sich Aktionen überschneiden und seltsames Verhalten auftreten. Sie nicht wollen, dass so passieren, nicht zu gierig sein, wenn Sie das verwenden.

Für ein Alarmprojekt würde ich ein Intervall von einer Sekunde empfehlen.

Beispiel (nicht getestet):

JavaScript

var alarmDate = new Date(); 
alarmDate.setHours(7); 
alarmDate.setMinutes(15); 
// set day, month, year, etc. 

var ONE_SECOND = 1000; // miliseconds 

var alarmClock = setInterval(function() { 
    var currentDate = new Date(); 

    if (currentDate.getHours() == alarmDate.getHours() && 
      currentDate.getMinutes() == alarmDate.getMinutes() 
     /* compare other fields at your convenience */) { 
     alert('Alarm triggered at ' + currentDate); 
     // better use something better than alert for that? 

}, ONE_SECOND); 

dynamische Alarme hinzuzufügen, können Sie sie in ein Array setzen könnte dann setInterval Iterierte über sie haben.

Auf lange Sicht werden Sie wahrscheinlich satt von alert und fühlen Sie die Notwendigkeit, etwas zu verwenden, das den Fluss Ihrer Anwendung nicht bricht. Es gibt viel von Möglichkeiten, eine davon ist die Verwendung von Leuchtkästen, die übereinander gestapelt werden könnten. Auf diese Weise können Sie einen Alarm verpassen und trotzdem vom nächsten benachrichtigt werden.

Hoffe, das hilft und viel Glück!