Question

使用此代码显示我的SQL表列的结果

但是在显示列的值之前我想要某种动画增量效果。

例如，如果表列的值为100 然后在显示100之前，我想要从1到100进行快速增量效果。

如果表列的值为20 然后在显示20之前，我想要从1到20进行快速增量效果。

<?php
/* Attempt MySQL server connection. Assuming you are running MySQL 
server with default setting (user 'root' with no password) */ 
$link = mysqli_connect("localhost", "root", "", "demo"); 

// Check connection 
if($link === false){ 
die("ERROR: Could not connect. " . mysqli_connect_error()); 
} 

// Attempt select query execution 
$sql = "SELECT * FROM test"; 
if($result = mysqli_query($link, $sql)){ 
if(mysqli_num_rows($result) > 0){ 
echo "<table>"; 
echo "<tr>"; 

echo "<th>results</th>"; 

echo "</tr>"; 
while($row = mysqli_fetch_array($result)){ 
echo "<tr>"; 

echo "<td>" . $row['my_column'] . "</td>"; 

echo "</tr>"; 
} 
echo "</table>"; 
// Free result set 
mysqli_free_result($result); 
} else{ 
echo "No records matching your query were found."; 
} 
} else{ 
echo "ERROR: Could not able to execute $sql. " . mysqli_error($link); 
} 

// Close connection 
mysqli_close($link); 
?>

经过长时间的谷歌搜索后，我才知道它可以完成我的jquery但是我对jquery很新，但仍然找到了这段代码

// Animate the element's value from x to y:
$({someValue: 40000}).animate({someValue: 45000}, {
duration: 3000,
easing:'swing', // can be anything
step: function() { // called on every step
// Update the element's text with rounded-up value:
$('#el').text(commaSeparateNumber(Math.round(this.someValue)));
}
});

function commaSeparateNumber(val){
while (/(\d+)(\d{3})/.test(val.toString())){
val = val.toString().replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1,");
}
return val;
}`

现在的问题是如何将SQL值插入此行 $({someValue: 40000}).animate({someValue: 45000}, {

你能帮忙吗

Answer 1

我不确定您要在HTML中显示动画值的位置，因此我无法提供确切的代码。但是你想要做的是在HTML中插入值，而不是JS。

假设您希望div中的数字从0增加到1000.您可以这样做：

max(max(v.index) for _,v in df_dict.items())

然后你使用JS在数据端查找值，然后从那里开始：

max(max(df_dict[k].index) for k in df_dict.keys())

这里可以找到一个完整的小提琴：

＆＃13;

<div class="needs-to-grow" data-end="1000">0</div>

＆＃13;

$({someValue: 0}).stop(true).animate({someValue: $(".needs-to-grow").data("end")}

＆＃13;

   $({someValue: 0}).stop(true).animate({someValue: $(".needs-to-grow").data("end")}, {
        duration : 2000,
        easing: "swing",
        step: function () {  
            var displayVal = Math.round(this.someValue);
            $(".needs-to-grow").text(displayVal);
        }
    }).promise().done(function () {
        $(".needs-to-grow").text($(".needs-to-grow").data("end"));
    });

＆＃13;

简单的SQL到PHP数字增量动画[Jquery]

1 个答案: