1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
/* 7, 14, 21, 28 번째 box 배경색 변경 (7의배수) */
.box:nth-child(7n){
    font-size:14px;
}
/* 22번 부터 이후 모든 box 폰트색 변경 */
.box:nth-child(n+22) {
    font-size:14px;
}
/* 1번째 부터 4번째 까지 box 배경색 변경 */
.box:nth-child(-n+5) {
   font-size:14px;
}
.box:nth-of-type(-n+6){
    font-size:14px;
}
/* 16번째 부터 19번째 까지 box 배경색 변경 */
.box:nth-child(n+16):nth-child(-n+19) {
    font-size:14px;
}
/* 맨 뒤에서 부터 3번째 */
.box:nth-last-child(3) {
    font-size:14px;
}
/*
    nth-last-child(n)는  마지막에서부터 순서를 계산
    .box:nth-child(odd){color: red;} 홀수
    .box:nth-child(even){color: red;} 짝수
    
    -child는 n의 값이 1부터 들어가고, -of type은 n의 값이 0부터 시작 됨.
*/
cs


'Tech > CSS' 카테고리의 다른 글

nth-child, nth-of-type selector  (0) 2018.10.18
부모의 높이가 0일 때, 높이를 잡는 방법  (0) 2018.09.05
Reset CSS  (0) 2018.07.09
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Number guessing game</title>
    <style>
      html {
        font-family: sans-serif;
      }
      body {
        width: 50%;
        max-width: 800px;
        min-width: 480px;
        margin: 0 auto;
      }
      .lastResult {
        color: white;
        padding: 3px;
      }
    </style>
  </head>
  <body>
    <h1>Number guessing game</h1>
    <p>We have selected a random number between 1 and 100. See if you can guess it in 10 turns or fewer. We'll tell you if your guess was too high or too low.</p>
    <div class="form">
      <label for="guessField">Enter a guess: </label><input type="text" id="guessField" class="guessField">
      <input type="submit" value="Submit guess" class="guessSubmit">
    </div>
    <div class="resultParas">
      <p class="guesses"></p>
      <p class="lastResult"></p>
      <p class="lowOrHi"></p>
    </div>
    <script>
        'use stricts';
        var randomNumber = Math.floor(Math.random() * 100+ 1;
        
        var guesses = document.querySelector('.guesses');
        var lastResult = document.querySelector('.lastResult');
        var lowOrHi = document.querySelector('.lowOrHi');
        
        var guessSubmit = document.querySelector('.guessSubmit');
        var guessField = documentField = document.querySelector('.guessField');
        
        var guessCount = 1;
        var resetButton;
        
        guessField.focus();
        
        function checkGuess() {
            var userGuess = Number(guessField.value);
            if (guessCount === 1) {
                guesses.textContent = 'Previous guesses: ';
            }
            guesses.textContent += userGuess + ' ';
            
            if (userGuess === randomNumber) {
                lastResult.textContent = 'Congratulations! You got it right!';
                lastResult.style.backgroundColor = 'green';
                lowOrHi.textContent = '';
                setGameOver();
            } else if (guessCount === 10) {
                lastResult.textContent = '!!! GAME OVER !!!';
                setGameOver();
            } else {
                lastResult.textContent = 'Wrong!';
                lastResult.style.backgroundColor = 'red';
                if (userGuess < randomNumber) {
                    lowOrHi.textContent = 'Last guess was too low!';
                } else if (userGuess > randomNumber) {
                    lowOrHi.textContent = 'Last guess was too high!';
                }
            }
            
            guessCount++;
            guessField.value = '';
            guessField.focus();
        } // end of checkGuess
        
        guessSubmit.addEventListener('click', checkGuess); // click이 일어나면 checkGuess 함수를 실행. addEventListener() 안에서는 함수의 괄호가 필요 없음.
        
        function setGameOver() {
            guessField.disabled = true;
            guessSubmit.disabled = true;
            resetButton = document.createElement('button');
            resetButton.textContent = 'Start new game';
            document.body.appendChild(resetButton);
            resetButton.addEventListener('click', resetGame);
        } // end of setGameOver
        
        function resetGame() {
            guessCount = 1;
            
            var resetParas = document.querySelectorAll('.resultParas p'); // div.resultParas 안의 모든 문장을 배열 형태로 저장
            for (var i = 0; i < resetParas.length; i++) {
                resetParas[i].textContent = '';
            }
            
            resetButton.parentNode.removeChild(resetButton);
            
            guessField.disabled = false;
            guessSubmit.disabled = false;
            guessField.value = '';
            guessField.focus();
            
            lastResult.style.backgroundColor = 'white';
            
            randomNumber = Math.floor(Math.random() * 100+ 1;
        } // end of resetGame
    </script>
  </body>
</html>
cs




See the Pen Number guessing game by likeanewstar (@likeanewstar) on CodePen.



참고 URL : https://developer.mozilla.org/ko/docs/Learn/JavaScript/First_steps/A_first_splash

'Tech > JavaScript' 카테고리의 다른 글

Number guessing game 만들기  (0) 2018.10.04
How do I get the current date in JavaScript?  (0) 2018.07.27

2018. 09. 12 (수)


 Air Datepicker (달력 라이브러리)


http://t1m0n.name/air-datepicker/docs/

- 라이브러리는 일반적으로 CSS 파일, JS 파일 하나씩으로 구성.

- IE 10+ (IE 9에서 적용하려면 jQuery UI 적용해야함)


custom source


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
// Calendar용 메소드 (Air-Datepicker 사용 / IE10 이상)
(function($) {
    $.fn.setDatePicker = function(options) {
        if (this.length < 1return false;
        
        /*
        var settings = $.extend({
            scrollX: true,
            fontSize: 12,
            selectColumn: true,
            checkColumnOption: 'all'
        }, options);
        */
        
        var that = this;
        
        // 캘린더 버튼 동작(추가)
        that.next().on('click'function() {
            $(this).prev().focus(); // 뒤에 것을 선택하면 앞에 걸로 포커스가 가게 설정
        });
        
        // 형태(날짜, 월, 연도, 시간)별 세팅
        if (that.attr('class').indexOf('date'!== -1) {
            that.attr({'maxlength'10});
        } else if (that.attr('class').indexOf('month'!== -1) {
            that.attr({'maxlength'7'data-min-view''months''data-view''months''data-date-format''yyyy-mm'});
        } else if (that.attr('class').indexOf('year'!== -1) {
            that.attr({'maxlength'4'data-min-view''years''data-view''years''data-date-format''yyyy'});
        } else if (that.attr('class').indexOf('datetime'!== -1) {
            that.attr({'maxlength'16'data-timepicker''true''data-time-format''hh:ii'});
        } else if (that.attr('class').indexOf('datehour'!== -1) {
            that.attr({'maxlength'16'data-timepicker''true''data-time-format''hh:00'});
        }
 
        // air-datepicker 적용
        var date = new Date();
        that.datepicker({
            language: 'ko',
            autoClose: true,
            startDate: new Date(date.getFullYear(), date.getMonth(), date.getDate(), '00''00'),  // 시간, 분은 00으로 초기 설정 // 달력을 오늘 날짜로 셋팅
            minutesStep: 5    // 분 단위
            //minDate: new Date()
        });
 
        // 자동포맷 적용
        that.on('keyup'function(e) {
            // backspace이면 동작하지 않음(수정시)
            if (e.keyCode === 8return false;
 
            var maxLength = Number($(this).attr('maxlength'));
            var text = $(this).val();
            var pattern = /[^\d]/g;  // 입력허용값(숫자만)
            var newText = text.replace(pattern, '');  // 숫자이외의 기호는 없앰
            var newTextLength = newText.length;
            // Dash 자동 삽입
            if (newTextLength > 4) {
                newText = newText.slice(04+ '-' + newText.slice(4);
            }
            if (newTextLength > 6){
                newText = newText.slice(07+ '-' + newText.slice(7);
            }
            if (newTextLength > 8){
                newText = newText.slice(010+ ' ' + newText.slice(10);
            }
            if (newTextLength > 10){
                newText = newText.slice(013+ ':' + newText.slice(13);
            }
            // 최대값을 넘는 경우 삭제
            if (newText.length > maxLength) {
                newText = newText.slice(0, maxLength);
            }
            // 반영
            $(this).val(newText);  // 현재 요소만
        });
        
    };  // method 선언 종료
}(jQuery));
cs



iScroll (스크롤 라이브러리)


- 순수 자바스크립트 라이브러리

- 자바스크립트 공부 후 이 라이브러리를 뜯어보면 많이 도움될 것.


- 스크롤될 영역을 전부다 싸는 box가 필요함. (여기에 iscroll 적용)

- 스크롤될 영역 내의 첫 자식만(자손X) 스크롤이 적용된다. 그 이후 자식은 무시.


- 모든 라이브러리는 객체로 정보 전달한다.


- refresh (아코디언 메뉴 눌러서 변경이 되는 높이 값을 자동으로 잡아줌)


1
2
3
4
5
6
7
8
9
ajax('page.php', onCompletion);
 
function onCompletion () {
    // Update here your DOM
    
    setTimeout(function () {
        myScroll.refresh();
    }, 0);
};
cs


- 모바일 메뉴에 적용하면 자동으로 로컬 스크롤은 prevent하고 아이스크롤만 움직인다.

(모바일 슬라이드에서 위아래 스크롤 막는 것과 같은 원리)


- 모바일에서 서브 메뉴 횡스크롤 기능 붙이면 유용하게 쓸 수 있다. (다음 모바일웹 파란 메뉴 참고)




Google Chart


- 차트 라이브러리의 종류

- 캔버스로 그려내는 차트

- 백터 방식으로 svg를 그리는 차트





+ Recent posts

티스토리 툴바