jQuery_jquery를 기반으로 역동적인 디지털 디스플레이 효과 구현

일부 애플리케이션에서는 현재 온라인 사용자 수, 현재 총 거래 금액, 현재 환율 등과 같은 데이터를 동적으로 표시해야 합니다. 최신 데이터. 이 기사에서는 예제를 사용하여 jQuery를 사용하여 동적 디지털 디스플레이 효과를 얻는 방법을 소개합니다.

데모 보기 소스 코드 다운로드

HTML 코드

이 예에서는 일부 통계 플랫폼에서 일반적으로 사용되는 현재 온라인 사용자 수가 페이지에 동적으로 표시된다고 가정합니다(전체 페이지를 새로 고치지 않고 동적 숫자를 부분적으로만 새로 고침). HTML 페이지에서 다음 구조를 정의하세요.

<div class="count">当前在线：<span id="number">
</span>
</div>

jQuery 코드:

먼저 jQuery의 animate() 함수를 사용하여 한 숫자에서 다른 숫자로의 변환 프로세스를 구현하는 애니메이션 프로세스를 정의해야 합니다. 다음 Magic_number() 사용자 정의 함수는 다음과 같이 코드를 통합합니다.

function magic_number(value) { 
  var num = $("#number"); 
  num.animate({count: value}, { 
    duration: 500, 
    step: function() { 
      num.text(String(parseInt(this.count))); 
    } 
  }); 
}; 

그런 다음 update() 함수는 jQuery의 $.getJSON()을 사용하여 백그라운드 number.php에 ajax 요청을 보냅니다. PHP 응답을 받은 후 Magic_number()를 호출하여 최신 숫자를 표시합니다.

더 나은 결과를 보기 위해 setInterval()을 사용하여 코드 실행 간격을 설정합니다.

function update() { 
  $.getJSON("number.php?jsonp=?", function(data) { 
    magic_number(data.n); 
  }); 
}; 
setInterval(update, 5000); //5秒钟执行一次 
update(); 
PHP

실제 프로젝트에서는 PHP를 사용하여 데이터베이스의 최신 데이터를 얻은 다음 PHP를 통해 프런트엔드로 반환합니다. 이 예에서는 더 나은 시연을 위해 난수를 사용하고 최종적으로 json 형식으로 프론트엔드 js에 반환됩니다.

$total_data = array( 
  'n' => rand(0,999) 
);   
echo $_GET['jsonp'].'('. json_encode($total_data) . ')';