js 스톱워치 만들기

html / css/ js를 활용한 간단한 스톱와치이다.

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>simple-stopwatch</title>
    <link href="https://fonts.googleapis.com/css2?family=PT+Sans:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
    <link rel="stylesheet" href="style.css" />
</head>
<body>
    <section id="stopWrap">
        <section class="stop-wrapper text-center">
            <h1>Stopwatch</h1>
            <p id="stop-full-record">
                <span id="minutes">00</span>:<span id="seconds">00</span>:<span id="mseconds">00</span>
            </p>
            <button id="btnStart" class="btn btn-primary">Start</button>
            <button id="btnStop" class="btn btn-primary">Stop</button>
            <button id="btnReset" class="btn btn-primary">Reset</button>
        </section>
        <ul id="stop-record">

        </ul>
    </section>
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
    <script src="app.js"></script>
</body>
</html>

css

body {
    display: flex;
    font-family: 'Open Sans', Arial, Helvetica, Sans-serif, Verdana, Tahoma;
    background-color: #33a9dc;
    background-image: linear-gradient(142deg, #33dcd7, #33c5dc 31%, #33a9dc 65%, #338ddc);
    background-size: 100% 100%;
    height: 100vh;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.stop-wrapper { 
    background:#fff; box-shadow: rgba(117, 113, 113, 0.28) 10px 8px 5px; padding:50px; border:1px solid #f2f2f2; border-radius: 20px; 
}
.stop-wrapper h1 { 
    margin:0; 
}
.stop-wrapper p  { 
    font-size:30px; margin:20px 0; 
}
.stop-wrapper .btn { 
    font-size:1.5rem; 
}

ul {
    padding:0;
    margin:30px 0 0;
}

li {
    list-style: none;
    font-size:1.5rem; 
}

마지막으로 js

var stopFullRecord = document.getElementById("stop-full-record");
var minutes = 00;
var seconds = 00;
var mseconds = 00;
var minutesText = document.getElementById("minutes");
var secondsText = document.getElementById("seconds");
var msecondsText = document.getElementById("mseconds");
var btnStart = document.getElementById('btnStart');
var btnStop = document.getElementById('btnStop');
var btnReset = document.getElementById('btnReset');
var recordUl = document.getElementById('stop-record');
var Interval; 

btnStart.addEventListener('click', function() {
    clearInterval(Interval);
    alert('Timer Start');
    Interval = setInterval(startTimer, 10);
});

btnStop.onclick = function() {
    clearInterval(Interval);
    createRecord();
};

btnReset.onclick = function() {
    clearInterval(Interval);
    alert('Timer Reset');
    mseconds = "00";
    seconds = "00";
    msecondsText.innerHTML = mseconds;
    secondsText.innerHTML = seconds;
    recordUl.innerHTML = "";
};

function createRecord() {
    var node = document.createElement("li");
    var record = stopFullRecord.textContent;
    var textnode = document.createTextNode(record);        
    node.appendChild(textnode);                             
    recordUl.appendChild(node); 
}

function startTimer () {
    mseconds++; 
    if(mseconds < 9){
        msecondsText.innerHTML = "0" + mseconds;
    }
    if (mseconds > 9){
        msecondsText.innerHTML = mseconds;
    } 
    if (mseconds > 99) {
        seconds++;
        secondsText.innerHTML = "0" + seconds;
        mseconds = 0;
        mseconds.innerHTML = "0" + 0;
    }
    if (seconds > 9){
        secondsText.innerHTML = seconds;
    }
    if (seconds > 59){
        minutes++;
        minutesText.innerHTML = "0" + minutesText;
        seconds = 0;
        seconds.innerHTML = "0" + 0;
    }    
}

소스상 특별한것은 없다 꾸준히 활용해보면서 사용해봐야 한다.

'JavaScript > Vanilla JS' 카테고리의 다른 글

String.fromCharCode (0)	2020.11.26
js 카운트다운 (0)	2020.10.22
js 간단한 시계 만들기 (0)	2020.07.16
js es6 연습용 시계 만들기 (0)	2020.06.24
화살표 함수 arrow function 1 (0)	2020.05.05

js 스톱워치 만들기

'JavaScript > Vanilla JS' 카테고리의 다른 글

댓글

이 글 공유하기

티스토리툴바