為每張卡片添加一個進度條

Question

我是 PHP 和 Javascript 的新手，我用 PHP 編寫了一些顯示在卡片上的計時器。 對於屏幕上的每張卡片，我需要添加一個計時器和一個進度條。 所以，我已經有了計時器和進度條

我正在尋找一種制作進度條的方法

我編寫了這樣的代碼

<progress class="timer1" value="0" max="100">
</progress> 
<script>
            var ar;
             $(document).ready(function(){
               var _sI=[];
               $.ii=function(){
                 ar=arguments;
                 if(ar.length==3){
                   if(_sI[ar[0]]==undefined){
                     _sI[ar[0]]={};
                     }else{
                       clearInterval(_sI[ar[0]].reg);
                       } _sI[ar[0]].fn=ar[2];
                       _sI[ar[0]].t=ar[1];
                       _sI[ar[0]].reg=setInterval(ar[2],ar[1]);
                       }else if(ar.length==1){
                         clearInterval(_sI[ar[0]].reg);
                         }}});
            $(document).ready(function () {
                  var value = localStorage.getItem("timer1_value") || 0;
                  $('.timer1').val(value);
                  $.ii('t1', 36000, function () {
                      var t1v = $('.timer1').val();
                      if (t1v < 100) {
                          $('.timer1').val(t1v + 1);
                          localStorage.setItem("timer1_value", t1v + 1)
                      } else {
                          localStorage.removeItem("timer1_value");
                          $.ii('t1');
                      }
                  });
              });
            </script>

是的，這對我有用，除了每個元素的進度條

我將所有行都放在查詢中，獲取的數據（MariaDB Mysql）類似於

$row[0] //ID
$row[1] //serial number
//bla bla bla

我知道我只需要每個元素的 ID，但我不知道如何將它放在我的代碼中......我在想這樣的事情

<progress class='<?= timer . $row[0] ?>'  value="0" max="100">
            </progress> 
            <script>
            var ar;
             $(document).ready(function(){
               var _sI=[];
               $.ii=function(){
                 ar=arguments;
                 if(ar.length==3){
                   if(_sI[ar[0]]==undefined){
                     _sI[ar[0]]={};
                     }else{
                       clearInterval(_sI[ar[0]].reg);
                       } _sI[ar[0]].fn=ar[2];
                       _sI[ar[0]].t=ar[1];
                       _sI[ar[0]].reg=setInterval(ar[2],ar[1]);
                       }else if(ar.length==1){
                         clearInterval(_sI[ar[0]].reg);
                         }}});
            $(document).ready(function () {
                  var value = localStorage.getItem("timer1_value") || 0;
                  $('<?= '.' . timer . $row[0] ?>').val(value);
                  $.ii('<?= t . $row[0] ?>', 36000, function () {
                      var t1v = $('<?= '.' . timer . $row[0] ?>').val();
                      if (t1v < 100) {
                          $('<?= '.' . timer . $row[0] ?>').val(t1v + 1);
                          localStorage.setItem('<?= timer . $row[0] . '_value'?>', t1v + 1)
                      } else {
                          localStorage.removeItem('<?= timer . $row[0] . '_value'?>');
                          $.ii('<?= t . $row[0] ?>');
                      }
                  });
              });
            </script>

但這對條形圖並不滿意，所有條形圖都顯示在相同的 var 值上

我不知道我能做什么 D:

Answer 1

好吧，我在這里看到了問題

在我的第 21 行上，我像var value = localStorage.getItem('<?= timer . $row[0] . '_value'?>') || 0; var value = localStorage.getItem('<?= timer . $row[0] . '_value'?>') || 0;

謝謝@Chris 我會接受推薦，謝謝<3