숫자가 카운팅되는(?) 스크립트 다중이용 코드정리 문의

숫자가 카운팅되는(?) 스크립트 다중이용 코드정리 문의

QA

숫자가 카운팅되는(?) 스크립트 다중이용 코드정리 문의

본문

.up_number 안에 .memberCountConTxt1~4 숫자가 카운팅되는 스크립트입니다.

4개 사용할때 이렇게 사용했는데 코드를 조금 축소할 수 있는 방법이 있을까요?

현재 잘 구동되는 스크립트 코드 입니다!

 

 

var isVisible = false;

$(window).on("scroll", function () {
  if (checkVisible($(".up_number")) && !isVisible) {
    var memberCountConTxt1 = 22;
    var memberCountConTxt2 = 346;
    var memberCountConTxt3 = 776;
    var memberCountConTxt4 = 126;
  
  $({ val : 0 }).animate({ val : memberCountConTxt1 }, {
   duration: 1500,
  step: function() {
    var num = numberWithCommas(Math.floor(this.val));
    $(".memberCountCon1").text(num);
  },
  complete: function() {
    var num = numberWithCommas(Math.floor(this.val));
    $(".memberCountCon1").text(num);
  }
});

function numberWithCommas(x) {
    return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
    }
      $({ val : 0 }).animate({ val : memberCountConTxt2 }, {
   duration: 1500,
  step: function() {
    var num = numberWithCommas(Math.floor(this.val));
    $(".memberCountCon2").text(num);
  },
  complete: function() {
    var num = numberWithCommas(Math.floor(this.val));
    $(".memberCountCon2").text(num);
  }
});

function numberWithCommas(x) {
    return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
    }
      $({ val : 0 }).animate({ val : memberCountConTxt3 }, {
   duration: 1500,
  step: function() {
    var num = numberWithCommas(Math.floor(this.val));
    $(".memberCountCon3").text(num);
  },
  complete: function() {
    var num = numberWithCommas(Math.floor(this.val));
    $(".memberCountCon3").text(num);
  }
});

function numberWithCommas(x) {
    return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
    }
      $({ val : 0 }).animate({ val : memberCountConTxt4 }, {
   duration: 1500,
  step: function() {
    var num = numberWithCommas(Math.floor(this.val));
    $(".memberCountCon4").text(num);
  },
  complete: function() {
    var num = numberWithCommas(Math.floor(this.val));
    $(".memberCountCon4").text(num);
  }
});

function numberWithCommas(x) {
    return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
}
    isVisible = true;
  }
});

function checkVisible( elm, eval ) {
    eval = eval || "object visible";
    var viewportHeight = $(window).height(), // Viewport Height
        scrolltop = $(window).scrollTop(), // Scroll Top
        y = $(elm).offset().top,
        elementHeight = $(elm).height();   
    
    if (eval == "object visible") return ((y < (viewportHeight + scrolltop)) && (y > (scrolltop - elementHeight)));
    if (eval == "above") return ((y < (viewportHeight + scrolltop)));
}
 

이 질문에 댓글 쓰기 :

답변 2


var isVisible = false;
var memberCountConTxt = [22, 346, 776, 126];
$(window).on("scroll", function() {
  if (checkVisible($(".up_number")) && !isVisible) {
    for (var i = 0; i < memberCountConTxt.length; i++) {
      animateCount(".memberCountCon" + (i+1), memberCountConTxt[i]);
    }
    isVisible = true;
  }
});
function animateCount(element, targetValue) {
  $({ val: 0 }).animate({ val: targetValue }, {
    duration: 1500,
    step: function() {
      var num = numberWithCommas(Math.floor(this.val));
      $(element).text(num);
    },
    complete: function() {
      var num = numberWithCommas(Math.floor(this.val));
      $(element).text(num);
    }
  });
}
function numberWithCommas(x) {
  return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
}
function checkVisible(elm, eval) {
  eval = eval || "object visible";
  var viewportHeight = $(window).height(),
      scrolltop = $(window).scrollTop(),
      y = $(elm).offset().top,
      elementHeight = $(elm).height();
  if (eval == "object visible") {
    return ((y < (viewportHeight + scrolltop)) && (y > (scrolltop - elementHeight)));
  } else if (eval == "above") {
    return ((y < (viewportHeight + scrolltop)));
  }
}

 

이걸로 한번 해보세요.

챗지피티(chatGPT)


var isVisible = false;
$(window).on("scroll", function () {
  if (checkVisible($(".up_number")) && !isVisible) {
    var memberCountConTxts = [22, 346, 776, 126];
    memberCountConTxts.forEach(function (count, index) {
      $({ val : 0 }).animate({ val : count }, {
        duration: 1500,
        step: function() {
          var num = numberWithCommas(Math.floor(this.val));
          $(".memberCountCon" + (index + 1)).text(num);
        },
        complete: function() {
          var num = numberWithCommas(Math.floor(this.val));
          $(".memberCountCon" + (index + 1)).text(num);
        }
      });
    });
    isVisible = true;
  }
});
function numberWithCommas(x) {
  return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
}
function checkVisible( elm, eval ) {
  eval = eval || "object visible";
  var viewportHeight = $(window).height(),
      scrolltop = $(window).scrollTop(),
      y = $(elm).offset().top,
      elementHeight = $(elm).height();   
    
  if (eval == "object visible") return ((y < (viewportHeight + scrolltop)) && (y > (scrolltop - elementHeight)));
  if (eval == "above") return ((y < (viewportHeight + scrolltop)));
}
답변을 작성하시기 전에 로그인 해주세요.
전체 2,661
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT