본문 바로가기

자바스크립트/기타등등

네이버 스톱워치 같은 스톱워치를 블로그에 달아보자

반응형
0:00:00:00



<style></style>태그를 대충 만들어서 핸드폰에서는 제대로 화면 구성이 셋팅이 안되어 있습니다. 휴대폰에서는 좀 허접하게 나올 것입니다. 공부하는 의미로 그냥 올립니다. 휴대폰에서 제대로 나오게 할려면 미디어쿼리를 사용하시던지 margin이나 font size를 수정하면 될 것 같습니다.

 

오늘은 html, css, javascript를 이용해서 네이버 스톱워치 같은 스톱워치를 티스토리 블로그에 한번 달아 봤습니다. 자바스크립트 소스는 공개되어 있는 소스를 약간 수정해서 사용했습니다. 워드프레스에도 달아 보고 이번에 티스토리 블로그에도 한번 달아봤는데 잘 적용이 되네요.


아래에 html, css, javascript 소스를 올립니다. 블로그에 적용하는 방법은 간단합니다. 블로그 포스팅할 때 Html 편집 모드로 들어가서 아래 소스코드를 그냥 붙여 넣기 하시면 됩니다. 심심해서 한번 해봤는데 필요하신 분은 한번 해보세요. 이것 저것 숫자도 바꾸어 보면 재미있습니다. 



<style>
    button {
        font-size: 30px;
        width: 140px;
        height: 60px;
        border-radius: 5px;
    }
 
  #output {
              font-size : 4.0em;
              margin-left : 40px;
    }
  
  #startPause {
        background-color: green;
        border-color: green;
    }
 
  #reset {
        background-color: gray;
        border-color: gray;
    }
 
  .containerMrs {
        background-color: #eeeeee;
        border-radius: 5px;
        margin: auto;
        margin-top: 30px;
        margin-bottom : 20px;
        width: 400px;
        height: 200px;
    }

    #controls {
        margin-left: 50px;
        margin-top: 10px;
        width: 310px;
        height:70px;
    }
</style>

<script>
var time = 0;
var running = 0;
function startPause(){
    if(running == 0){
        running = 1;
        increment();
    document.getElementById("start").innerHTML = "일시중지";
    document.getElementById("startPause").style.backgroundColor = "red";   
    document.getElementById("startPause").style.borderColor = "red";
    }
    else{
        running = 0;
    document.getElementById("start").innerHTML = "계속"; 
    document.getElementById("startPause").style.backgroundColor = "green"; 
    document.getElementById("startPause").style.borderColor = "green";
    }
}
function reset(){
    running = 0;
    time = 0;
    document.getElementById("start").innerHTML = "시작";
    document.getElementById("output").innerHTML = "0:00:00:00";
    document.getElementById("startPause").style.backgroundColor = "green"; 
    document.getElementById("startPause").style.borderColor = "green";
}
function increment(){
    if(running == 1){
        setTimeout(function(){
            time++;
            var mins = Math.floor(time/10/60);
            var secs = Math.floor(time/10 % 60);
            var hours = Math.floor(time/10/60/60);
            var tenths = time % 10;
            if(mins < 10){
                mins = "0" + mins;
            }
            if(secs < 10){
                secs = "0" + secs;
            }
            document.getElementById("output").innerHTML = hours + ":" + mins + ":" + secs + ":" + tenths + "0";
            increment();
        },100)
    }
}
</script>
<div class="containerMrs">
<p id="output"><b>0:00:00:00</b></p>
<div id="controls" align="center">
    <button id="startPause" onclick="startPause()"><b id="start">시작</b></button>
    <button onclick="reset()" id="reset"><b id="reset">리셋</b></button>
</div>
</div>



그럼 즐거운 하루 되세요.




반응형