개발노예 코드와 일상

오랜만에 코드 글을쓴다

작업중에 애니메이션 요청이들어왔는데

숫자를 0~ ** 까지 올라가는 내용이었다

한두개면 그냥 수동으로 할텐데

수가 꽤 많아서 함수로 해두고 클래스명 통일해서 한번에 넣어버렸다

//스크롤 했을때 숫자 애니메이션이 동작하도록, 1회만 동작
//함수화 , 기능수정
var _once = 1;

    $(window).scroll( function(){
        var na_div = $(".now_wrap ").offset().top + 500;
        var _window = $(window).scrollTop() + $(window).height();


        if(na_div < _window && _once == 1){
            number_animation();

            _once = 2;
        }

    })

    function number_animation(){
        //숫자애니메이션
        $(".number_animation").each(function(index, element){
            var $this = $(this),
                goal_cnt = $this.text();

            $({ val : 0 }).animate({ val : goal_cnt }, {
                duration: 1000,
                step: function() {
                    var num = numberWithCommas(Math.floor(this.val));
                    $this.text(num);

                },
                complete: function() {
                    var num = numberWithCommas(Math.floor(this.val));
                    $this.text(num);
                }
            });
        })
    }
    function numberWithCommas(x) { //숫자콤마로 출력
        return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
    }  

    어우 줄바꿈 하기는 귀찮네
    일단 코드는 이렇게 되어있다

    목표 숫자를 일단 초기로 적어둔다

    .number_animation 으로 클래스를 통일해서 해당 div의 text값으로다가 목표로 해서 애니메이션을주었고


    이게 하다보니까 로드 하고 화면위치에 상관없이 애니메이션이 시작되서

    스크롤 내리면 밑에꺼는 끝나있더라
    그래서 .now_wrap 이라고 다시 감싸주고

    화면위치랑 해당 클래스 위치랑 비교해서 함수 실행하도록 설정했다

키오스크나 대형스크린 프로그램 작업시

키보드를 띄워서 입력받는 경우가 종종있다

기존에 사용하던 키보드를 사용해서 작업을 했지만~?

휴대폰 번호를 입력받아야해서

숫자만 띄워달라고 한다

후움

css로 억지로 조정하면 되기야하겠지만

그게더 귀찮을거같기도하고

혹시몰라 찾아보니 숫자용이 따로있더라

numberKeypad.js

이 플러그인을 사용해서 처리했다

css파일도 있고 두개를 추가한후에

//숫자 키보드 따로생성
$('.number_keyboard').numberKeypad({
wrap: '.number_input'
});

//스타일조정
$('.number_keyboard').on('click',function(){
$(".keypad").addClass('d-block');
});

//숫자키보드 닫기기능추가
$('.keypad .back, .keypad .ok, .back_bg').on('click',function(){
$(".keypad").removeClass('d-block');
});

열고닫고 기능 추가한다음에 끝

사용법은 간단하더라