Question

我的代码如下 -

<div class="huge">
<?php echo date ("g:i:s A"); ?>
</div>

如何设置<div class="huge">每秒刷新一次？

Answer 1

假设您需要从服务器获取更新（请注意原始帖子中的PHP代码），您需要实现两件事：

客户端请求新数据的服务器端脚本（在本例中用PHP编写）。
客户端javascript，用于从服务器获取新数据并更新div。

让我们举个例子。

<强>的index.php

 <html>
    <head>
        <title>My date updater</title>
        <script type="text/javascript" src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
    </head>
    <body>
        <div class="huge"><?php echo date ("g:i:s A"); ?></div>
    </body>
 </html>

Javascript（使用jQuery）

setInterval(function(){
   $.ajax({
        url:'loadData.php'
   }).done(
        function(data){
            $('.huge').html(data);
   });
},1000);

<强> loadData.php

<?php echo date ("g:i:s A"); ?>

最初，在此示例 index.php 中命名的页面将加载并显示初始日期（使用内联的一些PHP代码）。

然后javascript将开始每秒从服务器获取数据（使用ajax请求到 loadData.php ），div将使用新数据进行更新。

希望它有所帮助！

PS：日期和时间信息也可以在客户端使用纯JavaScript代码获取，但对于某些应用程序，客户端的日期和时间信息不够可靠，因为它依赖于日期和客户端浏览器设置的时间设置。

Answer 2

您可以使用Ajax，如下所示：

如果它只是简单的文本，或者加载了简单的HTML，那么你可以使用

setInterval(function(){
    $("#huge").load("now_playing.php");
    ...
}, 5000);

您还可以使用以下内容：

function reload() { 

jQuery.ajax({
    url: "fetch_message.php",
    type: "POST",
    success:function(data){
        $('#huge').innerHTML(data);
        setTimeout(function(){
            reload()
        }, 1000);
    }
});

Answer 3

这将每秒更新id =“huge”的元素的内容。你不需要任何初始的PHP值。如果你需要其他元素，比如分钟和秒，你可以在字符串中添加dt.getMinutes（）和dt.getHours（）。

<div id="huge"></div>

<script language="javascript">
function refreshSomething(){
var dt = new Date();
document.getElementById('huge').innerHTML = dt.getSeconds();
}


setInterval(function(){
    refreshSomething() // this will run after every second
}, 1000);
</script>

Answer 4

这也有效 -

<script>function getTime(){
  var date = new Date();
  date.setTime(Date.now());

  return (date.getHours() % 12) + ':' + leadingzero(date.getMinutes()) + ':' + leadingzero(date.getSeconds()) + (date.getHours() < 12 ? ' AM' : ' PM'); ; 
}

function leadingzero(n) {
  return (n < 10) ? ("0" + n) : n;
}

function updateDiv(){
  var d = document.document.getElementsByClassName('yourDivClassname')[0];
  d.innerHTML = getTime();
}

setInterval(updateDiv, 1000);</script>

如何自动刷新我的div类内容？

4 个答案: