如何自动刷新div类内容？
[英]How do i auto refresh my div class content?
问题描述
My code is as follows - 
我的代码如下-
<div class="huge">
<?php echo date ("g:i:s A"); ?>
</div>
How do i set <div class="huge"> to refresh every second? 如何设置<div class="huge">刷新每秒？
4 个解决方案
解决方案1
2 2016-09-13 17:15:15
Assuming that you need to get the update from the server (noted the PHP code in your original post), there are two things you need to implement: 假设您需要从服务器获取更新（在原始文章中注明了PHP代码），则需要实现两件事：
- A Server-Side script (in this case written in PHP) to be requested by the client for fresh data. 客户端请求服务器端脚本（在本例中为PHP编写）以获取新数据。
- A Client-Side javascript to fetch fresh data from the server and update your div. 客户端javascript，可从服务器获取新数据并更新div。
Let's make an example. 让我们举个例子。
index.php 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 (using jQuery) Javascript（使用jQuery）
setInterval(function(){
$.ajax({
url:'loadData.php'
}).done(
function(data){
$('.huge').html(data);
});
},1000);
loadData.php loadData.php
<?php echo date ("g:i:s A"); ?>
Initially your page named in this example index.php will load and show the initial date (using a bit of php code inline). 最初，在此示例中名为index.php的页面将加载并显示初始日期（使用内联的php代码）。
Then the javascript will start to get data from the server (using an ajax request to loadData.php ) every second and the div will be updated with the fresh data. 然后，javascript将开始每秒从服务器获取数据（使用ajax请求loadData.php ），并且div将使用新数据进行更新。
Hope it helps a bit! 希望能有所帮助！
PS: Date and time information can also be fetched using pure javascript code on the client-side, but for some applications the date and time information on the client-side is not reliable enough since it relies on the date and time settings that are set by the client browser. PS：日期和时间信息也可以在客户端使用纯JavaScript代码获取，但是对于某些应用程序，客户端上的日期和时间信息不够可靠，因为它依赖于设置的日期和时间设置通过客户端浏览器。
解决方案2
1 2016-09-13 17:06:58
You could use Ajax, something like this: 您可以使用Ajax，如下所示：
If it's just simple text, or simple HTML being loaded then you could use 如果只是简单的文本或正在加载的简单HTML，则可以使用
setInterval(function(){
$("#huge").load("now_playing.php");
...
}, 5000);
You could also use something like: 您还可以使用类似：
function reload() {
jQuery.ajax({
url: "fetch_message.php",
type: "POST",
success:function(data){
$('#huge').innerHTML(data);
setTimeout(function(){
reload()
}, 1000);
}
});
解决方案3
0 2016-09-13 17:19:54
This will update the content of the element with id="huge" every second. 这将每秒以id =“ huge”更新元素的内容。 you don't need any initial php value. 您不需要任何初始php值。 If you need other elements like minutes and seconds of course you can add dt.getMinutes() and dt.getHours() to the string. 如果您当然需要分钟和秒之类的其他元素，则可以将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>
解决方案4
0 已采纳 2016-09-13 19:34:48
This works too - 这也有效-
<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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.