Javascript 倒数计时器不适用于AJAX

我想用JS做一个计数器。到目前为止，我已经设法做到了，但我现在遇到了一个问题。虽然使用AJAX来检索倒数计时的时间，但我无法让它正常工作。这很奇怪，因为它适用于我的原始文件，但不适用于由AJAX调用的php文件

这很好：

我不知道是什么问题。这是HTML页面：

<button onclick="upgrade('meat_max')" id="up_meat_max">+</button>

这是upgrade.php中的代码（使用AJAX发送到此文件的变量不用于测试代码）：

时间：？
var小时=2；
var分钟=46；
第二个变量=45；
//制作计数器的函数
函数clockIt（）{
功能时钟（数字）{
如果（数字0）{
第二-=1；
}否则，如果（分钟>0）{
分钟-=1；
秒+=59；
}否则，如果（小时>0）{
小时-=1；
分钟+=59；
}
}
//每秒钟运行一次函数
clockIt（）；
setInterval（函数（）{clockIt（）}，1000）；

innerHTML不执行ajax加载的脚本，在您的情况下，我要做的是返回一个JSON编码的字符串，其中包含您需要的变量，并且在主脚本（已加载的脚本）上有一个函数使用提供的这个脚本，您已经准备好了函数，并且只通过ajax响应传递参数

您可以使用以下命令解码json字符串：

obj = JSON.parse(jsonString);

例如：

Ajax JSON响应字符串：

{"time": {"hour":2, "minute":46, "second": 45}, "html": "<div class=\"time\">Time: <span id=\"timer\"></span></div>"}

新功能

function startCountdown(hour, minute, second) {

    // function to make a counter
    function clockIt() {
      function clockO(digit) {
        if(digit<10) {
          return '0';
        } else {
          return '';
        }
     }

    document.getElementById('timer').textContent = hour + ':' +     clockO(minute) + minute + ':' + clockO(second) + second;
     if(second>0) {
        second -= 1;
     } else if(minute>0) {
       minute -= 1;
       second += 59;
     } else if(hour>0) {
       hour -= 1;
       minute += 59;
     }
 }

 // runs the function every seconds
 clockIt();
 setInterval(function (){clockIt()}, 1000);
}

功能启动计数（小时、分钟、秒）{
//制作计数器的函数
函数clockIt（）{
功能时钟（数字）{
如果（数字0）{
第二-=1；
}否则，如果（分钟>0）{
分钟-=1；
秒+=59；
}否则，如果（小时>0）{
小时-=1；
分钟+=59；
}
}
//每秒钟运行一次函数
clockIt（）；
setInterval（函数（）{clockIt（）}，1000）；
}

innerHTML不执行ajax加载的脚本，在您的情况下，我要做的是返回一个JSON编码的字符串，其中包含您需要的变量，并且在主脚本（已加载的脚本）上有一个函数使用提供的这个脚本，您已经准备好了函数，并且只通过ajax响应传递参数

您可以使用以下命令解码json字符串：

obj = JSON.parse(jsonString);

例如：

Ajax JSON响应字符串：

{"time": {"hour":2, "minute":46, "second": 45}, "html": "<div class=\"time\">Time: <span id=\"timer\"></span></div>"}

新功能

function startCountdown(hour, minute, second) {

    // function to make a counter
    function clockIt() {
      function clockO(digit) {
        if(digit<10) {
          return '0';
        } else {
          return '';
        }
     }

    document.getElementById('timer').textContent = hour + ':' +     clockO(minute) + minute + ':' + clockO(second) + second;
     if(second>0) {
        second -= 1;
     } else if(minute>0) {
       minute -= 1;
       second += 59;
     } else if(hour>0) {
       hour -= 1;
       minute += 59;
     }
 }

 // runs the function every seconds
 clockIt();
 setInterval(function (){clockIt()}, 1000);
}

功能启动计数（小时、分钟、秒）{
//制作计数器的函数
函数clockIt（）{
功能时钟（数字）{
如果（数字0）{
第二-=1；
}否则，如果（分钟>0）{
分钟-=1；
秒+=59；
}否则，如果（小时>0）{
小时-=1；
分钟+=59；
}
}
//每秒钟运行一次函数
clockIt（）；
setInterval（函数（）{clockIt（）}，1000）；
}

我的问题是倒计时计时器的方法。当你指定1000毫秒的间隔时，你不能指望它是1000毫秒。实际上，这是在1000毫秒过后计时器循环到达它的时候。在一段时间内，会有一些延迟。如果你想要ac，你想做什么curate timing（精确计时）是存储初始设置，然后测量从开始倒计时到当前时间的时间。请参阅下面的代码，该代码将计时器基于内部时钟而不是间隔计数器。一旦获得秒数，就可以轻松地将其除以3600 fo，将其转换为小时、分钟和秒r表示小时数，并对分和秒使用除法和模运算

看

测试XMLHttpRequest
var请求；
var按钮1；
变量显示1；
var显示2；
var显示3；
var启动；
var计数器；
函数第二（）{
display2.value=display2.value+“\r\nreadyState=“+request.readyState+”status=“+request.status+”\r\n”；；
if（request.readyState==4&&request.status==200）{
display1.value=display1.value+request.responseText+“\r\n”；
}
}
函数优先（）{
display2.value=display2.value+“\r\n”+
“起始页\r\n”；
请求=新的XMLHttpRequest（）；
request.onreadystatechange=second；
变量文件=”http://localhost:80/";
打开（'GET'，file，true）；
request.send（）；
设置间隔（定时，1000）；
}
函数启动器（）{
display1=document.getElementById（“display1”）；
display2=document.getElementById（“display2”）；
display3=document.getElementById（“display3”）；
button1=document.getElementById（“button1”）；
按钮1.onclick=第一个；
开始=新日期（）；
计数器=60；
}
函数计时（）{
var duration=（start.getTime（）-new Date（）.getTime（））/1000.0；
display3.value=（持续时间+计数器）.toFixed（0）；
}
window.onload=启动器；

计时器：

地位：

答复：

我的问题是倒计时计时器的方法。当你指定1000毫秒的间隔时，你不能指望它是1000毫秒。实际上，这是在1000毫秒过后计时器循环到达它的时候。在一段时间内，会有一些延迟。如果你想要ac，你想做什么curate timing（精确计时）是存储初始设置，然后测量从开始倒计时到当前时间的时间。请参阅下面的代码，该代码将计时器基于内部时钟而不是间隔计数器。一旦获得秒数，就可以轻松地将其除以3600 fo，将其转换为小时、分钟和秒r表示小时数，并对分和秒使用除法和模运算

看

测试XMLHttpRequest
var请求；
var按钮1；
变量显示1；
var显示2；
var显示3；
var启动；
var计数器；
函数第二（）{
display2.value=display2.value+“\r\nreadyState=“+re”
function upgrade(building) {
  var file = 'upgrade.php?building=' + building;
  ajax(file, function(response) {
    var obj = JSON.parse(response);
    var time = obj.time;
    document.getElementById('construction').innerHTML += obj.html;
    run_clockIt(time.hour, time.minute, time.second);
  })
}

// general AJAX launcher
function ajax(file, fn) {
  var xmlhttp = new XMLHttpRequest();
  xmlhttp.onreadystatechange = function() {
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
      fn(xmlhttp.responseText);
    }
  };
  xmlhttp.open('GET', file, true);
  xmlhttp.send();
}


// count down timer with adjustments to compensate delay
function clockIt(hour, minute, second, finished, nbOfLoop) {

  // every 5 seconds, run a delay correction
  if(nbOfLoop%5 == 0) {
    var actualTimeLeft = adjustClock(finished);
    minute = actualTimeLeft[0];
    second = actualTimeLeft[1];
  }
  nbOfLoop += 1;

  // add a string "0" if necessary
  function clockO(digit) {
    if(digit<10) {
      return '0';
    } else {
      return '';
    }
  }

  document.getElementById('timer').textContent = hour + ':' + clockO(minute) + minute + ':' + clockO(second) + second;

  // update displayed timer
  if(second>0) {
    second -= 1;
  } else if(minute>0) {
    minute -= 1;
    second += 59;
  } else if(hour>0) {
    hour -= 1;
    minute += 59;
  }

  // waits 1 sec before launching the next one
  setTimeout(function() {
    clockIt(hour, minute, second, finished, nbOfLoop);
  }, 1000);
}

// runs the function for the first time
function run_clockIt(hour, minute, second) {
  var finished = new Date();
  finished.setUTCHours(finished.getUTCHours() + hour);
  finished.setUTCMinutes(finished.getUTCMinutes() + minute);
  finished.setUTCSeconds(finished.getUTCSeconds() + second);

  clockIt(hour, minute, second, finished, 1);
}

function adjustClock(finished) {
  var now = new Date();
  var diff = new Date(Math.abs(now - finished));

  return [diff.getUTCMinutes(), diff.getUTCSeconds()];
}

<?php
header('Content-Type: application/json');

// retreive variables from AJAX call
$building = $_REQUEST['building'];

// processing variable with database...

// prepare JSON object
$jsonData = '
{
  "time":{"hour":2, "minute":46, "second": 45},
  "html": "<div class=\"time\">Time: <span id=\"timer\"></span></div>"
}
';

echo $jsonData;