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

【问题标题】：Simple SQL to PHP Number increment Animation [Jquery]简单的 SQL 到 PHP 数字增量动画 [Jquery]
【发布时间】：2018-05-28 17:49:33
【问题描述】：

我正在使用此代码来显示我的 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}, {

请帮忙

【问题讨论】：

我想我明白你需要什么。你的动画是否按照你想要的方式工作？

标签： javascript php jquery sql ajax

【解决方案1】：

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

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

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

然后你使用JS在data-end中查找值，然后你从那里开始：

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

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

   $({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"));
    });

.needs-to-grow {
  font-size: 18px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="needs-to-grow" data-end="1000">0</div>

【讨论】：