使用php向javascript时钟显示记录

时间：2018-01-24 18:43:16

标签： javascript php

我需要一个静态时钟。我有一个代码，下面显示数据库记录（小时，分钟，秒） 静态地动态地在时钟中。 我的问题是它只有第一个显示（小时，分钟，秒）的时钟。  当动态显示时，剩余的时钟显示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>

我还附上了截图

1 个答案:

答案 0 :(得分：-1)

尝试这种方式：

<?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>

相关问题
最新问题