javascript倒计时无法正常工作_Javascript_Php

javascript倒计时无法正常工作

javascript php

javascript倒计时无法正常工作,javascript,php,Javascript,Php,我是javascript新手。我正试图编写一个javascript倒计时函数，但当我将一个php变量传递给“var now=new Date（“”；“”时，该函数不起作用。当我只使用“var now=new Date（）；” 先谢谢你。这是我的密码 <?php $db = new mysqli("localhost", "root", "", "ajax"); $db -> set_charset("utf8"); $query="SELECT * FROM data WHERE i

我是javascript新手。我正试图编写一个javascript倒计时函数，但当我将一个php变量传递给

“var now=new Date（“”；“

”时，该函数不起作用。当我只使用

“var now=new Date（）；”

先谢谢你。这是我的密码

<?php
$db = new mysqli("localhost", "root", "", "ajax");
$db -> set_charset("utf8");
$query="SELECT * FROM data WHERE id=2";
$data=$db->query($query);
while ($dt=$data->fetch_assoc()) {
$start=$dt['start_time'];
$end=$dt['end_time'];
}


?>

<!DOCTYPE html>
<html>
 <head>
  <title> Countdown</title>
<style type="text/css">
 body {
    background: #f6f6f6;
 }

.countdownContainer{
  position: absolute;;
  top: 50%;
  left: 50%;
  transform : translateX(-50%) translateY(-50%);
  text-align: center;
  background: #ddd;
  border: 1px solid #999;
  padding: 10px;
  box-shadow: 0 0 5px 3px #ccc;
}

 .info {
  font-size: 80px;
 }
  </style>
  </head>
  <body>
  <table class="countdownContainer">
  <tr class="info">
    <td colspan="4">c   Countdown   c</td>
  </tr>
  <tr class="info">
    <td id="days">120</td>
    <td id="hours">4</td>
    <td id="minutes">12</td>
    <td id="seconds">22</td>
   </tr>
   <tr>
    <td>Days</td>
    <td>Hours</td>
    <td>Minutes</td>
    <td>Seconds</td>
    <td id="start_date"><?php echo $start;?></td>
    <td id="php_date_time"></td>
  </tr>
 </table>
  <script type="text/javascript">

  function countdown(){


    var now = new Date("<?php echo $start;?>");
    var eventDate = new Date("<?php echo $end;?>");
   // alert(now);
    var currentTiime = now.getTime();
    var eventTime = eventDate.getTime();

    var remTime = eventTime - currentTiime;

    var s = Math.floor(remTime / 1000);
    var m = Math.floor(s / 60);
    var h = Math.floor(m / 60);
    var d = Math.floor(h / 24);

    h %= 24;
    m %= 60;
    s %= 60;

    h = (h < 10) ? "0" + h : h;
    m = (m < 10) ? "0" + m : m;
    s = (s < 10) ? "0" + s : s;

    document.getElementById("days").textContent = d;
    document.getElementById("days").innerText = d;

    document.getElementById("hours").textContent = h;
    document.getElementById("minutes").textContent = m;
    document.getElementById("seconds").textContent = s;

    setTimeout(countdown, 1000);
  }

  countdown();
</script>


倒计时
身体{
背景：#f6f6f6；
}
.倒计时容器{
职位：绝对职位；；
最高：50%；
左：50%；
转化：translateX（-50%）translateY（-50%）；
文本对齐：居中；
背景：ddd；
边框：1px实心#999；
填充：10px；
盒影：0 0 5px 3px#ccc；
}
.info{
字号：80px；
}
倒计时
120
4.
12
22
天
小时
会议记录
秒
函数倒计时（）{
var now=新日期（“”）；
var eventDate=新日期（“”）；
//警惕（现在）；
var currenttime=now.getTime（）；
var eventTime=eventDate.getTime（）；
var remTime=eventTime-currenttime；
var s=数学下限（remTime/1000）；
var m=数学楼层（s/60）；
var h=数学楼层（m/60）；
var d=数学楼层（h/24）；
h%=24；
m%=60；
s%=60；
h=（h<10）-“0”+h:h；
m=（m<10）-“0”+m:m；
s=（s<10）？“0”+s:s；
document.getElementById（“天”）.textContent=d；
document.getElementById（“天”）.innerText=d；
document.getElementById（“小时”）.textContent=h；
document.getElementById（“分钟”）.textContent=m；
document.getElementById（“秒”）.textContent=s；
设置超时（倒计时，1000）；
}
倒计时（）；

您的PHP仅在页面刷新时更新，因此每次调用倒计时函数时，其值都完全相同：

function countdown(){
    var now = new Date("<?php echo $start;?>");   <--- this never changes
    var eventDate = new Date("<?php echo $end;?>"); <--- this never changes
    var currentTiime = now.getTime(); <--- this result is always the same
    var eventTime = eventDate.getTime(); <--- so is this one

    var remTime = eventTime - currentTiime; < --- obviously this one too

函数倒计时（）{
var now=new Date（“”）；基本上java脚本是在客户端运行的，php就像您所知道的服务器端一样，因此javascript无法看到php，这就是它不工作的原因，您可以通过将php变量传递到html（输入）来解决此问题，隐藏类型，如下所示，将php变量传递给html标记，现在javascript可以读取它们。@Laith我按照您的建议做了，但现在不是倒计时：）.mhm，让我再检查一下这行给了您值吗？