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>
다음 cssstyle.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 파일에서 읽어 주십시오.
Reference
이 문제에 관하여(javascript 디지털 카운트다운 타이머), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/ryomaDsakamoto/items/dd9fa39601a4cd1a6296텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)