Problem:
Endgoal: A digital clock that will display a button during a shift change for 7 minutes and changes the background color for that 7 minutes. Then at the 7 minute mark turns every thing back to the previous settings. And if you were to click the button it would perform a script in the application called “FileMaker Pro 19” and then hide the button.
Issue: I accomplished everything I wanted except the ability to have the button hide fully. It will hide for 1 second only because the displayClock() function is replay. I need a way for the script to know that the button has been pressed and will hide it for at least 7 minutes.
Code:
"data:text/html,
<meta name='viewport' content='initial-scale=1, maximum-scale=1, user-scalable=no, shrink-to-fit=no' />
<html>
<head>
<script language='javascript' type='text/javascript'>
function displayClock() {
var digital = new Date();
var hours = digital.getHours();
var minutes = digital.getMinutes();
var seconds = digital.getSeconds();
document.getElementById('clockOutButton').style.display = 'none';
// Check if it is a weekday
var isWeekday = (dayOfWeek !== 0 || dayOfWeek !== 6);
// Get the current day of the week
var dayOfWeek = digital.getDay();
// Change the background color based on the time and day of the week
if (isWeekday && hours == 14 && minutes >= 0 && minutes < 7) {
document.body.style.backgroundColor = 'limegreen';
document.body.style.color = 'black';
document.getElementById('clockOutButton').style.display = 'block';
} else if (isWeekday && hours == 14 && minutes > 6) {
document.body.style.backgroundColor = 'white';
document.body.style.color = 'black';
document.getElementById('clockOutButton').style.display = 'none';
} else if (isWeekday && hours == 22 && minutes >= 0 && minutes < 7) {
document.body.style.backgroundColor = 'limegreen';
document.body.style.color = 'black';
document.getElementById('clockOutButton').style.display = 'block';
} else if (isWeekday && hours == 22 && minutes > 6) {
document.body.style.backgroundColor = 'white';
document.body.style.color = 'black';
document.getElementById('clockOutButton').style.display = 'none';
} else if (isWeekday && hours == 6 && minutes >= 0 && minutes < 7) {
document.body.style.backgroundColor = 'limegreen';
document.body.style.color = 'black';
document.getElementById('clockOutButton').style.display = 'block';
} else if (isWeekday && hours == 6 && minutes > 6) {
document.body.style.backgroundColor = 'white';
document.body.style.color = 'black';
document.getElementById('clockOutButton').style.display = 'none';
}
// Check if it is the weekend
var isWeekend = (dayOfWeek == 0 || dayOfWeek == 6);
// Change the background color based on the time and day of the week
if (isWeekend && hours == 5 && minutes >= 0 && minutes < 7) {
document.body.style.backgroundColor = 'limegreen';
document.body.style.color = 'black';
document.getElementById('clockOutButton').style.display = 'block';
} else if (isWeekend && hours == 5 && minutes > 6) {
document.body.style.backgroundColor = 'white';
document.body.style.color = 'black';
document.getElementById('clockOutButton').style.display = 'none';
} else if (isWeekend && hours == 11 && minutes >= 0 && minutes < 7) {
document.body.style.backgroundColor = 'limegreen';
document.body.style.color = 'black';
document.getElementById('clockOutButton').style.display = 'block';
} else if (isWeekend && hours == 11 && minutes > 6) {
document.body.style.backgroundColor = 'white';
document.body.style.color = 'black';
document.getElementById('clockOutButton').style.display = 'none';
} else if (isWeekend && hours == 17 && minutes >= 0 && minutes < 7) {
document.body.style.backgroundColor = 'limegreen';
document.body.style.color = 'black';
document.getElementById('clockOutButton').style.display = 'block';
} else if (isWeekend && hours == 17 && minutes > 6) {
document.body.style.backgroundColor = 'white';
document.body.style.color = 'black';
document.getElementById('clockOutButton').style.display = 'none';
}
// Display the current time
if (hours > 12) hours = hours - 12;
if (hours == 0) hours = 12;
if (minutes <= 9) minutes = '0' + minutes;
if (seconds <= 9) seconds = '0' + seconds;
dispTime = '<b>' + hours + ':' + minutes + ':' + seconds + '</b>';
document.getElementById('time').innerHTML = dispTime;
// Call the function again after 1 second
setTimeout('displayClock()', 1000);
}
function clockOut() {
// Perform the FileMaker Script called 'Test230'
FileMaker.PerformScript('Test230');
document.getElementById('clockOutButton').style.display = 'none';
}
</script>
</head>
<body style='font-size:192;font-family:Arial;text-align:center; padding:0' onload='displayClock()'>
<div id='time'></div>
<p1 style='font-size:40;'></p1>
<button id='clockOutButton'
style='font-size: 20px; color: white; background-color: #B52025; padding: 10px 20px; border-radius: 5px;'
onclick='clockOut()'>Clock Out</button>
</body>
</html>
"
Any help is appreciated.
I have tried using variables that get set when pressing the button. But being as I am not experienced with setTimeout functions it was always a struggle to get around those.
Solution:
One way that you could fix this issue is by getting the time that the button is pressed, and comparing that value to the current time.
Date.getTime() is a useful fuction that will return the time in miliseconds that have passed from a fixed date. Therefore, you can compare the getTime() from when the button was pressed to the current getTime(). If the difference between the two times is greater than 7 minutes(420000 miliseconds), you will know that 7 minutes have passed, and can show the button again.
This would look something like:
function clockOut() {
other code...
lastPress = digital.getTime()
}
You could then compare it to the current time, which would look something like:
//check if 7 minutes has passed
if(digital.getTime()-lastPress>420000) {
show element again...
}
![Pass multiple variables to document.querySelectorAll in JS [duplicate]](https://rocoderes.com/wp-content/uploads/2024/02/77303331-150x150.png.webp)
