Question

快速仅供参考：我正在学习。我有一些PHP经验，而在Java中则几乎没有。因为这个原因，我以前在职位上都被打倒了。所以再尝试一次。

我试图在单击按钮时启动一个24小时的计时器，并显示该计时器。在这24小时之后，它将更新数据库中的表。该按钮位于if语句中，这似乎使操作更加困难。

因此，当单击此按钮时，它将启动24小时计时器HH：MM：SS。我已经尝试了一些计时器脚本，但是不确定如何使用它们。同样，没有Java的实际经验。这是我发现的计时器脚本。

 <script> 
function Timer(duration, display) 
{
    var timer = duration, hours, minutes, seconds;
    setInterval(function () {
        hours = parseInt((timer /3600)%24, 10)
        minutes = parseInt((timer / 60)%60, 10)
        seconds = parseInt(timer % 60, 10);

                hours = hours < 10 ? "0" + hours : hours;
        minutes = minutes < 10 ? "0" + minutes : minutes;
        seconds = seconds < 10 ? "0" + seconds : seconds;

        display.text(hours +":"+minutes + ":" + seconds);

                --timer;
    }, 1000);
}

jQuery(function start($) 
{
    var twentyFourHours = 24 * 60 * 60;
    var display = $('#remainingTime');
    Timer(twentyFourHours, display);
});


 
 </script>

这是声明：

 <? if($provinces['nation_name'] == "") {
     '<center><button onclick="start()">Start Nation</button></center>';
          } 
?>

我认为我的问题是让它读取IF语句中的函数。我还没有在计时器后更新，只是尝试先使其工作。

Answer 1

我已经尝试模拟您在问题中提出的内容。我对原始代码进行了一些更改，以说明如何完成任务。对解决方案满意后，请确保进行适当的更改。

<!DOCTYPE html>
<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    </head>

    <body>
        <span id="remainingTime">Timer</span>

        <?PHP
            // Replace below if condition with your if condition.
            if(true) {
                echo("<button onclick='start()'>Start Nation</button>");
            }
        ?>

        <script>
            function Timer(duration, display) {
                let timer = duration, hours, minutes, seconds;

                let setIntervalId = setInterval(function () {
                    hours = parseInt((timer / 3600) % 24, 10)
                    minutes = parseInt((timer / 60) % 60, 10)
                    seconds = parseInt(timer % 60, 10);

                    hours = hours < 10 ? "0" + hours : hours;
                    minutes = minutes < 10 ? "0" + minutes : minutes;
                    seconds = seconds < 10 ? "0" + seconds : seconds;

                    display.text(hours + ":" + minutes + ":" + seconds);

                    --timer;
                    if (timer === -1) {
                        clearInterval(setIntervalId);
                        // Perform the necessary operation here like triggering event to update the database.
                    }
                }, 1000);
            }

            function start() {
                // For testing purpose set the value to 10 seconds.
                let twentyFourHours = 24 * 60 * 60;
                const display = $('#remainingTime');
                Timer(twentyFourHours, display);
            }
        </script>
    </body>
</html>

我已将此文件制成一个独立的文件，以便您可以独立运行它而不需要任何其他操作，并且不会与其他代码段的使用混淆。

您可以复制并粘贴上面的代码here进行测试并查看其工作情况。

我已经完成了两项重大更改：

将按钮放在PHP标记内的echo函数内。
已使用clearInterval。如果您不使用clearInterval，则计时器将继续减少，您将开始获得负值。您可以从here和here了解有关clearInterval的更多信息。建议您删除一次clearInterval并查看结果。

我希望这对您有用。

单击并显示codeigniter启动计时器

1 个答案: