javascript -带有json数据的动画数字

Question

我在从json获取数据时遇到了动画数字效果的问题。

如果从html加载动画数字效果，它将正确工作，但如果我从json加载它，则无法工作。

html代码：

<!DOCTYPE html>
<html>
 <head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
  <script src="jquery.animateNumbers.js" type="text/javascript"></script>
 </head>

<body>
  Time from html (<span class="animate-number" data-value="2" data-animation-duration="600"></span>:<span class="animate-number" data-value="33" data-animation-duration="600"></span>h)

<div id="display_time"></div>

<script>
  $('.animate-number').each(function(){
     $(this).animateNumbers($(this).attr("data-value"), true, parseInt($(this).attr("data-animation-duration")));
  })
</script>

 <script>
   $(function time(){
     $.ajax({
        type: "POST",
        url: "data_time.php",
        data: "get_time=true",
        dataType:'json',
        success: function(data){
           $("#display_time").html(data.time);
        }
     });
   });
 </script>

 </body>
 </html>

data_time.php代码：

<?php
  if(isset($_POST['get_time']))
   {
     $time[] =  'Time from json (<span class="animate-number" data-value="2" data-animation-duration="600"></span>:<span class="animate-number" data-value="33" data-animation-duration="600"></span>h)';
     echo json_encode(array('time' => $time ));
   }

;?>

预览：点击

Answer 1

我认为问题在于回调。尝尝这个,

<script>
function runCallback(){
  $('.animate-number').each(function(){
     $(this).animateNumbers($(this).attr("data-value"), true, parseInt($(this).attr("data-animation-duration")));
  })
}
</script>

 <script>
   $(function time(){
     $.ajax({
        type: "POST",
        url: "data_time.php",
        data: "get_time=true",
        dataType:'json',
        success: function(data){
           $("#display_time").html(data.time);
           runCallback();
        }
     });
   });
 </script>

Answer 2

使用$time而不是$time[]。它不需要是一个数组。

Answer 3

取出数据类型：‘json’。你不能派json去。