Java에는 FileWriter, Python에서는 내장 함수 등과 같은 방법들을 통해서 물리적인 파일을 생성한다.

각각의 언어에서 기본으로 지원하는 것이 파일 생성인데, MariaDB에서도 당연히 파일 생성을 지원한다.
지금 소개하는 것은 MariaDB에서 쿼리문을 실행하여 txt 파일을 생성하는 것이다.

파일 생성은 다른 언어를 통해서도 가능하지만, 이전 포스트들과 마찬가지로 타 시스템과의 느슨한 연결(낮은 의존도)를 위한 것들이었기 때문에 자체적으로 파일을 생성하는 방법을 소개한다.

우선, table_name 에 select 결과 대상이 될 테이블을 입력하고, Where 조건에 의도하는 정보를 입력한다.
예제에서 입력한 조건은, col_name 컬럼이 John 이라는 단어를 포함하며, col_name의 길이가 10보다 작거나 같은 조건의 모든 컬럼이다.

각 컬럼들은 ,  으로 구분되며, 각 행들은 /n (줄바꿈) 으로 구분되게 파일 생성 조건이 정의되어 있다.
이 값들은 파일을 읽어들이는 시스템에서 정의된 구분자로 대체하면 된다.


?
1
2
3
4
5
6
7
8
SELECT *
INTO OUTFILE 'D:\DATA\TEST.txt'
FIELDS TERMINATED BY ','
LINES TERMINATED BY '/n'
FROM table_name
WHERE col_name LIKE '%John%'
AND LENGTH(col_name ) <= 10
ORDER BY col_name ;



이러한 기능은 주기적으로 조건에 맞는 파일을 생성해야 하는 로그성 작업 또는 백업 파일 생성에 적합하다.

해당 쿼리를 Stored Procedure으로 만들고, 이 SP를 Event Scheduler에 등록하여 주기적으로 작동하게 되면 간단한 로그/백업 파일이 되는 것이다.

물론 더 많은 기능을 사용하려면 별도의 언어를 사용하여 동작시키는 방법이 있겠으나, 처음에 의도한 바와 같이 또하나의 관리 포인트가 생기는 것에 대해 고려를 해야 한다.


저작자표시 비영리 동일조건

'IT > Programming' 카테고리의 다른 글

MariaDB의 EventScheduler 사용  (0) 2016.12.08
일정 주기마다 백업 테이블 생성/삭제 Procedure  (0) 2016.12.08
MariaDB에서 StoredProcedure를 활용한 암호화 인증  (0) 2016.11.25
MariaDB를 활용한 암호화  (0) 2016.11.23
Bootstrap 활용한 Stopwatch 예제 (Plank 운동을 위하여)  (2) 2016.11.22

주기적으로 서버에서 어떤 작업을 해야할 때, 서버에서는 Cron / Batch / Event 등을 통하여 주기적인 작업을 진행한다.


DB에서도 주기적으로 작업을 해줘야 하는 것이 있다.

대표적인 것으로는 특정 Event에 따라 별도의 테이블에 데이터를 자동적으로 이관한다거나, 자동으로 데이터 백업을 해야 하는 것 등이 있을 것이다.

Trigger과 같은 기능을 사용해도 유사한 기능을 수행할 수 있으나, Trigger는 어떠한 이벤트가 발생했을 때 사용되는 것이기 때문에, 주기적인 작업에는 적합하지 않다고 볼 수 있다.


또한, DB를 사용하는 서버(Application)에서 주기적으로 쿼리를 DB로 요청할 수도 있다.

하지만 이 경우에는 Application이 비정상 작동 또는 장애가 발생했을 경우가 있을 수 있으므로, 장애 포인트가 하나 늘어난다고 볼 수 있다.

(물론 과거에 MySQL, MariaDB의 Event Scheduler의 성능이 떨어진다는 이야기도 있었으나, 최근에는 많이 개선되었다고 하고, 시스템별로 느슨한 연결을 하기 위하여 DB의 Event Scheduler 사용도 필요하다.)



Event Scheduler 사용 설정

우선, MariaDB에서 별도로 설정하지 않았다면, Event 옵션은 Off 상태이다.

이를 활성화시키기 위해서 두가지 방법 중 하나를 선택하면 된다.


1. Option 변경

?
1
2
3
4
5
-- MariaDB event scheduler 활성화
SET GLOBAL event_scheduler = ON;
SET @@global.event_scheduler = ON;
SET GLOBAL event_scheduler = 1;
SET @@global.event_scheduler = 1;


2. my.ini  (Linux에서는 my.cnf ) 에 설정 추가


  event_scheduler = ON  


*1번의 경우에는 Event Scheduler 사용을 위해 재시작이 필요없지만, 다음 재시작 때에는 Event Scheduler가 설정값을 따른다 (기본은 Off)

*2번의 경우에는 재시작을 해야만 설정에 추가되며, 한번 재시작 하고 난 다음에는 시작마다 설정이 On 되어 있다.



Event Scheduler 설정 확인

?
1
2
-- Event 변수 확인
show variables like 'event%';


Event Scheduler 등록

Event Scheduler 등록하는 쿼리이다.
동작 주기는 Month, Hour, Minute, Second 등으로 다양하다.
너무 자주 동작하면 DB 성능에 무리가 갈 수도 있으나, 또 너무 긴 기간으로 설정하면 한번의 쿼리에 많은 시간이 필요한 Trade-Off가 있을 수 있다.
아래 Event에서는 SP를 호출하도록 했다.
(Raw 쿼리문을 입력하는 것보다, SP를 호출하게 하는 것이 유지보수상으로 더 좋다)


?
1
2
3
4
5
6
7
-- Event 생성
CREATE EVENT IF NOT EXISTS EV_BACKUP_TABLE
    ON SCHEDULE
        EVERY 1 MINUTE -- Event 실행 주기
        STARTS ' 2016-12-08 10:00:00' -- Event 최초 시작 시간
    DO
        CALL SP_BACKUP_TABLE_CREATE(); -- Event에서 수행할 명령어



Event Scheduler 관리

?
1
2
3
4
5
6
-- Event 목록 확인
SHOW EVENTS ;
SELECT * FROM INFORMATION_SCHEMA.EVENTS;
 
-- Event 삭제
drop event     EV_BACKUP_TABLE;


저작자표시 비영리 동일조건

'IT > Programming' 카테고리의 다른 글

MariaDB에서 쿼리를 이용한 파일 생성  (0) 2016.12.18
일정 주기마다 백업 테이블 생성/삭제 Procedure  (0) 2016.12.08
MariaDB에서 StoredProcedure를 활용한 암호화 인증  (0) 2016.11.25
MariaDB를 활용한 암호화  (0) 2016.11.23
Bootstrap 활용한 Stopwatch 예제 (Plank 운동을 위하여)  (2) 2016.11.22
보통의 데이터들은 하나의 테이블에 넣어두고, join등을 통해 Query 한다.
하지만 하나의 테이블에 수십만건 이상의 데이터가 쌓이면 성능상/유지보수상의 문제가 생긴다.
특히 로그를 쌓거나 이력 관리하는 DB는 일정 주기로 테이블을 생성하여 백업한다.

아래 쿼리는 월 주기로 테이블을 생성하고, 일정 주기가 지나면 테이블을 drop 하는 SP이다.
아무래도 현행법상 개인정보 등을 이유로 로그 보존 기간이 있으므로, 해당하는 기준에 맞게 자료를 삭제하면 된다.

그리고, 매번 수동으로 SP를 호출하기 힘들기 때문에, MariaDB에서 제공하는 EVENT SCHEDULER 기능을 사용하면, 주기적으로 실행할 수 있다.


?
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
CREATE DEFINER=`root`@`%` PROCEDURE `SP_BACKUP_TABLE_CREATE`()
BEGIN
 
 
SET @createDateFormat=DATE_FORMAT(DATE_ADD(curdate(),  INTERVAL 1 month  ),'%Y%m');  
-- DATE_ADD를 통해, 1개월 이후의 YYYYMM을 리턴 받는다
 
SET @createQuery = CONCAT('CREATE TABLE IF NOT EXISTS `SCHEMA`.`TABLE_NAME_',@createDateFormat, '`
                                             LIKE `SCHEMA`.`TABLE_NAME`'); 
--CREATE 쿼리인데, 메인 테이블 기준으로 생성한다. (CREATE LIKE)
 
PREPARE createStmt from @createQuery;
EXECUTE createStmt;
DEALLOCATE PREPARE createStmt;
 
 
SET @dropDateFormat=DATE_FORMAT(DATE_SUB(curdate(),  INTERVAL 3 month  ),'%Y%m'); 
-- CREATE 구문과 유사하게, DATE_SUB을 통해 3개월 이전의 YYYYMM을 리턴 받는다
SET @dropQuery = CONCAT('DROP TABLE  `SCHEMA`.`TABLE_NAME_',@dropDateFormat);
PREPARE dropStmt from @dropQuery;
EXECUTE dropStmt;
DEALLOCATE PREPARE dropStmt;
 
 
END


저작자표시 비영리 동일조건

'IT > Programming' 카테고리의 다른 글

MariaDB에서 쿼리를 이용한 파일 생성  (0) 2016.12.18
MariaDB의 EventScheduler 사용  (0) 2016.12.08
MariaDB에서 StoredProcedure를 활용한 암호화 인증  (0) 2016.11.25
MariaDB를 활용한 암호화  (0) 2016.11.23
Bootstrap 활용한 Stopwatch 예제 (Plank 운동을 위하여)  (2) 2016.11.22

이전 포스트에서는 MariaDB를 활용한 암호화 하는 방법을 소개했다.


이렇게 생성된 패스워드를 사용하는 방법 중, 시스템 간에 API호출할 때 패스키로 사용할 수 있다.

다시 말해서 파라미터를 전달할 때, 암호화된 키를 같이 전달함으로써 상호간에 인증된 시스템이라는 것을 확인할 수 있다.


단방향 암호화인 경우에는 단순히 해시값을 비교할 수도 있으며,

양방향 암호화인 경우에는 사전에 약속된 암호화Key를 사용하여 복호화하고, 비교해볼 수 있다.


위 두가지 케이스에 대해서 보통은 API를 만들고, 그것을 호출해서 사용한다.

하지만 API를 사용하기 힘든 환경이거나 굳이 API를 위해서 별도의 서비스가 부담스러울 경우에는 DB에서 SP (Stored Procedure)를 호출하여 사용할 수 있다.


Input값에는 암호화에 사용되었던 Parameter들과 암호화된 String이 대입된다.

Output은 암호가 맞는지 틀린지에 대한 Boolean 값이 리턴되며, false는 0으로, true는 1로 표시된다.


아래 예시는 3개의 Parameter를 사용한 MD5 암호화이며, 내부 로직만 바꾸면 다른 암호화로 대체할 수 있다.


3개의 파라미터를 사용하는 SP 생성문


?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
CREATE DEFINER=`root`@`localhost` PROCEDURE `SP_CHECK_AUTH`(
        IN _FIRST_PARAM VARCHAR(20),
        IN _SECOND_PARAM VARCHAR(20),
        IN _THIRD_PARAM VARCHAR(20),
        IN _HASH_VAL VARCHAR(200),
        OUT _RESULT BOOLEAN)
BEGIN
 
    DECLARE _HASH_KEY VARCHAR(12);
    DECLARE _HASH_STR VARCHAR(100);
    DECLARE _HASH_RESULT VARCHAR(100);
     
    SET _HASH_KEY = 'ENCRYPTKEY' ;
    SET _HASH_STR = CONCAT(_FIRST_PARAM,_SECOND_PARAM,_THIRD_PARAM);
    SET _HASH_RESULT = UPPER(MD5(TRIM(CONCAT(_HASH_KEY, _HASH_STR))));
     
    IF(_HASH_RESULT = _HASH_VAL)
    THEN
        SET _RESULT = TRUE;
    ELSE
        SET _RESULT = FALSE;
    END IF;
     
END


SP 호출 예제 


?
1
2
3
4
5
6
-- MD5 암호화
SELECT MD5(TRIM(CONCAT('ENCRYPTKEY','A','B','C')));
 
-- SP 호출
CALL DATA.SP_CHECK_AUTH('A','B','C', 'dd74d21f647f92dc6266d1be12f450a6', @OUT_VALUE);
SELECT @OUT_VALUE;


저작자표시 비영리 동일조건

'IT > Programming' 카테고리의 다른 글

MariaDB에서 쿼리를 이용한 파일 생성  (0) 2016.12.18
MariaDB의 EventScheduler 사용  (0) 2016.12.08
일정 주기마다 백업 테이블 생성/삭제 Procedure  (0) 2016.12.08
MariaDB를 활용한 암호화  (0) 2016.11.23
Bootstrap 활용한 Stopwatch 예제 (Plank 운동을 위하여)  (2) 2016.11.22


회사에서 보안이라고 하면 가장 기본적인 것이 데이터 암호화라고 할 수 있다.

이 암호화라는 것이 사용 목적에 따라 다른 방법을 사용해야 한다.


암호화를 크게 구분하자면, 복호화가 가능한지의 여부에 달라진다.

다시 말해서, 암호를 만들었는데, 이를 다시 평문으로 되돌릴 수 있는지에 다르다.

주로 패스워드는 단방향 암호화를 사용한다.

중요하지 않은 정보들은 암호화 하지 않는 경우가 많고, 보안적으로 껄끄럽거나 중요한 정보(개인정보 등)은 양방향 암호화를 한다.

물론, 복호화가 불가능한 알고리즘이라고 하더라도, 알고리즘별로 보안적 이슈가 존재한다.


단순히 생각해서, 모든 암호화 알고리즘을 강력한 것으로 사용하면 좋을까?

당연히 보안성 측면에서는 좋다. 하지만, 실용성에서는 큰 무리가 따른다.

예를 들어, 실시간성이 보장되어야 하며, 높은 TPS (Transaction Per Second)가 요구되는 시스템에서는 강력한 알고리즘을 사용하기에는 큰 비용이 요구된다.

따라서 보안 레벨과 실용성에 맞는 적절한 암호화 적용이 필요하다.



암호화를 실제로 사용하기 위해서는

1. DBMS에서 제공하는 알고리즘 사용

2. (Application 또는 Server Side에서) Library 사용

3. 직접 구현 (올ㅋ)

의 방법이 있을 것이다.


상황별로 차이가 있겠지만, 

1번의 경우에는 데이터 저장,

2번의 경우에는 네트웍 구간에서의 적용이 주된 목적일 것이다.



앞 이야기가 길었는데, 제목과 같이 1번에 해당하는 암호화 방식을 '간단한' 방식으로 소개한다.



1. MD5

?
1
SELECT MD5('ABCDE');


허무할 정도로 간단하다.

다음 것도 그렇다.


2. SHA2

SHA256

?
1
SELECT SHA2('ABCDE', 256);


SHA 512

?
1
SELECT SHA2('ABCDE', 512);


3. AES128

MariaDB에서는 기본적으로 AES128 암호화 방식을 지원한다. Rijndael 이라는 수학자가 제시한 알고리즘을 사용하고 있으므로, Rijndael의 이름을 가진 라이브러리를 사용하는 경우가 많다.

AES도 두가지 종류가 있는데, ECB와 CBC 방식이다.

CBC 방식은 IV (initialization vector)라는 값을 사용한다는 차이가 있다.

(MariaDB에서 제공하는 방식은 ECB 이다.)

앞의 두가지 방식은 단방향 암호화이며, AES128은 양방향 (복호화가 가능한) 암호화이다.


앞에 입력한 것이 암/복호화 대상 String 이며, 뒤에 있는것이 암/복호화에 사용되는 Key 이다. (Key는 보관을 잘 해야겠지)

-암호화

?
1
SELECT HEX(AES_ENCRYPT('ABCDE', 'ENCRYPTKEY'));

-복호화

?
1
SELECT CAST(AES_DECRYPT(UNHEX('F1A4E3DE47FAA99A3FA067F58CD67DC6'), 'ENCRYPTKEY') AS CHAR) ;



저작자표시 비영리 동일조건

'IT > Programming' 카테고리의 다른 글

MariaDB에서 쿼리를 이용한 파일 생성  (0) 2016.12.18
MariaDB의 EventScheduler 사용  (0) 2016.12.08
일정 주기마다 백업 테이블 생성/삭제 Procedure  (0) 2016.12.08
MariaDB에서 StoredProcedure를 활용한 암호화 인증  (0) 2016.11.25
Bootstrap 활용한 Stopwatch 예제 (Plank 운동을 위하여)  (2) 2016.11.22


최근 살이 너무 많이 쪄서, 운동을 해야겠다고 생각을 했다.

하지만 퇴근하면 8~9시가 되고, 조금만 밍기적 거리면 잘 시간이 되어 운동할 시간이 없었다.


운동을 찾아보니 Plank 운동이라고, 하루에 몇분만 투자하면 살이 쏙 빠진다는 홈쇼핑적 글들을 많이 보았다.

내가 해야 할 운동이다 생각하고 실제로 좀 따라해봤다.



.... 생각보다 너무 힘들었다.

 포기할까 싶었는데, 조금씩 시간을 나눠서 횟수와 시간을 늘려나가면 된다는 말에 운동 방법을 그렇게 해보기로 했다.


하지만, 항상 공부하기 전에는 책상 정리를 하듯이, 나에게 맞는 앱을 검색해도 너무 많은 기능들이 있길래 그냥 내가 만들기로 했다.

가장 쉽고 빠르게 만들 수 있는 것은 당연히 웹이고, 그걸 더 빠르게 만들기 위해서 Bootstrap을 활용해서 UI를 구성했다.


우선 Plank운동의 횟수와 각각의 lab time을 체크하기로 했다.

Start 버튼과 Pause 버튼은 toggle이 되어야 하고, Reset 버튼도 추가했다.


각각의 기록들은 누적되어 쌓이고, 개별 item별로 삭제도 가능하여야 한다.

이러한 기준으로 HTML, JS, CSS 파일 3개로 구성했으며, 소스는 아래와 같다.

Bootstrap을 사용해보는 것이 목적이었기 때문에, JS는 웹에서 검색하여 여러가지 중, 적당한 것으로 사용했다.





plankRecord.html

 -주석 처리한 부분은 나중에 추가로 개발할 수도 있어서 UI만 추가했었던 부분이다.

 -사용자 로그인, 그리고 데이터 저장을 위한 부분이다. (나중에 책상정리가 더 필요하면 개발 예정)


?
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
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
 
<title>Plank</title>
 
<link rel="stylesheet"
    href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/custom.css" />
<!-- Jquery -->
<script src="https://code.jquery.com/jquery-2.2.4.min.js"
    integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
    crossorigin="anonymous"></script>
<script
    src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="js/stopwatch.js"></script>
 
 
<script type="text/javascript">
    function removeSelf(itemId) {
        var item = document.getElementById("recordNo" + itemId);
        item.remove();
    }
 
    function saveRecord() {
 
        var recordlist = [];
 
        // loop trough the li
        $("ul.list-group > li").each(function() {
            //push element data to the array
            recordlist.push({
                "userId" : "tempId",
                "seq" : $(this).attr('id'),
                "time" : $(this).attr('value')
            });
        });
/*      $.ajax({
            type : "POST",
            url : "/user",
            data : recordlist,
            success : function(jsonResult) {
                $('#userResult').val(jsonResult.USER_NAME);
            }
        }); */
    }
</script>
 
 
</head>
 
 
    <div class="container ">
        <div class="row">
            <nav class="navbar navbar-inverse">
<!--                 <div class="container-fluid">
                    <div class="navbar-header">
                        <a class="navbar-brand " href="#"><h1
                                class="glyphicon glyphicon-align-justify white" /></a>
                    </div>
                    <ul class="nav navbar-nav">
                        <li class="active"><a href="#">Home</a></li>
                        <li><a href="#">Page 1</a></li>
                        <li><a href="#">Page 2</a></li>
                        <li><a href="#">Page 3</a></li>
                    </ul>
                </div> -->
            </nav>
        </div>
 
        <div id="time" class="row ">
            <div class="col-sm-4  col-xs-4  "></div>
            <div class="col-sm-8  col-xs-8 ">
                <h1>
                    <!-- <span id="hours">00</span> : -->
                    <span id="minutes">00</span> : <span id="seconds">00</span> :: <span
                        id="milliseconds">00</span>
                </h1>
            </div>
        </div>
 
        <div class="row">
            <div class="col-sm-4 col-xs-3 "></div>
            <div class="col-sm-2 col-xs-3">
                <span id="start_pause_resume"
                    class="start glyphicon glyphicon-play h100" />
            </div>
            <div class="col-sm-2 col-xs-3">
                <span id="reset" class=" reset glyphicon glyphicon-repeat h100" />
            </div>
            <div class="col-sm-4 col-xs-3"></div>
        </div>
 
        <div class="spacer"></div>
 
<!--         <div class=" row h50">
            <span class="col-sm-10 col-xs-10"></span> <span id="saveRecord"
                class="col-sm-2 col-xs-2 glyphicon glyphicon-floppy-disk pull-right h40"
                onclick="saveRecord()"></span>
        </div> -->
 
        <div class="spacer"></div>
 
        <div class="row container-fluid pre-scrollable" id="recordDiv">
            <ul class="list-group" id="record">
            </ul>
        </div>
 
 
    </div>


stopwatch.js
 -해당 소스는 http://jsfiddle.net/rdesai/8qmyg/15/ 에서 참조하였으며, 일정 부분 수정하였음


?
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
$(function() {
     
    var hours = minutes = seconds = milliseconds = 0;
    var prev_hours = prev_minutes = prev_seconds = prev_milliseconds = undefined;
    var timeUpdate;
     
    // Start/Pause/Resume button onClick
    $("#start_pause_resume").click(function(){
        // Start button
        if($(this).hasClass("start")){  // check button label      
            $(this).attr("class","pause glyphicon glyphicon-pause h100");
            updateTime(0,0,0,0);
        }
        // Pause button
        else if($(this).hasClass("pause")){
            $("#record").prepend("<li id='recordNo"+timeUpdate+"' value='"+minutes+":"+seconds+":"+milliseconds+ " '"+
                    "class='list-group-item'> #"+ timeUpdate +"    <span class='glyphicon glyphicon-time'></span>  " + minutes+ " : " + seconds+" : "+milliseconds+ "" +
                    "<span class='glyphicon glyphicon-remove pull-right ' onclick='removeSelf("+timeUpdate+")'></span></li>");
            $(this).attr("class","start glyphicon glyphicon-play h100");
             
            clearInterval(timeUpdate);
             
        }
 
    });
     
    // Reset button onClick
    $("#reset").click(function(){
        if(timeUpdate) clearInterval(timeUpdate);
        setStopwatch(0,0,0,0);
       
    });
     
    // Update time in stopwatch periodically - every 25ms
    function updateTime(prev_hours, prev_minutes, prev_seconds, prev_milliseconds){
        var startTime = new Date();    // fetch current time
         
        timeUpdate = setInterval(function () {
            // calculate the time elapsed in milliseconds
            var timeElapsed = new Date().getTime() - startTime.getTime();  
 
             
            // calculate hours               
            hours = parseInt(timeElapsed / 1000 / 60 / 60) + prev_hours;
             
            // calculate minutes
            minutes = parseInt(timeElapsed / 1000 / 60) + prev_minutes;
            if (minutes > 60) minutes %= 60;
             
            // calculate seconds
            seconds = parseInt(timeElapsed / 1000) + prev_seconds;
            if (seconds > 60) seconds %= 60;
             
            // calculate milliseconds
            milliseconds = timeElapsed + prev_milliseconds;
            if (milliseconds > 1000) milliseconds %= 1000;
             
            // set the stopwatch
            setStopwatch(hours, minutes, seconds, milliseconds);
             
        }, 25); // update time in stopwatch after every 25ms
         
    }
     
    // Set the time in stopwatch
    function setStopwatch(hours, minutes, seconds, milliseconds){
        /*$("#hours").html(prependZero(hours, 2));*/
        $("#minutes").html(prependZero(minutes, 2));
        $("#seconds").html(prependZero(seconds, 2));
        $("#milliseconds").html(prependZero(milliseconds, 2));
    }
     
    // Prepend zeros to the digits in stopwatch
    function prependZero(time, length) {
        time = new String(time);    // stringify time
        return new Array(Math.max(length - time.length + 1, 0)).join("0") + time;
    }
});


custom.css


?
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
.white, .white a {
    color: #fff;
}
.spacer {
    margin: 0;
    padding: 0;
    height: 20px;
}
 
.spacer {
    margin: 0;
    padding: 0;
    height: 20px;
}
 
.h100 {
    font-size: 100px;
}
.h40 {
    font-size: 40px;
}
 
 
.glyphicon-remove:hover {
    cursor: pointer
}
.glyphicon-remove:active {
    color: gray
}
 
 
#start_pause_resume:hover {
    cursor: pointer
}
#start_pause_resume:active {
    color: gray
}
#reset:hover {
    cursor: pointer
}
#reset:active {
    color: gray
}




전체 소스 : 

plankRecord.zip




저작자표시 비영리 동일조건

'IT > Programming' 카테고리의 다른 글

MariaDB에서 쿼리를 이용한 파일 생성  (0) 2016.12.18
MariaDB의 EventScheduler 사용  (0) 2016.12.08
일정 주기마다 백업 테이블 생성/삭제 Procedure  (0) 2016.12.08
MariaDB에서 StoredProcedure를 활용한 암호화 인증  (0) 2016.11.25
MariaDB를 활용한 암호화  (0) 2016.11.23

+ Recent posts

티스토리툴바