使用 php 将记录显示到 JavaScript 时钟

我需要有一个静态时钟。我有一个代码，下面显示数据库记录(小时，分钟，秒(静态地在时钟中动态。我的问题是它只显示第一个时钟(小时、分钟、秒(。时钟的其余部分在动态显示时显示 00：00：00。我认为问题出在呈现时钟数据的 Javascript id 上。

有人可以帮我吗？下面是代码

<?php
require('db[enter image description here][1].php');
/*
create table info_timing(id int primary key auto_increment, time_hour varchar(100),time_minute varchar(100),
time_seconds varchar(100), informatia varchar(100));
insert into info_timing(time_hour,time_minute,time_seconds,informatia)values('04','30','57','My First Data');
insert into info_timing(time_hour,time_minute,time_seconds,informatia)values('06','20','01','My Second Data');
insert into info_timing(time_hour,time_minute,time_seconds,informatia)values('07','45','36','My Third Data');
*/

$data = $db->prepare("SELECT * FROM info_timing order by id desc");
        $data->execute(array());

while ($row = $data->fetch()) 
{
$id =  htmlentities($row['id'], ENT_QUOTES, "UTF-8");
$th =  htmlentities($row['time_hour'], ENT_QUOTES, "UTF-8"); 
$tm =  htmlentities($row['time_minute'], ENT_QUOTES, "UTF-8");
$ts =  htmlentities($row['time_seconds'], ENT_QUOTES, "UTF-8");
$info =  htmlentities($row['informatia'], ENT_QUOTES, "UTF-8");
//}
?>
<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <script>
function clock(){
    //calculate angle
    var d, h, m, s;
    d = new Date;
/*
h1 = 15;
h2 = 22;
h3 = 11;
*/

h1 = '<?php echo $th; ?>';
h2 = '<?php echo $tm; ?>';
h3 = '<?php echo $ts; ?>';

h = 30 * ((h1 % 12) );
    m = 6 * h2;
    s = 6 * h3;

    //move hands
    setAttr('h-hand', h);
    setAttr('m-hand', m);
    setAttr('s-hand', s);
    setAttr('s-tail', s+180);
    //display time
    h = h1;
    m = h2;
    s = h3;

    if(h >= 12){
        setText('suffix', 'PM');
    }else{
        setText('suffix', 'AM');
    }
    if(h != 12){
        h %= 12;
    }
    setText('sec', s);
    setText('min', m);
    setText('hr', h);
    //call every second
    setTimeout(clock, 1000);
};
function setAttr(id,val){
    var v = 'rotate(' + val + ', 70, 70)';
    document.getElementById(id).setAttribute('transform', v);
};
function setText(id,val){
    if(val < 10){
        val = '0' + val;
    }
    document.getElementById(id).innerHTML = val;
};
window.onload=clock;

</script>
<style>
*{
    margin:0;
    padding:0;
    font-family:sans-serif;
    font-size:14px;
}
.analog-clock{
    width:140px;
    height:140px;
}
#clock-face{
    stroke:black;
    stroke-width:2px;
    fill:white;
}
#h-hand, #m-hand, #s-hand, #s-tail{
    stroke:black;
    stroke-linecap:round;
}
#h-hand{
    stroke-width:3px;
}
#m-hand{
    stroke-width:2px;
}
#s-hand{
    stroke-width:1px;
}
.time-text{
    text-align:center;
}
</style>
        <link type="text/css" rel="stylesheet" href="style.css">
    </head>
    <body>
<b>Id:</b> <?php echo $id; ?><br>
<b>Information:</b> <?php echo $info; ?><br>
<b>Hours:</b> <?php echo $th; ?><br>
<b>Minutes:</b> <?php echo $tm; ?><br>
<b>Seconds:</b> <?php echo $ts; ?><br>
        <div class="analog-clock">
            <svg width="140" height="140">
                <circle id="clock-face" cx="70" cy="70" r="65" />
                <line id="h-hand" x1="70" y1="70" x2="70" y2="38" />
                <line id="m-hand" x1="70" y1="70" x2="70" y2="20" />
                <line id="s-hand" x1="70" y1="70" x2="70" y2="12" />
                <line id="s-tail" x1="70" y1="70" x2="70" y2="56" />
                <text x="62" y="18">12</text>
                <text x="126" y="76">3</text>
                <text x="66" y="130">6</text>
                <text x="7" y="76">9</text>
            </svg>
            <div class="time-text">
                <span id="hr">00</span>
                <span>:</span>
                <span id="min">00</span>
                <span>:</span>
                <span id="sec">00</span>
                <span id="suffix">--</span>
            </div>
        </div>
<br><br>
<?php
}
?>
    </body>
</html>

我还附上了截图

试试这个方式：

<?php require('db[enter image description here][1].php');
/* create table info_timing(id int primary key auto_increment, time_hour varchar(100),time_minute varchar(100), time_seconds varchar(100), informatia varchar(100));
insert into info_timing(time_hour,time_minute,time_seconds,informatia)values('04','30','57','My First Data'); insert into info_timing(time_hour,time_minute,time_seconds,informatia)values('06','20','01','My Second Data'); insert into info_timing(time_hour,time_minute,time_seconds,informatia)values('07','45','36','My Third Data');
*/

$data = $db->prepare("SELECT * FROM info_timing order by id desc");
        $data->execute(array());

while ($row = $data->fetch())  { $id =  htmlentities($row['id'], ENT_QUOTES, "UTF-8"); $th =  htmlentities($row['time_hour'], ENT_QUOTES, "UTF-8");  $tm =  htmlentities($row['time_minute'], ENT_QUOTES, "UTF-8"); $ts =  htmlentities($row['time_seconds'], ENT_QUOTES, "UTF-8"); $info =  htmlentities($row['informatia'], ENT_QUOTES, "UTF-8"); //} ?> <!DOCTYPE html> <html>
    <head>
        <title></title>
        <script>
      $(window).on('load', function(){
            clock();
        });

</script>
<style>
*{
    margin:0;
    padding:0;
    font-family:sans-serif;
    font-size:14px; }
.analog-clock{
    width:140px;
    height:140px; }
#clock-face{
    stroke:black;
    stroke-width:2px;
    fill:white; }
#h-hand, #m-hand, #s-hand, #s-tail{
    stroke:black;
    stroke-linecap:round; }
#h-hand{
    stroke-width:3px; }
#m-hand{
    stroke-width:2px; }
#s-hand{
    stroke-width:1px; }
.time-text{
    text-align:center; } </style>
        <link type="text/css" rel="stylesheet" href="style.css">
    </head>
    <body> <b>Id:</b> <?php echo $id; ?><br> <b>Information:</b> <?php echo $info; ?><br> <b>Hours:</b> <?php echo $th; ?><br> <b>Minutes:</b> <?php echo $tm; ?><br> <b>Seconds:</b> <?php echo $ts; ?><br>
        <div class="analog-clock">
            <svg width="140" height="140">
                <circle id="clock-face" cx="70" cy="70" r="65" />
                <line id="h-hand" x1="70" y1="70" x2="70" y2="38" />
                <line id="m-hand" x1="70" y1="70" x2="70" y2="20" />
                <line id="s-hand" x1="70" y1="70" x2="70" y2="12" />
                <line id="s-tail" x1="70" y1="70" x2="70" y2="56" />
                <text x="62" y="18">12</text>
                <text x="126" y="76">3</text>
                <text x="66" y="130">6</text>
                <text x="7" y="76">9</text>
            </svg>
            <div class="time-text">
                <span id="hr">00</span>
                <span>:</span>
                <span id="min">00</span>
                <span>:</span>
                <span id="sec">00</span>
                <span id="suffix">--</span>
            </div>
        </div> <br><br>
<?php } ?>
    </body>
<script>
         function clock(){
    //calculate angle
    var d, h, m, s;
    d = new Date;
/* h1 = 15; h2 = 22; h3 = 11;
*/

h1 = '<?php echo $th; ?>'; h2 = '<?php echo $tm; ?>'; h3 = '<?php echo $ts; ?>';

h = 30 * ((h1 % 12) );
    m = 6 * h2;
    s = 6 * h3;

    //move hands
    setAttr('h-hand', h);
    setAttr('m-hand', m);
    setAttr('s-hand', s);
    setAttr('s-tail', s+180);
    //display time
    h = h1;
    m = h2;
    s = h3;

    if(h >= 12){
        setText('suffix', 'PM');
    }else{
        setText('suffix', 'AM');
    }
    if(h != 12){
        h %= 12;
    }
    setText('sec', s);
    setText('min', m);
    setText('hr', h);
    //call every second
    setTimeout(clock, 1000);
};
function setAttr(id,val){
    var v = 'rotate(' + val + ', 70, 70)';
    document.getElementById(id).setAttribute('transform', v); };
function setText(id,val){
    if(val < 10){
        val = '0' + val;
    }
    document.getElementById(id).innerHTML = val; };
</script>

相关内容

最新更新

热门标签：