디지털 증분 특수 효과 예제 코드의 Node.js 구현

이 기사에서는 참고 가치가 매우 좋은 Alipay My Wealth의 디지털 증분 특수 효과의 js 구현을 주로 소개합니다. 에디터와 함께 살펴볼까요

지난 금요일, 회사의 일시적인 요구에 부응하여 하루 만에 공식 홈페이지를 완성했습니다(ps: 비교적 간단합니다 ㅎㅎ) 수요가 늘어나는 데에는 특별한 효과가 있습니다. 사실 JS로 작성되어 있는데 복잡하지 않은데, 작고 가벼운 js 플러그인을 발견했는데, 사용하기도 매우 간단하고 실용적이네요. 여기에서 어린 친구들과 공유하고 마음에 들면 가져가세요.

위는 이 플러그인의 효과입니다. 사용 방법을 살펴보겠습니다.

먼저: HTML 부분에 대한 간략한 목록은 다음과 같습니다.

 <p class="counter col_fourth">
  <h2 class="timer count-title" id="count-number" data-to="300" data-speed="1500"></h2>
  <p class="count-text ">小月博客</p>
 </p>

위의 두 가지 핵심 사항을 이해해 보겠습니다.

• data-to 이 속성 은 증가시키려는 최종 값을 제어합니다.

• data-speed 영어로 이 의미는 매우 명확하며 데이터의 속도를 의미합니다. increment

ps: 여기의 class 및 id는 모든 사람의 수정에 따라 조정될 수 있습니다.

두 번째: JS 부분은 플러그인의 핵심 코드이기도 합니다

$.fn.countTo = function(a) {
  a = a || {};
  return $(this).each(function() {
   var c = $.extend({},
   $.fn.countTo.defaults, {
    from: $(this).data("from"),
    to: $(this).data("to"),
    speed: $(this).data("speed"),
    refreshInterval: $(this).data("refresh-interval"),
    decimals: $(this).data("decimals")
   }, a);
  var h = Math.ceil(c.speed / c.refreshInterval),
  i = (c.to - c.from) / h;
  var j = this,
  f = $(this),
  e = 0,
  g = c.from,
  d = f.data("countTo") || {};
  f.data("countTo", d);
  if (d.interval) {
   clearInterval(d.interval)
  }
  d.interval = setInterval(k, c.refreshInterval);
  b(g);
  function k() {
   g += i;
   e++;
   b(g);
   if (typeof(c.onUpdate) == "function") {
    c.onUpdate.call(j, g)
   }
   if (e >= h) {
    f.removeData("countTo");
    clearInterval(d.interval);
    g = c.to;
    if (typeof(c.onComplete) == "function") {
     c.onComplete.call(j, g)
    }
   }
  }
  function b(m) {
   var l = c.formatter.call(j, m, c);
   f.html(l)
  }
 })
};
$.fn.countTo.defaults = {
  from: 0,
  to: 0,
  speed: 1000,
  refreshInterval: 100,
  decimals: 0,
  formatter: formatter,
  onUpdate: null,
  onComplete: null
};
function formatter(b, a) {
  return b.toFixed(2)
}
$("#count-number").data("countToOptions", {
  formatter: function(b, a) {
   return b.toFixed(2).replace(/\B(?=(?:\d{3})+(?!\d))/g, ",")
  }
});
$(".timer").each(count);
function count(a) {
  var b = $(this);
  a = $.extend({},
  a || {},
  b.data("countToOptions") || {});
  b.countTo(a)
};

위 내용은 모두 코드, CSS 부분은 여기에 표시되지 않습니다. 데모를 다운로드하려면 아래를 클릭하여 다운로드하세요!

사실 이 플러그인은 확장성이 매우 뛰어납니다. 원하는 디스플레이는 직접 수정할 수 있습니다!

위 내용은 디지털 증분 특수 효과 예제 코드의 Node.js 구현의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!