2017-10-20 17 views
0

Salut, j'ai dans mes tags d'étiquettes HTML à l'entrée de l'heure Heure et heure Minute pour régler mon alerte ...Javascript comparer alarmTime à clockTime

Je veux comparer au temps d'horloge pour voir si elles correspondent et ensuite faire le alarmsound

J'ai essayé

var alarmAudio = new Audio('alarm.wav'); 
 

 
timer(); 
 

 
function timer() { 
 
    "use strict"; 
 
    const DATE = new Date(); 
 
    let monthNames = ["January", "Febuary", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"]; 
 
    let dayNames = ["Monday", "Tuesday", "Wendesday", "Thursday", "Friday", "Saturday", "Sunday"]; 
 
    console.log(DATE); 
 
    document.getElementById('year').innerHTML = DATE.getFullYear(); 
 
    document.getElementById('month').innerHTML = monthNames[DATE.getMonth()]; 
 
    document.getElementById('date').innerHTML = DATE.getDate(); 
 
    document.getElementById('day').innerHTML = dayNames[DATE.getDay() - 1]; 
 
    var hour = document.getElementById('time').innerHTML = DATE.getHours(); 
 
    var min = document.getElementById('time').innerHTML = DATE.getMinutes(); 
 
    var sec = document.getElementById('time').innerHTML = DATE.getSeconds(); 
 
    //change the vars types to string and check if it's 1 or 2 digits 
 
    hour = hour.toString() 
 
    if (hour.length < 2) { 
 
     //prepend a 0 to the string to pad if necessary 
 
     hour = '0' + hour; 
 
    } 
 
    min = min.toString() 
 
    if (min.length < 2) { 
 
     //prepend a 0 to the string to pad if necessary 
 
     min = '0' + min; 
 
    } 
 
    sec = sec.toString() 
 
    if (sec.length < 2) { 
 
     sec = '0' + sec; 
 
    } 
 
    let theTime = document.getElementById('time').innerHTML = hour + " : " + min + " : " + sec; 
 
    setTimeout(timer, 500); 
 
} 
 

 
// alarmtime and time match start Alarm 
 
function setAlarm() { 
 
    
 
} 
 
// Loop Alarm 
 

 
// Click on alarm button stop sound 
 

 
// Reset
<div id="set-alarm"> 
 
    <h2 class="set-alarm-header">Set Alarm</h2> 
 
    <label style="display:inline-block;" class="set-hours"> 
 
    <p class="time-setting-hours">Hours</p> 
 
    <input type="number" value="0" min="0"> 
 
    </label> 
 
    <label style="display:inline-block;" class="set-minutes"> 
 
    <p class="time-setting-minutes">Minutes</p> 
 
    <input type="number" value="0" min="0"> 
 
    </label> 
 
</div>

Comment puis-je comparer le temps mis dans un laboratoire eltag avec le temps à l'horloge?

+3

Et la question est? – Legends

+0

'if (hour === alarmTime && min === alarmTime)' implique que 'hour' et' min' sont les mêmes, c'est-à-dire '08: 08',' 09: 09', '10: 10', etc. et que 'alarmTime' représente magiquement la valeur de l'heure et la valeur de la minute _simultaneously_ ... Où sont définies vos quatre variables? Nous avons besoin de plus de contexte de votre JavaScript. – Xufox

+0

Vous voudrez probablement setInterval() plutôt que de continuer à définir setTimeout() encore et encore https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setInterval –

Répondre

0

Que faire si vous utilisez:

let timeNow = Date.now(); 

... et comparer à votre heure & minutes?

0

Pour comparer le temps du système à l'heure indiquée par vos commandes, vous devez déterminer à quelle heure vos commandes représentent, parse que pour un objet date réel, puis utilisez la fonction setInterval pour vérifier la alarmTime à l'heure actuelle .

Gardez à l'esprit que l'utilisation setInterval est moins efficace pour ce cas, alors l'utilisation setTimeout (qui ne nécessite pas comparant les temps du tout comme il planifie l'alarme se produire à un moment donné) que setInterval utilisera plusieurs cycles de processeur à la fois planifier une vérification et ensuite comparer les heures.

Exemple (avec setTimeout fonctionnalité commentée):

(function() { 
 
"use strict"; 
 

 
const alarmAudio = new Audio('alarm.wav'); 
 
const labelAlarmSetFor = document.getElementById('time'); 
 
let timeoutId = -1; 
 
let intervalId = -1; 
 
const padLeft = (value) => { 
 
    while (value.length < 2) { 
 
     value = '0' + value; 
 
    } 
 
    return value; 
 
}; 
 
const checkTime = (alarmTime) => { 
 
    const now = new Date(); 
 
    
 
    // log to console to show the constant comparisons. remove this line when you can see the wasted processor cycles. 
 
    console.log('checking to see if ' + now.toUTCString() + ' is >= to ' + alarmTime.toUTCString()); 
 
    
 
    if (now >= alarmTime) { 
 
     // time to sound the alarm 
 
     // clear this interval as it's no longer needed 
 
     clearInterval(intervalId); 
 
     intervalId = -1; 
 
     // sound the alarm 
 
     soundAlarm(); 
 
    }; 
 
}; 
 
const setTimerAsTimeout = (offset) => { 
 
    return setTimeout(soundAlarm, offset); 
 
}; 
 
const setTimerAsInterval = (alarmTime) => { 
 
    return setInterval(() => (checkTime(alarmTime)), 1000); 
 
}; 
 
const logAlarmTimeToUser = (alarmDateTime) => { 
 
    const monthNames = ["January", "Febuary", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"]; 
 
    const dayNames = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"]; 
 
    const year = alarmDateTime.getFullYear().toString(); 
 
    const month = monthNames[alarmDateTime.getMonth()]; 
 
    const weekday = dayNames[alarmDateTime.getDay()]; 
 
    const day = padLeft(alarmDateTime.getDate().toString()); 
 
    const hour = padLeft(alarmDateTime.getHours().toString()); 
 
    const minute = padLeft(alarmDateTime.getMinutes().toString()); 
 
    const second = padLeft(alarmDateTime.getSeconds().toString()); 
 

 
    const alarmDate = [year, month, day].join('-'); 
 
    const alarmTime = [hour, minute, second].join(':'); 
 

 
    console.log('Alarm will sound at ' + alarmDateTime.toUTCString()); 
 
    if (labelAlarmSetFor) { 
 
     labelAlarmSetFor.innerText = 'Alarm set for ' + alarmTime + ' on ' + weekday + ', ' + alarmDate; 
 
    } 
 
}; 
 
const getAlarmTime = (ms) => { 
 
    const offset = new Date(); 
 
    offset.setMilliseconds(offset.getMilliseconds() + ms); 
 
    return offset; 
 
}; 
 
const soundAlarm =() => { // alarmtime and time match start Alarm 
 
    console.log('play the sound'); 
 
    // call to alarmAudio.play(); // assuming that's how it works... 
 
}; 
 
const preventPosts = (e) => { 
 
    // prevent button clicks (et. al.) from posting. 
 
    e.preventDefault(); 
 
    return false; 
 
}; 
 
const stopAlarm = (e) => { 
 
    if (timeoutId >= 0) { 
 
     // cancel any existing alarms scheduled by timeout 
 
     clearTimeout(timeoutId); 
 
    } 
 
    
 
    if (intervalId >= 0) { 
 
     // cancel any existing alarms scheduled by interval 
 
     clearInterval(intervalId); 
 
    } 
 
    
 
    if (labelAlarmSetFor) { 
 
     labelAlarmSetFor.innerText = ''; 
 
    } 
 

 
    // call to alarmAudio.stop(); // assuming that's how it works... 
 
    
 
    if (e) { 
 
     return preventPosts(e); 
 
    } 
 
}; 
 
const getElementArray = (selector) => { 
 
    return Array.prototype.slice.call(document.querySelectorAll(selector)); 
 
}; 
 
const getParent = (elem, className) => { 
 
    const invalidNodes = /html|body/g 
 
    let parent = elem.parentNode ? elem.parentNode : null; 
 
    
 
    if (parent && !invalidNodes.test(parent.tagName.toLowerCase())) { 
 
     if (className) { 
 
      if (!parent.classList.contains(className)) { 
 
       parent = getParent(parent.parentNode, className) 
 
      } 
 
     } 
 
    } else { 
 
     parent = null; 
 
    } 
 
    
 
    return parent; 
 
}; 
 
const changeHandler = (e) => { 
 
    const isHours = getParent(e.target, 'set-hours') !== null; 
 
    const isMinutes = getParent(e.target, 'set-minutes') !== null; 
 
    const value = parseInt(e.target.value, 10) || 0; 
 
    const factor = isHours ? value * 60 * 60 * 1000 : value * 60 * 1000; 
 
    const alarmTime = getAlarmTime(factor); 
 
    
 
    stopAlarm(); 
 
    
 
    /* 
 
    // if setting as a timeout, which involves far less checking of the time (i.e., none... it just schedules the alarm to occur at a specific datetime). 
 
    logAlarmTimeToUser(alarmTime); 
 
    const now = new Date(); 
 
    const offset = alarmTime.getTime() - now.getTime(); 
 
    timeoutId = setTimerAsTimeout(offset); 
 
    */ 
 
    
 
    // or, if setting as an interval to actually compare current system time with the alarm time, which is being done once every second (adjustable in the setTimerAsInterval function). 
 
    logAlarmTimeToUser(alarmTime); 
 
    intervalId = setTimerAsInterval(alarmTime); 
 
}; 
 
const attachChangeHandler =() => { 
 
    const hours = getElementArray('.set-hours > input[type="number"]'); 
 
    const minutes = getElementArray('.set-minutes > input[type="number"]'); 
 
    const inputs = hours.concat(minutes); 
 

 
    if (!inputs.length) { 
 
     setTimeout(attachChangeHandler, 50); // wait another 50ms and try again. 
 
    } else { 
 
     inputs.forEach((input) => { 
 
      input.addEventListener('change', changeHandler, false); 
 
     }); 
 
    } 
 
}; 
 
const attachClickHandler =() => { 
 
    const button = document.getElementById('cancel-alarm'); 
 

 
    if (!button) { 
 
     setTimeout(attachClickHandler, 50); // wait another 50ms and try again. 
 
    } else { 
 
     button.addEventListener('click', stopAlarm, false); 
 
    } 
 
}; 
 

 
//TODO: add function to Loop Alarm 
 

 
//TODO: add function to Reset 
 

 
attachChangeHandler(); 
 
attachClickHandler(); 
 
}());
.set-hours, .set-minutes { display: inline-block; }
<div id="set-alarm"> 
 
    <h2 class="set-alarm-header">Set Alarm</h2> 
 
    <label class="set-hours"> 
 
<p class="time-setting-hours">Hours</p> 
 
<input type="number" value="0" min="0"> 
 
    </label> 
 
    <label class="set-minutes"> 
 
<p class="time-setting-minutes">Minutes</p> 
 
<input type="number" value="0" min="0"> 
 
    </label> 
 
    <button id="cancel-alarm">Cancel Alarm</button> 
 
</div> 
 
<div> 
 
    <label id="time"></label> 
 
</div>

+0

Merci pour la réponse, mais pas tout à fait ce que J'essayais de faire –

+0

@ThomasHermansen mise à jour réponse. – pete