javascript - 使用json数据设置动画数字

时间:2014-01-09 17:26:29

标签: javascript php jquery html json

从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 ));
   }

;?>

预览:click

3 个答案:

答案 0 :(得分:2)

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

答案 1 :(得分:2)

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

<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>

答案 2 :(得分:0)

取出dataType:'json'。你不是在发送json。