时间戳

首页 > 解决方案 > 如何创建一个有 9 个计时器的网页？

javascript - 如何创建一个有 9 个计时器的网页？

问题描述

我找到了以下用于简单倒数计时器的 javascript 代码，但我需要根据文件 /run/Aquarium/Active.run 中的值在页面上显示 9 个计时器。该文件包含 10 个整数，范围从 0 到 7200，以空格分隔。最后 9 个值中的每一个都表示每个计时器应该倒计时到零的秒数。

我对 javascript 的了解还不够，无法将其扩展为 9 计时器功能。

这是我已经拥有的：

div.Main {
    position: fixed;
    top: 26;
    left: 180;
    width: 300px;
    font: bold 24px Arial;
    color: black;
}
div.Relay1 {
    position: fixed;
    top: 120;
    left: 60;
    width: 300px;
    font: bold 24px Arial;
    color: black;
}
div.Relay2 {
    position: fixed;
    top: 150;
    left: 60;
    width: 300px;
    font: bold 24px Arial;
    color: black;
}
...
div.Relay8 {
    position: fixed;
    top: 330;
    left: 60;
    width: 300px;
    font: bold 24px Arial;
    color: black;
}
</style>
<script type="text/javascript">
function startTimer(duration, display) {
    var timer = duration, minutes, seconds;
    setInterval(function () {
        minutes = parseInt(timer / 60, 10);
        seconds = parseInt(timer % 60, 10);

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

        display.textContent = minutes + ":" + seconds;

        if (--timer < 0) {
            timer = duration;
        }
    }, 1000);
}

window.onload = function () {
        display = document.querySelector('#time');
    startTimer(TMinutes, display);
};
</script>
</HEAD>
<BODY style="background-color:#00EE66">
<h1>Aquarium Equipment Status</h1>

<?php
$file = fopen("/run/Aquarium/Active.run","r");
$Times = fgetcsv($file,64,' ');
fclose($file);
?>

<div class="Main"><script type="text/javascript">
var TMinutes = 0
TMinutes = <?php echo $Times[1] ?>;
</script>
<span id="time">000:00</span></div>

<div class="Relay1"><script type="text/javascript">
????

标签： javascriptphphtml

解决方案

我想到了。功能保持不变。

window.onload = function () {
    display = document.querySelector('#timeM');
    startTimer(TMinutesM, display);
    display = document.querySelector('#time1');
    startTimer(TMinutes1, display);
    display = document.querySelector('#time2');
    startTimer(TMinutes2, display);
    display = document.querySelector('#time3');
    startTimer(TMinutes3, display);
    display = document.querySelector('#time4');
    startTimer(TMinutes4, display);
    display = document.querySelector('#time5');
    startTimer(TMinutes5, display);
    display = document.querySelector('#time6');
    startTimer(TMinutes6, display);
    display = document.querySelector('#time7');
    startTimer(TMinutes7, display);
    display = document.querySelector('#time8');
    startTimer(TMinutes8, display);
};
</script>
</HEAD>
<BODY style="background-color:#00EE66">
<h1>Aquarium Equipment Status</h1>

<?php
$file = fopen("/run/Aquarium/Active.run","r");
$Times = fgetcsv($file,64,' ');
fclose($file);
?>
<script type="text/javascript">
var TMinutesM = <?php echo $Times[1] ?>;
var TMinutes1 = <?php echo $Times[2] ?>;
var TMinutes2 = <?php echo $Times[3] ?>;
var TMinutes3 = <?php echo $Times[4] ?>;
var TMinutes4 = <?php echo $Times[5] ?>;
var TMinutes5 = <?php echo $Times[6] ?>;
var TMinutes6 = <?php echo $Times[7] ?>;
var TMinutes7 = <?php echo $Times[8] ?>;
var TMinutes8 = <?php echo $Times[9] ?>;
</script>

<p>
<div class="Main"><span id="timeM">000:00</span></div>
<div class="Relay1"><span id="time1">000:00</span></div>
<div class="Relay2"><span id="time2">000:00</span></div>
<div class="Relay3"><span id="time3">000:00</span></div>
<div class="Relay4"><span id="time4">000:00</span></div>
<div class="Relay5"><span id="time5">000:00</span></div>
<div class="Relay6"><span id="time6">000:00</span></div>
<div class="Relay7"><span id="time7">000:00</span></div>
<div class="Relay8"><span id="time8">000:00</span></div>
</p>
</BODY>

推荐阅读