[jQuery] 원을 그리며 카운트 세는 타이머 애니메이션[jQuery] 원을 그리며 카운트 세는 타이머 애니메이션

Posted at 2018. 11. 2. 18:18 | Posted in JavaScript & jQuery/jQuery









■ 동그라미를 그리는 카운트 다운 애니메이션



원이 그려지면서 시간경과를 표기하는 애니메이션 효과가 필요했다.

마침 검색을 통해 위와같은 플러그인을 GITHUB에서 찾았고.

아래와 같이 필자에게 필요한 형태로 수정하게 되었다.



# 소스 코드

<html>
<head>
<title>circletimer</title>   
<link href="./css/circletimer.css" rel="stylesheet">
<style type="text/css">
  #example-timer {
    height:150px;
    margin:20px auto;
    width:150px;
  }
</style>
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="./js/circletimer.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.7/highlight.min.js"></script>
<script type="text/javascript">
  jQuery(document).on("ready", function() {
    jQuery("#example-timer").circletimer({
      onComplete:function() {
        alert("시간이 종료되었습니다.");
      }
      , onUpdate:function(elapsed) {
               
          // 밀리 세컨드 단위를 초단위로 변경
          var second = ~~((Math.round(elapsed) - 3000) / 1000) % 60;
         
          // 음수로 처리된 시간(초)를 양수로 전환한다.
          jQuery("#time-elapsed").html(Math.abs(second));
      }
      , timeout : 3000     // 시간은 3초로 지정
      , clockwise : true    // 시계바향으로 회전
    });


    // 타이머 시작
    jQuery("#start").on("click", function() {
      jQuery("#example-timer").circletimer("start");
    });


    // 타이머 일시 정지
    jQuery("#pause").on("click", function() {
      jQuery("#example-timer").circletimer("pause");
    });


    // 타이머 종료
    jQuery("#stop").on("click", function() {
      jQuery("#example-timer").circletimer("stop");
    });


    // 타이머 1초 증가
    jQuery("#add").on("click", function() {
      jQuery("#example-timer").circletimer("add", 1000);
    });
  })
</script>
</head>
<body>
<div class="example">
    <div id="example-timer"></div>
  <p>Time Elapsed : <span id="time-elapsed">3</span>초</p>
  <button id="start">시작</button>
  <button id="pause">정지</button>
  <button id="stop">종료</button>
  <button id="add">1초 추가</button>
  <pre>
</pre>
</div>
</body>
</html> 




# 출력 결과








API

Name __

Password __

Link (Your Website)

Comment

SECRET | 비밀글로 남기기

[Telegram] Telegram Bot을 사용하여 메세지 전송하기[Telegram] Telegram Bot을 사용하여 메세지 전송하기

Posted at 2018. 8. 29. 05:30 | Posted in API/Telegram






■ 텔레그램 봇을 사용하여 메세지 전송하기




#01. BotFather를 통한 메세지 봇 생성하기



텔레그램의 봇은 @BotFather를 통해 관리된다.


텔레그램 응용프로그램을 실행한뒤 아래 이미지와 같은 순서대로 작업을 진행한다.



01. 메시지 봇 생성하기




 ① 텔레그램 검색창에 BotFather 라고 입력한다.

 ② 검색결과에서 BotFather를 선택하고 대화를 시작한다.

 ③ /start라고 입력한다.

 ④ /newbot이라고 입력하여 새로운 봇을 생성할 준비를 한다.

 ⑤ 자신이 사용할 봇의 아이디를 입력한다.(예 : wicked_test)

 ⑥ 생성한 봇 아이디_bot 이라고 추가적으로 입력해 준다.(예 : wicked_test_bot)
 ⑦ 텔레그램의 답변문구의 토큰 API키 값을 확인한다.




02. 정상적으로 메시지 봇이  생성되었다면 텔레그램 API에 getUpdate 값을 웹 브라우저로 전달하여 생성이 잘 되었는지를 확인해보자.


# 예시

 https://api.telegram.org/bot + 토큰 API 키값 + /getUpdates


# 출력결과

 https://api.telegram.org/bot682811095:AAEfPFpuEOrq5uCk7KK6aP8BLlX-fpHov8k/getUpdates











#02. Chart ID 확인하기


01. 먼저 메시지를 전달받을 텔레그램 계정으로 로그인한 텔레그램 채팅창에서 위에서 제작한 봇을 검색한다.

 ① 검색창에서 제작한 텔레그램 봇의 아이디 값을 입력한다.(예 : wicked_test)

 ② 검색결과에 제작한 봇 아이디가 나온다면 선택해준다.

 ③ 대화를 시작한다.






02. 대화가 시작되면 위와같이 /start 라고 자동으로 입력되는것을 확인 할 수 있다.






03. 이제 다시 위에서 실행한 웹 브라우저를 새로고침 하여 다시 getUpdates 를 전달해보면 입력한 값이 잘 출력되는 것을 확인 할 수 있다.











#03. 사용자에게 메세지 전송하기



01. 웹 브라우저를 실행해서 아래와 같이 코드를 작성하 메시지를 보내보도록 하자.


# 예시

 https://api.telegram.org/bot + 토큰 API 키값 + /sendmessage?chat_id= + 사용자차트ID + &text= + 전송할 메세


# 출력결과

 https://api.telegram.org/bot682811095:AAEfPFpuEOrq5uCk7KK6aP8BLlX-fpHov8k/sendmessage?chat_id=39538219&text=Message





02. 실제 텔레그램 상에서도 작성한 메세지 내용이 정상적으로 출력되는 것을 확인 할 수 있다.








'API > Telegram' 카테고리의 다른 글

[Telegram] Telegram Bot을 사용하여 메세지 전송하기  (0) 2018.08.29

Name __

Password __

Link (Your Website)

Comment

SECRET | 비밀글로 남기기

[API] 다음 - 우편번호 API 모바일에서 사용하기[API] 다음 - 우편번호 API 모바일에서 사용하기

Posted at 2018. 4. 4. 20:11 | Posted in API/DAUM 우편번호




■ 다음 우편번호 - 팝업창 띄우지 않고 사용하기



-. 이전 포스팅에서 팝업창을 띄워서 사용하는 방법에 대한 포스팅을 작성하였는데. 이 방법만으로는 사용에 한계가 있었다.

 ① 모바일 환경에서의 사용을 고려한 반응형 웹에서 사용가능하도록 UI 변경

 ② 팝업창 사용을 막아둔 브라우저 환경 대응


-. postcode.v2.js 가 나오면서 좀더 다양하고 많은 기능을 사용할 수 있게 되었다.

-. 다음 우편번호 서비스의 "iframe을 이용하여 페이지에 끼워 넣기"를 바탕으로 작성하였다.



# 소스코드

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>:: 다음 주소록 API ::</title>
<script type="text/JavaScript" src="http://code.jquery.com/jquery-1.7.min.js"></script>
<script type="text/JavaScript" src="http://dmaps.daum.net/map_js_init/postcode.v2.js"></script>
<script type="text/javascript">
    function openDaumZipAddress() {

        // 우편번호 찾기 화면을 넣을 element를 지정
        var element_wrap = document.getElementById("wrap");

        // wrap 레이어가 off된 상태라면 다음 우편번호 레이어를 open 한다.
        if(jQuery("#wrap").css("display") == "none") {
            new daum.Postcode({
                oncomplete:function(data) {
                    jQuery("#zonecode").val(data.zonecode);
                    jQuery("#address").val(data.address);
                    jQuery("#address_detail").focus();
                    console.log(data);
                }

                // 사용자가 값을 주소를 선택해서 레이어를 닫을 경우
                // 다음 주소록 레이어를 완전히 종료 시킨다.
                , onclose:function(state) {
                    if(state === "COMPLETE_CLOSE") {

                        // 콜백함수를 실행하여 슬라이드 업 기능이 실행 완료후 작업을 진행한다.
                        offDaumZipAddress(function() {
                            element_wrap.style.display = "none";
                        });
                    }
                }
            }).embed(element_wrap);

            // 슬라이드 다운 기능을 이용해 레이어 창을 오픈한다.
            jQuery("#wrap").slideDown();
        }
        
        // warp 레이어가 open된 상태라면 다음 우편번호 레이어를 off 상태로 변경한다.
        else {

            // 콜백함수를 실행하여 슬라이드 업 기능이 실행 완료후 작업을 진행한다.
            offDaumZipAddress(function() {
                element_wrap.style.display = "none";
                return false;
            });
        }
    }

    function offDaumZipAddress() {


        // 슬라이드 업 기능을 이용해 레이어 창을 닫는다.
        jQuery("#wrap").slideUp();

    }

</script>
</head>
<body>
    <input id="zonecode" type="text" value="" style="width:50px;" readOnly/>
    &nbsp;
    <input type="button" onClick="openDaumZipAddress();" value = "주소 찾기"/>

    <!-- 다음 우편번호 찾기 리스트를 띄울 영역을 지정 -->

    <div id="wrap" style="display:none;border:1px solid #DDDDDD;width:500px;margin-top:5px"></div>
    <div style="height:10px;"></div>
    <input type="text" id="address" value="" style="width:240px;" readOnly/>
    <input type="text" id="address_detail" value="" style="width:200px;"/>
</body>
</html>



※ 계속 값을 체크해 강제로 display:none 처리한 이유


기본적으로 위에서 설명한 다음 우편번호 서비스의

"iframe을 이용하여 페이지에 끼워 넣기"를 필자의 입맛에 맞게 수정한 내용이다.

이렇게 한 이유는 좀 자연스러운 애니메이션(슬라이드) 효과를 사용하고 싶어서 였다.


그래서 위 코드에서는 if(jQuery("#wrap").css("display") == "none") 으로 한번

onclose:function(state) 기능으로 또 한번

다음 주소록 레이어를 강제로 종료시키고 있는데.

이렇게 한 이유는 아래와 같다.


처음 제작 했을때는 slideUpslideDown 기능이 아니라 slideToggle만을 사용하여 편하게

display 설정 만을 변경해가며 사용했었다.

그런데 다음 주소록 레이어가 제대로 종료가 되지 않아서 발생을 하는지.

실제 사용중 종종 <div id="wrap"></div>를 지정한 영역에



# slideToggle 기능만을 사용한 결과물



위와 같이 실선이 생기는경우가 발견되었다.

그래서 위와같이 callback과 slideDown기능을 사용하여 레이어를 한번 닫고.

작업이 완료된 이후 한번더 다음 주소록 레이어를 완전히 숨기는 방식으로 변경하였다.



 


# 출력결과 - Computer Web




# 출력결과 - Mobile Web



위와같이 모바일에서의 사용에 문제가 없게끔 변경해 보았다.





Name __

Password __

Link (Your Website)

Comment

SECRET | 비밀글로 남기기

[API] 다음 - 우편번호 API 사용하기[API] 다음 - 우편번호 API 사용하기

Posted at 2018. 3. 13. 13:46 | Posted in API/DAUM 우편번호




■ DAUM - 우편번호 API



 · 다음 우편번호 서비스 API(http://postcode.map.daum.net/guide)는 스크립트 한번에 손쉽게 우편번호를 받아올 수 있어서 사용이 매우 간편하다.

 · http://dmaps.daum.net/map_js_init/postcode.v2.js 스크립트를 추가만 해주면 된다.




# 다음 에디터 데이터 정리

항목

값(예시)

 postcode

 463-400

 구 우편번호 6자리

 postcode1

 463

 구 우편번호 앞 3자리

 postcode2

 400

 구 우편번호 뒤 3자리

 zonecode

 13494

 국가기초구역번호

 2015년 8월 1일부터 시행될 새 우편번호

 address

 경기 성남시 분당구 판교역로 235

 기본주소(검색결과에서 첫줄에 나오는 주소)

 addressEnglish

 235 Pangyoyeok-ro,

 Bundang-gu,

 Seongnam-si, Gyeonggi-do, korea

 기본 영문 주소

 addressType

 R/J

 검색된 기본 주소 타입 : R(도로명), J(지번)

 userSelectedType

 R/J

 검색 결과에서 사용자가 선택한 주소의 타입

 roadAddress

 경기 성남시 분당구 판교역로 235

 도로명 주소
 (모든 주소에 도로명 주소가 부여되어 있지는 않다.)

 roadAddressEnglish

 235, Pangyoyeok-ro, Bundang-gu,

 Seongnam-si, Gyeonggi-do, Korea

 영문 도로명 주소

 jibunAddress

 경기 성남시 분당구 삼평동 681

 지번 주소

 jibunAddressEnglish

 681, Sampyeong-dong,

 Bundang-gu,

 Seongnam-si, Gyeonggi-do, Korea

 영문 지번 주소

 autoRoadAddress

 경기 성남시 분당구 판교역로 235

 매핑된 도로명 주소가 여러개인 경우, 사용자가 '선택안함'을

 클릭했을 때 임의로 첫번째 매핑 주소를 넣어서 반환합니다.

 (autoMapping을 false로 설정한 경우에는 값이 채워지지 않습니다.)

 autoRoadAddressEnglish

 235, Pangyoyeok-ro, Bundang-gu, Seongnam-si, Gyeonggi-do, Korea

 autoRoadAddress의 영문 도로명 주소

 autoJibunAddress

 경기 성남시 분당구 삼평동 681

 매핑된 지번 주소가 여러개인 경우, 사용자가 '선택안함'을

 클릭했을 때 임의로 첫번째 매핑 주소를 넣어서 반환합니다.

 (autoMapping을 false로 설정한 경우에는 값이 채워지지 않습니다.)

 autoJibunAddressEnglish

 681, Sampyeong-dong,

 Bundang-gu,

 Seongnam-si, Gyeonggi-do, Korea

 autoJibunAddress의 영문 지번 주소

 buildingCode

 4113510900106810000000001

 건물코드

 buildingName

 에이치스퀘어 엔동

 건물명

 postcodeSeq

 001

 우편번호 일련번호

 sido

 경기

 도 / 시 이름

 sigungu

 성남시 분당동

 시 / 군 / 수 이름

 bcode

 4113510900

 법정동 코드

 bname

 삼평동

 법정동 이름









■ 팝업창 띄워서 사용하기




# 소스코드

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<title>:: 다음 주소록 API ::</title>

<script type="text/JavaScript" src="http://code.jquery.com/jquery-1.7.min.js"></script>

<script type="text/JavaScript" src="http://dmaps.daum.net/map_js_init/postcode.v2.js"></script>

<script type="text/javascript">

function openDaumZipAddress() {

new daum.Postcode({

oncomplete:function(data) {

jQuery("#postcode1").val(data.postcode1);

jQuery("#postcode2").val(data.postcode2);

jQuery("#zonecode").val(data.zonecode);

jQuery("#address").val(data.address);

jQuery("#address_etc").focus();

console.log(data);

}

}).open();

}

</script>

</head>

<body>

<input id="postcode1" type="text" value="" style="width:50px;" readonly/>

&nbsp;-&nbsp;

<input id="postcode2" type="text" value="" style="width:50px;" readonly/>

&nbsp;&nbsp;

<input id="zonecode" type="text" value="" style="width:50px;" readonly/>

&nbsp;

<input type="button" onClick="openDaumZipAddress();" value = "주소 찾기" />

<br/>

<input type="text" id="address" value="" style="width:240px;" readonly/>

<input type="text" id="address_etc" value="" style="width:200px;"/>

</body>

</html>




# 출력결과





다음 우편번호 API - 모바일에서 사용하기 로 이어집니다.




Name __

Password __

Link (Your Website)

Comment

SECRET | 비밀글로 남기기