jQuery PHP는 동적 디지털 디스플레이 효과를 구현합니다._jquery

HTML

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

코드 복사 코드는 다음과 같습니다.

현재 온라인:

jQuery

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

코드 복사 코드는 다음과 같습니다.

함수 Magic_number(값) {
var num = $("#번호")
num.animate({개수: 값}, {
기간: 500,
         단계: function() {
              num.text(String(parseInt(this.count)))
          }
})
};

그런 다음 update() 함수는 jQuery의 $.getJSON()을 사용하여 백그라운드 number.php에 ajax 요청을 보냅니다. PHP 응답을 받은 후 Magic_number()를 호출하여 최신 숫자를 표시합니다. 더 나은 결과를 보기 위해 setInterval()을 사용하여 코드 실행 간격을 설정합니다.

코드 복사 코드는 다음과 같습니다.

함수 업데이트() {

$.getJSON("number.php?jsonp=?", function(data) {
         매직_번호(data.n)
})
}; setInterval(update, 5000); //5초에 한 번씩 실행
업데이트();



PHP

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

코드 복사

코드는 다음과 같습니다. $total_data = 배열( 'n' =>랜드(0,999)

);  echo $_GET['jsonp'].'('.json_encode($total_data) . ')'

위 내용은 이 기사에서 동적 디지털 디스플레이 효과를 구현하기 위해 공유하는 jQuery PHP 코드입니다.