javascript 디지털 카운트다운 타이머

14069 단어 HTMLJavaScriptCSS
디지털 감각이 좋은 타이머를 설치했기 때문에 속공으로 공유한다.
성과는 이런 느낌이다.

코드가 이런 느낌이에요.
또한 스타일링은 Bootstrap4 & CSS를 사용했습니다.
bootstrap4 download
index.html
 /* 画面の右下に配置 */
<div class="" style="position:fixed;bottom:-30px;right: -100px;z-index:100;width: 17em">
        <main>
            <!-- 時計 -->
            <div class="clock text-center">
                <!-- 時間 -->
                <div class="numbers">
                    <p class="hours mb-0"></p>
                    <p class="placeholder mb-0">88</p>
                </div>

                <div class="colon">
                    <p class="mb-0">:</p>
                </div>

                <!-- 分 -->
                <div class="numbers">
                    <p class="minutes mb-0"></p>
                    <p class="placeholder mb-0">88</p>
                </div>

                <div class="colon">
                    <p class="mb-0">:</p>
                </div>

                <!-- 秒 -->
                <div class="numbers">
                    <p class="seconds mb-0"></p>
                    <p class="placeholder mb-0">88</p>
                </div>
            </div>
        <!-- タイマーを止めるボタン(機能は実装しません) -->
            <div class="text-center">
                <button type="button" class="btn btn-light font-weight-bold my-0 px-5" >タイマーを止める</button>
            </div>
        </main>
    </div>

다음 css
style.css

* {
    margin: 0;
    padding: 0;
}
main {
    color: #ffffff;
    background-color: #000000;
    font-family: 'digital-7', sans-serif;
}
main {
    transform: translate(-50%,-50%);
    padding: 15px;
    border: solid 5px #ffffff;
}

div.days {
    margin: 0 auto;
    color: #131212;
}

div.days .day {
    display: inline-block;
}

div.days .day p {
    font-size: 12px;
    font-weight: bold;
    font-family: sans-serif;
    text-transform: uppercase;
}

div.clock div{
    display: inline-block;
    position: relative;
}

div.clock div p{
    font-size: 30px;
    position: relative;
    z-index: 100;
}

div.clock .placeholder {
    color: #131212;
    position: absolute;
    top: 0;
    z-index: 50;
}

.light-on {
    color: #ffffff;
}

자바스크립트에서 왔어요.
index.js
// 9:00:00 -> 09:00:00 って一桁の数値の場合に0を付与してあげる関数
function addZero (val){
    return (val <= 9) ? ("0" + val) : val;
}

const second = 1000,
      minute = second * 60,
      hour = minute * 60,
      day = hour * 24;

let countDown = new Date('Nov 10, 2020 00:00:00').getTime(),
    hoge = setInterval(function() {

      let now = new Date().getTime(),
          distance = countDown - now;

        document.getElementsByClassName('hours')[0].innerText = addZero(Math.floor((distance % (day)) / (hour))),
       document.getElementsByClassName('minutes')[0].innerText = addZero(Math.floor((distance % (hour)) / (minute))),
       document.getElementsByClassName('seconds')[0].innerText = addZero(Math.floor((distance % (minute)) / (second)));

      // 時間が0以下になった時の処理
      if (distance < 0) {
        clearInterval(hoge);
      }

    }, second)

그것은 숫자 글꼴을 표현하기 위해 숫자 7 글꼴 을 사용한다.
숫자 7 글꼴에서 임의의 파일을 다운로드하여 html 파일에서 읽어 주십시오.

좋은 웹페이지 즐겨찾기