[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> 




# 출력 결과








반응형
저작자표시

'JavaScript & jQuery > jQuery' 카테고리의 다른 글

[jQuery] 화면 단위로 끊어서 마우스 휠로 이동하기  (7) 2019.01.31
[jQuery] Mobile Web 사용시 KEYBOARD 이벤트 체크  (0) 2018.11.17
[jQuery] YouTube 영상 제어  (0) 2018.10.26
[jQuery] 퍼센트 게이지를 나타내는 Progress Bar  (0) 2018.10.25
[jQuery] jQuery Ajax 전송  (0) 2018.09.28
//

[jQuery] YouTube 영상 제어[jQuery] YouTube 영상 제어

Posted at 2018. 10. 26. 16:58 | Posted in JavaScript & jQuery/jQuery
반응형




참고① : iframe 삽입에 대한 YouTube Player API 참조 문서

참고② : YouTube 내장 플레이어 및 플레이어 매개변수




■ jQuery를 이용한 유튜브 영상 제어




# 소스 코드

<html>
<head>
<title>:: YouTube 영상 제어 ::</title>
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script>
    var tag = document.createElement("script");
    tag.src = "https://www.youtube.com/iframe_api";
    var firstScriptTag = document.getElementsByTagName('script')[0];
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
 
    // 영상의 정보를 담을 player 전역 변수 선언
    var player = "";

    // HTML 문서가 모두 준비되면
    jQuery(document).ready(function () {
        onYouTubeIframeAPIReady();
    });


   // 영상의 세부정보를 playser 변수에 담는다.
   function onYouTubeIframeAPIReady() {
        player = new YT.Player('player', {
              height : '450'
            , width : '800'
            , videoId : 'E8AYyhPHRDc'
            , playerVars: {
                'autoplay': 1                     // 자동재생
               , 'cc_load_policy' : 0            // 자막 0 : on, 1 : off
               , 'controls': 0                     // 동영상 플레이어 컨트롤 표기
               , 'disablekb' : 0                  // 키보드 컨트롤 사용 중지
         
            }
            , events: {
                'onReady' : playVideo
            }
        });
    }
   
    // 재생
    function playVideo() {
        player.playVideo();
    }

    // 일시정지
    function pauseVideo() {
        player.pauseVideo();
    }

    // 종료
    function stopVideo() {
      player.stopVideo();
    }

    // 음소거 On / Off
    function volumeMute() {
       
        // 음소거
        if(player.isMuted() == true) {
          player.unMute();
          jQuery("#volumeMute").val("음소거");
      }
     
      // 음소거 해제
      else if(player.isMuted() == false) {
          player.mute();
          jQuery("#volumeMute").val("음소거 해제");
      }
    }
   
    // 볼륨 조절
    function soundControl(number) {
        player.setVolume(number);
    }

</script>
</head>
<body>
    <div style="position:relative;">
      <div id="player"></div>
  </div>
  <hr/>
  <input type="button" value="재생" onClick="playVideo();"/>
  <input type="button" value="일시정지" onClick="pauseVideo();"/>
  <input type="button" value="종료" onClick="stopVideo();"/>
  <input type="button" id="volumeMute" value="음소거" onClick="volumeMute();"/>
  볼륨&nbsp;:&nbsp;<input type="range" value="50" min="0" max="100" onChange="soundControl(this.value);"/>
</body>
</html>




# 출력 결과






반응형
저작자표시

'JavaScript & jQuery > jQuery' 카테고리의 다른 글

[jQuery] Mobile Web 사용시 KEYBOARD 이벤트 체크  (0) 2018.11.17
[jQuery] 원을 그리며 카운트 세는 타이머 애니메이션  (0) 2018.11.02
[jQuery] 퍼센트 게이지를 나타내는 Progress Bar  (0) 2018.10.25
[jQuery] jQuery Ajax 전송  (0) 2018.09.28
[jQuery] data( ) 메서드를 통한 값 읽고. 쓰기  (0) 2018.09.17
//

[jQuery] 퍼센트 게이지를 나타내는 Progress Bar[jQuery] 퍼센트 게이지를 나타내는 Progress Bar

Posted at 2018. 10. 25. 17:38 | Posted in JavaScript & jQuery/jQuery
반응형




참고 : https://codepen.io/AndreiaLopes/pen/ogrKBZ




■ 퍼센트 게이지(프로그래스 바) 나타내기




jQuery UI 중 퍼센트 게이지를 나타낼때 유용한 progressbar가 존재한다.


그렇지만 단순히 막대만을 넣어서 사용하는게 아니라.


해당 progressbar 내에 텍스트를 삽입하기 위한 코드를 정리해 본다.





# 소스코드

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>:: jQuery 프로그래스 바 ::</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"/>
<style type="text/css">

    // CSS의 position 속성을 이용하여 두개의 DIV 레이아웃을 겹친다.

    .u.i-progressbar { position:relative; }
    .progress-label {
        position:absolute;
        left:50%;
        top:8px;
        font-weight:bold;
        margin-left:-40px;
    }
</style>
<script type="text/JavaScript" src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script type="text/JavaScript" src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script type="text/javascript">
    jQuery(document).ready(function() {
       
        var barProgress = jQuery(".progressbar");
       

        // value 값의 숫자를 입력함으로서 내용을 채울 수 있다.

        barProgress.eq(0).progressbar({value:25});
        barProgress.eq(0).find(".ui-progressbar-value").css({"background":"#CC66CC"});
       
        barProgress.eq(1).progressbar({value:75});
        barProgress.eq(1).find(".ui-progressbar-value").css({"background":"#FFCC66"});
       
        barProgress.eq(2).progressbar({value:50});
        barProgress.eq(2).find(".ui-progressbar-value").css({"background":"#DDDDDDD"});
    });
</script>
</head>
<body>
    ■ 퍼센트 나타내기
    <hr/>
    <div class="progressbar"><div class="progress-label">25%</div></div>
    <br/>
    <div class="progressbar"><div class="progress-label">75%</div></div>
    <br/>
    <div class="progressbar"><div class="progress-label">50%</div></div>
</body>
</html> 





# 출력결과





반응형
저작자표시

'JavaScript & jQuery > jQuery' 카테고리의 다른 글

[jQuery] 원을 그리며 카운트 세는 타이머 애니메이션  (0) 2018.11.02
[jQuery] YouTube 영상 제어  (0) 2018.10.26
[jQuery] jQuery Ajax 전송  (0) 2018.09.28
[jQuery] data( ) 메서드를 통한 값 읽고. 쓰기  (0) 2018.09.17
[jQuery] jQuery 셀렉터 정리  (0) 2018.09.10
//

[JavaScript] Password 형식 검사하기[JavaScript] Password 형식 검사하기

Posted at 2018. 10. 24. 15:08 | Posted in JavaScript & jQuery/JavaScript
반응형




■ 패스워드 형식 검사하기




# 소스코드

<html>
<head>
<title>:: JAVASCRIPT 비밀번호 검사 ::</title>
<script type="text/javascript">
    function checkPasswordPattern(str) {

        var pass = str.value;
        var message = "";

        // 비밀번호 문자열에 숫자 존재 여부 검사
        var pattern1 = /[0-9]/;  // 숫자
        if(pattern1.test(pass) == false) {
            message = "비밀번호에 숫자가 입력되지 않았습니다.\n숫자를 입력하여 주시기 바랍니다.";
        }

        // 비밀번호 문자열에 영문 소문자 존재 여부 검사
        var pattern2 = /[a-z]/;
        if(pattern2.test(pass) == false) {
            message = "비밀번호에 영문 소문자가 입력되지 않았습니다.\n영문 소문자를 입력하여 주시기 바랍니다.";
        }

        // 비밀번호 문자열에 영문 대문자 존재 여부 검사
        var pattern3 = /[A-Z]/;
        if(pattern3.test(pass) == false) {
            message = "비밀번호에 영문 대문자가 입력되지 않았습니다.\n영문 대문자를 입력하여 주시기 바랍니다.";
        }

        // 비밀번호 문자열에 특수문자 존재 여부 검사
        var pattern4 = /[~!@#$%^&*()_+|<>?:{}]/;  // 특수문자
        if(pattern4.test(pass) == false) {
            message = "비밀번호에 특수문자가 입력되지 않았습니다.\n특수문자를 입력하여 주시기 바랍니다.";
        }

        // 비밀번호 문자열의 입력 길이 검사
        if(pass.length < 8 || pass.length > 16) {
            message = "비밀번호는 8자리 이상 16자리 이하만 가능합니다.\n비밀번호를 다시 입력하여 주시기 바랍니다.";
        }

        // 비밀번호 문자열 결과 출력
        if(message) {
            alert(message);
            str.value = "";
            str.focus();
            return false;
        } else {
            alert("사용하셔도 좋은 비밀번호 입니다.");
        }
    }
</script>
</head>
<body>
    <!-- input type="password" id="" value=""/ -->

    <!-- 스타일 ime-mode:disabled 속성은 textbox에 영문만을 입력되게 한다. -->

    <input type="text" id="memberPw" value="" style="ime-mode:disabled;"/>

    <input type="button" onClick="checkPasswordPattern(memberPw);" value="검사"/>
</body>
</html>





# 출력결과









■ 패스워드 형식 실시간 검사하기




위에서 패스워드 형식을 검사하는 자바스크립트 함수를 만들어 보았다.


그렇지만 위 방법은 사용자가 작성하고 버튼을 다시 클릭하고


비밀번호 형식에 적합하지 않으면은 다시 입력하고 또 클릭하는 불필요한 작업이 많기에.


실시간으로 비밀번호의 형식을 검사해 보려고 한다.




# 소스코드

<html>
<head>
<title>:: JAVASCRIPT 비밀번호 안전성 겁사 ::</title>
<script type="text/javascript">
    function safetyPasswordPattern(str) {

        var pass = str.value;
        var message = "";
        var color = "";
        var checkPoint = 0;

        // 입력값이 있을경우에만 실행
        if(pass.length) {

            // 최대 입력 글자수를 제한한다.
            if(pass.length < 8 || pass.length > 16) {
                message = ":: 최소 8자 이상, 최대 16자 이하 ::";
                color = "#A23E48";
            }

            // 문자열의 길이가 8 ~ 16 인경우
            else {

                // 비밀번호 문자열에 숫자 존재 여부 검사
                var pattern1 = /[0-9]/;  // 숫자
                if(pattern1.test(pass) == false) {
                    checkPoint = checkPoint + 1;
                }

                // 비밀번호 문자열에 영문 소문자 존재 여부 검사
                var pattern2 = /[a-z]/;
                if(pattern2.test(pass) == false) {
                    checkPoint = checkPoint + 1;
                }

                // 비밀번호 문자열에 영문 대문자 존재 여부 검사
                var pattern3 = /[A-Z]/;
                if(pattern3.test(pass) == false) {
                    checkPoint = checkPoint + 1;
                }

                // 비밀번호 문자열에 특수문자 존재 여부 검사
                var pattern4 = /[~!@#$%^&*()_+|<>?:{}]/;  // 특수문자
                if(pattern4.test(pass) == false) {
                    checkPoint = checkPoint + 1;
                }

                if(checkPoint >= 3) {
                    message = ":: 보안성이 취약한 비밀번호 ::";
                    color = "#A23E48";
                } else if(checkPoint == 2) {
                    message = ":: 보안성이 낮은 비밀번호 ::";
                    color = "#FF8C42";
                } else if(checkPoint == 1) {
                    message = ":: 보안성이 보통인 비밀번호 ::";
                    color = "#FF8C42";
                } else {
                    message = ":: 보안성이 강력한 비밀번호 ::";
                    color = "#0000CD";
                }
            }
        }

        else {
            message = ":: 비밀번호를 입력해 주세요 ::";
            color = "#000000";
        }

        document.getElementById("makyText").innerHTML = message;
        document.getElementById("makyText").style.color = color;
    }
</script>
</head>
<body>

    <!-- 스타일 ime-mode:disabled 속성은 textbox에 영문만을 입력되게 한다. -->

    <input type="text" id="memberPw" value="" onKeyup="safetyPasswordPattern(this);" style="ime-mode:disabled;"/>
    <br/>
    <span id="makyText">:: 비밀번호를 입력해 주세요 ::</span>
</body>
</html>




# 출력결과





반응형
저작자표시

'JavaScript & jQuery > JavaScript' 카테고리의 다른 글

[JavaScript] JavaScript 테스트 방식  (0) 2018.12.25
[JavaScript] 자바스크립트에서의 Test Suite  (0) 2018.12.25
[JavaScript] 읽기 쉽고, 유지보수하기 쉬운 코드 작성하기 - 코딩규약  (0) 2018.10.12
[JavaScript] email 형식 검사하기  (0) 2018.09.27
[JavaScript] Audio 객체를 이용한 음악 재생  (0) 2018.09.27
//

티스토리툴바