⏱️스톱워치 구축 | CSS 및 자바스크립트🚀

21924 단어 tutorialwebdevbeginnersjavascript
최신 구문을 사용하여 HTML, CSS 및 JavaScript로 스톱워치를 만드는 방법을 알아보세요. 클릭 시 시작, 중지 및 재설정 이벤트 리스너를 사용하는 타이머 스톱워치입니다.



이 첫 번째 부분에서는 HTML 및 CSS를 사용하여 스톱워치의 사용자 인터페이스를 빌드합니다.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Stopwatch JavaScript</title>
  <link rel="stylesheet" href="style.css">
  <script defer src="app.js"></script>
  </link>
</head>

<body>

  <div class="stopwatch">
    <h1>Stopwatch <span class="gold">JavaScript</span></h1>

    <div class="circle">
      <span class="time" id="display">00:00:00</span>
    </div>

    <div class="controls">
      <button>
        <ion-icon class="play" name="play-outline"></ion-icon>
        <ion-icon class="pause" name="pause-outline"></ion-icon>
      </button>
      <button>
        <ion-icon class="reset" name="refresh-outline"></ion-icon>
      </button>
    </div>

  </div>

  <script type="module" src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.esm.js"></script>

</body>

</html>


CSS

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap');

body {
    background-color: #31394c;
    color: #fff;
}

h1 {
    font-size: 48px;
    font-family: 'Poppins', sans-serif;
    font-weight: 200;
    text-align: center;
    line-height: 59px;
    padding: 0 64px;
    margin: 0;
}

.stopwatch {
    margin-top: 15rem;
    display: grid;
    justify-items: center;
    grid-row-gap: 23px;
    width: 100%;
    padding-top: 25px;
}

.gold {
    font-weight: 900;
    color: #f2c94c;
    text-shadow: 0 0 0px #fff, 0 0 50px #f2c94c;
}

.time {
    font-family: sans-serif, monospace;
    font-weight: 300;
    font-size: 48px;
}

.circle {
    margin-top: 5rem;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 2px solid;
    width: 270px;
    height: 270px;
    border-radius: 50%;
    font-family: sans-serif;
}

.controls {
    display: flex;
    justify-content: space-between;
    width: 178px;
}

button {
    background: transparent;
    padding: 0;
    border: none;
    margin: 0;
    outline: none;
    font-size: 50px;
    color: #fff;
    cursor: pointer;
    transition: all 0.5s ease;
}

button:active {
    transform: scale(.90);  
}
button:hover {
    color: #f2c94c;
}

.play {
    display: block;
}

.pause {
    display: none;
}


그런 다음 JavaScript로 사용자 인터페이스가 작동하도록 합니다(스톱워치가 작동함).

//Create Event Listeners

const playButton = document.querySelector('.play')
const pauseButton = document.querySelector('.pause')
const resetButton = document.querySelector('.reset')

playButton.addEventListener('click', start)
pauseButton.addEventListener('click', pause)
resetButton.addEventListener('click', reset)

//Declare variable to use in our Functions Below
let startTime
let elapsedTime = 0
let timerInterval

//Convert time to a format of hours, minutes, and milliseconds

function  timeToString(time){
    let diffInHrs = time / 3600000
    let hh = Math.floor(diffInHrs)

    let diffInMin = (diffInHrs - hh) * 60
    let mm = Math.floor(diffInMin)

    let diffInSec = (diffInMin - mm) * 60
    let ss = Math.floor(diffInSec)

    let diffInMs = (diffInSec - ss) * 100
    let ms = Math.floor(diffInMs)

    let formattedMM = mm.toString().padStart(2, '0')
    let formattedSS = ss.toString().padStart(2, '0')
    let formattedMS = ms.toString().padStart(2, '0')

    return `${formattedMM}:${formattedSS}:${formattedMS}`

}

function  showButton(buttonKey){
    const buttonToShow = buttonKey === 'play' ? playButton : pauseButton
    const buttonToHide = buttonKey === 'play' ? pauseButton :playButton
    buttonToShow.style.display = 'block'
    buttonToHide.style.display = 'none'
}

//Create Function to Modify innerHTML
function print(txt){
    document.getElementById('display').innerHTML = txt
}

// Create start, pause and reset functions

function start(){
    startTime = Date.now() - elapsedTime
    timerInterval = setInterval(function printTime(){
        elapsedTime = Date.now() - startTime
        print(timeToString(elapsedTime))
    },10)
    showButton('pause')
}

function pause(){
    clearInterval(timerInterval)
    showButton('play')
}

function reset(){
    clearInterval(timerInterval)
    print('00:00:00')
    elapsedTime = 0
    showButton('play')
}


🛴 💡프로젝트 기반 학습으로 개발 기술을 향상시키고 싶다면 팔로우하세요:
👉유튜브: https://bit.ly/WDevMadeEasy
👉페이스북: https://bit.ly/3cp2S5W
👉인스타그램(신규): https://bit.ly/3ura3TW
ASP.NET Core 앱에서 새로 고침 토큰 사용
C++ cout(chiqarish) 연산자

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage