Bootstrap 활용한 Stopwatch 예제 (Plank 운동을 위하여)

2016. 11. 22. 21:57

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

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

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

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

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

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

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

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

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

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

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

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

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

plankRecord.html

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

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

<title>Plank</title>

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>

stopwatch.js

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

$(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

전체 소스 :

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

KnockKnock

Bootstrap 활용한 Stopwatch 예제 (Plank 운동을 위하여)

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

+ Recent posts

티스토리툴바