1

我的情况如下。我想每隔几秒钟检查一次 mysql 数据库是否有新条目。如果有新条目，如果有新的数据库条目，我想调用一个动画来滑动。

为此，我试图结合我找到的两个很好的教程。

http://www.aleixcortadellas.com/main/2009/02/15/automatically-query-mysql-and-output-results-with-ajax/（这个每五秒检查一次数据库）

http://www.fiveminuteargument.com/blog/scrolling-list（这个动画不错）

数据库刷新工作正常（boo.php），但我在调用动画时遇到了麻烦，或者这只是一个逻辑问题。

我认为要调用动画，我需要从 boo.php 文件中回显出这样的内容：

echo "smoothAdd('u10', 'text');";

我寻找了一些自动更新的新贴纸或 twitter 风格的更新，但我找不到一个会自动检查数据库并且有某种动画的新更新。

index.php 的代码：

<body id="scrolling-list">

<div id="wrapper">
<script type="text/javascript"> refreshdiv(); </script>
<div id="timediv">
</div>

<script type="text/javascript">
var t = 0;

$(function() {
 var h = $('#u10').height();
 var lih = $('#u10 li:last').outerHeight();
 var mb = $('#u10 li:last').css('margin-bottom');
 mb = parseInt(mb.substr(0, mb.length - 2));

$('#btn6').click(function() {
  smoothAdd('u10', '<?php echo $team; ?>');
});
});


function smoothAdd(id, text)
{
$('#u10').css('overflow', 'hidden');

var h = $('#u10').height();

var ulPaddingTop = $('#u10').css('padding-top');
ulPaddingTop = ulPaddingTop.substr(0, ulPaddingTop.length - 2);

var ulPaddingBottom = $('#u10').css('padding-bottom');
ulPaddingBottom = ulPaddingBottom.substr(0, ulPaddingBottom.length - 2);

$('#u10').css('height', h);

$('#u10').prepend('<li>' + text + '</li>');

var heightDiff = $('#u10 li:first').outerHeight() - $('#u10 li:last').outerHeight();

var oldMarginTop = $('#u10 li:first').css('margin-top');

$('#u10 li:first').css('margin-top', 0 - $('#u10 li:first').outerHeight());

$('#u10 li:first').css('position', 'relative');
$('#u10 li:first').css('top', 0 - ulPaddingTop);

$('#u10 li:last').css('position', 'relative');

$('#u10').animate({height: h + heightDiff}, 1500)

$('#u10 li:first').animate({top: 0}, 250, function() {
    $('#u10 li:first').animate({marginTop: oldMarginTop}, 1000, function() {
        $('#u10 li:last').animate({top: ulPaddingBottom}, 250, function() {
            $('#u10 li:last').remove();
            $('#u10').css('height', 'auto');
            $('#u10').css('overflow', 'visible');
        });
    });
});
}
</script>

<ul id="u10" class="example">
<li>Item one</li>
<li>Item two</li>
</ul>

ajax.js 的代码

var seconds = 5;
var divid = "timediv";
var url = "boo.php";

function refreshdiv(){

// The XMLHttpRequest object

var xmlHttp;
try{
xmlHttp=new XMLHttpRequest(); // Firefox, Opera 8.0+, Safari
}
catch (e){
try{
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP"); // Internet Explorer
}
catch (e){
try{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e){
alert("Your browser does not support AJAX.");
return false;
}
}
}

// Timestamp for preventing IE caching the GET request

fetch_unix_timestamp = function()
{
return parseInt(new Date().getTime().toString().substring(0, 10))
}

var timestamp = fetch_unix_timestamp();
var nocacheurl = url+"?t="+timestamp;

// The code...

xmlHttp.onreadystatechange=function(){
if(xmlHttp.readyState==4){
document.getElementById(divid).innerHTML=xmlHttp.responseText;
setTimeout('refreshdiv()',seconds*1000);
}
}
xmlHttp.open("GET",nocacheurl,true);
xmlHttp.send(null);
}

// Start the refreshing process

var seconds;
window.onload = function startrefresh(){
setTimeout('refreshdiv()',seconds*1000);
}

boo.php 的代码：

...
$query = "SELECT * FROM $tablename ORDER BY id DESC LIMIT 1";
$result = mysql_query($query);

// Return the results, loop through them and echo

echo "<ul class=\"scroller\">";

while($row = mysql_fetch_array($result, MYSQL_ASSOC))
{ ?>

<li><?php echo $row['team'] . " " . $row['action'];?></li>


<?php } 

echo "</ul>";
4

0 回答 0