如何让我的 HTML 按钮隐藏起来，直到再次调用？我有一个带有按钮的时钟，单击时或在特定时间需要消失-解网

问：

最终目标：一个数字时钟，在换班期间显示一个按钮，持续 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 函数没有经验，因此要解决这些问题总是很困难。

JavaScript HTML 按钮时钟 FileMaker

解决此问题的一种方法是获取按下按钮的时间，并将该值与当前时间进行比较。 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...
}

如何让我的 HTML 按钮隐藏起来，直到再次调用？我有一个带有按钮的时钟，单击时或在特定时间需要消失

How can I get my HTML button to hide until called again? I have a clock with a button that needs to disappear when clicked or at a certain time

评论

评论