如何让HTML按钮触发后隐藏至少7分钟？时钟功能问题求助

问题描述 #

需要实现一个数字时钟，满足以下需求：

• 在指定换班时段（工作日14/22/6点、周末5/11/17点的前7分钟）显示"Clock Out"按钮，同时页面背景色设为limegreen，7分钟后恢复初始样式
• 点击按钮时执行FileMaker Pro 19中的Test230脚本，并隐藏该按钮

当前问题：按钮点击后仅能隐藏1秒，因为displayClock()函数每秒重绘页面，会重新将按钮设置为显示状态，需要让按钮在点击后至少隐藏7分钟。

解决方案 #

通过添加全局状态变量标记按钮是否被点击，结合setTimeout在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'>
        // 全局变量标记按钮是否被点击
        let isButtonClicked = false;

        function displayClock() {
            var digital = new Date();
            var hours = digital.getHours();
            var minutes = digital.getMinutes();
            var seconds = digital.getSeconds();
            document.getElementById('clockOutButton').style.display = 'none';

            // 先获取当前星期，再判断工作日/周末
            var dayOfWeek = digital.getDay();
            var isWeekday = (dayOfWeek !== 0 && dayOfWeek !== 6);
            var isWeekend = (dayOfWeek === 0 || dayOfWeek === 6);

            // 工作日时段判断，仅当按钮未被点击时显示
            if (isWeekday && hours === 14 && minutes >= 0 && minutes < 7 && !isButtonClicked) {
                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';
            } else if (isWeekday && hours === 22 && minutes >= 0 && minutes < 7 && !isButtonClicked) {
                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';
            } else if (isWeekday && hours === 6 && minutes >= 0 && minutes < 7 && !isButtonClicked) {
                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';
            }

            // 周末时段判断，仅当按钮未被点击时显示
            if (isWeekend && hours === 5 && minutes >= 0 && minutes < 7 && !isButtonClicked) {
                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';
            } else if (isWeekend && hours === 11 && minutes >= 0 && minutes < 7 && !isButtonClicked) {
                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';
            } else if (isWeekend && hours === 17 && minutes >= 0 && minutes < 7 && !isButtonClicked) {
                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';
            }

            // 显示当前时间
            let displayHours = hours > 12 ? hours - 12 : (hours === 0 ? 12 : hours);
            let displayMinutes = minutes <= 9 ? '0' + minutes : minutes;
            let displaySeconds = seconds <= 9 ? '0' + seconds : seconds;
            let dispTime = `<b>${displayHours}:${displayMinutes}:${displaySeconds}</b>`;
            document.getElementById('time').innerHTML = dispTime;

            // 改用函数引用调用，避免字符串解析的作用域问题
            setTimeout(displayClock, 1000);
        }

        function clockOut() {
            // 执行FileMaker脚本
            FileMaker.PerformScript('Test230');
            // 隐藏按钮并标记已点击
            document.getElementById('clockOutButton').style.display = 'none';
            isButtonClicked = true;
            // 7分钟后重置状态（7*60*1000=420000毫秒）
            setTimeout(() => {
                isButtonClicked = false;
            }, 420000);
        }
    </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>

关键修改点 #

1. 添加状态标记：新增全局变量isButtonClicked，用于记录按钮是否被点击
2. 修复星期判断顺序：将dayOfWeek的获取移到isWeekday和isWeekend判断之前，避免未定义错误
3. 状态控制显示：在所有显示按钮的条件中增加&& !isButtonClicked，确保按钮被点击后不再显示
4. 延迟重置状态：在clockOut()中通过setTimeout在7分钟后将isButtonClicked重置为false，恢复按钮显示逻辑
5. 优化定时器调用：将setTimeout('displayClock()', 1000)改为setTimeout(displayClock, 1000)，使用函数引用替代字符串，提升性能并避免作用域问题

内容的提问来源于stack exchange，提问作者Jonathan3Z