jQuery+PHP+Ajax 동적 디지털 통계 전시 기능 구현

jQuery+PHP+Ajax 가 실현 한 동적 디지털 통계 전시 인 스 턴 스 입 니 다.이 예 는 페이지 에서 현재 온라인 사용자 수 를 동적 으로 보 여 줍 니 다.물론 다른 더 많은 장면 에 응용 할 수 있 습 니 다.

우선 통계 할 숫자 를\#number 에 배치 합 니 다.

<div class="count">    ：<span id="number"></span></div>

그 다음 에 우 리 는 애니메이션 과정 을 정의 하고 jQuery 의 animate()함 수 를 사용 하여 한 숫자 에서 다른 숫자 로 변환 하 는 과정 을 실현 해 야 합 니 다.magicnumber()사용자 정의 함수 코드 는 다음 과 같 습 니 다.

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

그리고 update()함 수 는 jQuery 의$.get()을 사용 하여 배경 ajax.php 에 ajax 요청 을 보 냈 습 니 다.PHP 를 받 은 후 magic 을 호출 합 니 다.number()는 최신 숫자 를 보 여 줍 니 다.더 좋 은 효 과 를 보기 위해 서 는 setInterval()을 사용 하여 3 초 에 한 번 씩 실행 합 니 다.

function update() { 
  $.get("ajax.php", 
  function(data) { 
    magic_number(data); 
  }); 
} 
setInterval(update, 3000); 
update();

우 리 는 무 작위 로 0 에서 999 까지 숫자 를 추출 합 니 다.당신 은 데이터베이스 표 에서 읽 을 수 있 습 니 다.echo mt_rand(0,999);총결산
위 에서 말 한 것 은 편집장 님 께 서 소개 해 주신 jQuery+PHP+Ajax 가 동적 디지털 통계 전시 기능 을 실현 하 는 것 입 니 다.여러분 께 도움 이 되 기 를 바 랍 니 다.궁금 한 점 이 있 으 시 면 메 시 지 를 남 겨 주세요.편집장 님 께 서 신속하게 답 해 드 리 겠 습 니 다.여기 서도 저희 사이트 에 대한 여러분 의 지지 에 감 사 드 립 니 다!
만약 당신 이 본문 이 당신 에 게 도움 이 된다 고 생각한다 면,전 재 를 환영 합 니 다.번 거 로 우 시 겠 지만 출처 를 밝 혀 주 십시오.감사합니다!