最终目标：一个数字时钟，在换班期间将显示一个按钮 7 分钟，并在这 7 分钟内更改背景颜色。然后在第 7 分钟时将所有内容恢复到之前的设置。如果您单击该按钮，它将在名为“FileMaker Pro 19”的应用程序中执行一个脚本，然后隐藏该按钮。
问题：除了完全隐藏按钮之外，我完成了我想要的一切。它只会隐藏 1 秒，因为 displayClock() 函数是重放的。我需要一种方法让脚本知道按钮已被按下并将其隐藏至少 7 分钟。
代码：
"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>
"
如有任何帮助，我们将不胜感激。
我尝试过使用按下按钮时设置的变量。但由于我对 setTimeout 函数没有经验，所以要绕过这些函数总是很困难。
解决此问题的一种方法是获取按下按钮的时间，并将该值与当前时间进行比较。 Date.getTime() 是一个有用的函数，它将返回从固定日期过去的时间（以毫秒为单位）。因此，您可以将按下按钮时的 getTime() 与当前的 getTime() 进行比较。如果两次时间之差大于7分钟（420000毫秒），您就会知道已经过去了7分钟，并且可以再次显示该按钮。 这看起来像：
function clockOut() {
other code...
lastPress = digital.getTime()
}
然后您可以将其与当前时间进行比较，如下所示：
//check if 7 minutes has passed
if(digital.getTime()-lastPress>420000) {
show element again...
}