Question

我找到了以下用于简单倒计时计时器的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">
????

Answer 1

我知道了。功能保持不变。

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>

如何创建带有9个计时器的网页？

1 个答案: