为什么Jquery在使用设置分钟功能设置时间后显示当前系统时间

Why Jquery displays current system time after setting time using set minutes function?

本文关键字：时间 设置 显示 系统 分钟 Jquery 为什么 功能      更新时间：2023-09-26

http://127.0.0.1/readytoupload/time.php?time

｛"小时"："06"，"分钟"："19"，"秒"："22"｝

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
var ser_hours, ser_minutes, ser_seconds;

日期对象

var ser_date = new Date();

更新时间函数

function updateClock ( )
    {
    //var currentTime = new Date ( );
    var currentHours = ser_date.getHours ( );
    var currentMinutes = ser_date.getMinutes ( );
    var currentSeconds = ser_date.getSeconds ( );
    // Pad the minutes and seconds with leading zeros, if required
    currentMinutes = ( currentMinutes < 10 ? "0" : "" ) + currentMinutes;
    currentSeconds = ( currentSeconds < 10 ? "0" : "" ) + currentSeconds;
    // Choose either "AM" or "PM" as appropriate
    var timeOfDay = ( currentHours < 12 ) ? "AM" : "PM";
    // Convert the hours component to 12-hour format if needed
    currentHours = ( currentHours > 12 ) ? currentHours - 12 : currentHours;
    // Convert an hours component of "0" to "12"
    currentHours = ( currentHours == 0 ) ? 12 : currentHours;
    // Compose the string for display
    var currentTimeString = currentHours + ":" + currentMinutes + ":" + currentSeconds + " " + timeOfDay;

    $("#clock").html(currentTimeString);
 }

从服务器获取时间

function getClock_server ()
{
    var ser_date = new Date();
    //ser_hours = d.hours; ser_minutes = d.minutes, ser_seconds = d.seconds
    $.get('http://127.0.0.1/readytoupload/time.php?time', function (d) { ser_date.setMinutes(d.minutes); ser_date.setSeconds(d.seconds); ser_date.setHours(d.hours);});
}
$(document).ready(function()
{
    getClock_server();
   setInterval('updateClock()', 1000);
});
</script>
<head>
<body>

时间显示部分

<div id="clock"></div>
</body>
</html>

第一个问题是将ser_date作为getClock_server中的局部变量，而需要更新全局变量。

此外，为了更新时间，我认为您需要获得当前时间和发出服务器请求的时间之间的差异

var systime, ser_date;
function updateClock() {
  var time = new Date(ser_date + new Date().getTime() - systime)
    //var currentTime = new Date ( );
  var currentHours = time.getHours();
  var currentMinutes = time.getMinutes();
  var currentSeconds = time.getSeconds();
  // Pad the minutes and seconds with leading zeros, if required
  currentMinutes = (currentMinutes < 10 ? "0" : "") + currentMinutes;
  currentSeconds = (currentSeconds < 10 ? "0" : "") + currentSeconds;
  // Choose either "AM" or "PM" as appropriate
  var timeOfDay = (currentHours < 12) ? "AM" : "PM";
  // Convert the hours component to 12-hour format if needed
  currentHours = (currentHours > 12) ? currentHours - 12 : currentHours;
  // Convert an hours component of "0" to "12"
  currentHours = (currentHours == 0) ? 12 : currentHours;
  // Compose the string for display
  var currentTimeString = currentHours + ":" + currentMinutes + ":" + currentSeconds + " " + timeOfDay;
  $("#clock").html(currentTimeString);
}
function getClock_server() {
  // $.get('http://127.0.0.1/readytoupload/time.php?time', function(d) {
  setTimeout(function() { //the timeout is used to simulate a ajax like async call
    var d = {
      hours: 10,
      minutes: 0,
      seconds: 25
    }
    var tmp = new Date();
    tmp.setMinutes(d.minutes);
    tmp.setSeconds(d.seconds);
    tmp.setHours(d.hours);
    ser_date = tmp.getTime();
    systime = new Date().getTime();
    updateClock();
    setInterval(updateClock, 1000);
  });
}
$(document).ready(function() {
  getClock_server();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<div id="clock"></div>

相关文章：