今天要来分享我看 Youtube 影片做出来的 timer,
照惯例先放影片连结,
用他里面提到的观念延伸做出我这个 timer。
HTML
<div class="timer">
<div class="time">
<span id="minute">00</span>:<span id="second">00</span>
</div>
<svg width="300" height="300">
<circle id="circle1" cx="150" cy="150" r="120"></circle>
<circle id="circle2" cx="150" cy="150" r="120"></circle>
</svg>
</div>
<button id="button">START</button>
<button id="reset">RESET</button>
CSS
@import url('https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&display=swap');
*{
margin: 0;
padding: 0;
list-style:none;
line-height: 1;
box-sizing: border-box;
}
body{
background-color: #1b262c;
text-align:center;
font-family: 'Space Mono', monospace;
}
.timer{
position: relative;
}
.time {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%)
}
.time{
font-size: 40px;
color: #fff;
}
svg{
display: inline-block;
vertical-align: middle;
}
circle{
stroke-width: 5px;
fill: transparent;
stroke-linecap: round;
}
#circle1{
stroke: rgba(0,0,0, .4);
}
#circle2{
stroke:#bbe1fa;
transition: 1s linear;
}
button{
vertical-align: middle;
width: 80px;
padding: 10px;
margin: 0;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
font-family: 'Space Mono', monospace;
}
button:focus{
outline:none;
}
button:active{
box-shadow: inset 0px 0px 1px 2px #1b262c;
}
#button{
background-color: #0f4c75;
}
#reset{
background-color: #3282b8;
}
JS
const circle = document.getElementById('circle2');
const button = document.getElementById('button');
const reset = document.getElementById('reset')
const length = circle.getTotalLength();
const minute = document.getElementById('minute');
const second = document.getElementById('second');
circle.style.strokeDasharray = length;
circle.style.strokeDashoffset = length;
let count = 0;
let timer;
let isPlaying = false;
button.addEventListener('click',
function() {
isPlaying = !isPlaying;
if(isPlaying){
startTimer();
}else{
stopTimer();
}
}
);
reset.addEventListener('click', resetTimer);
function startTimer(){
button.textContent = "STOP";
timer = setInterval(function(){
count++;
minute.textContent = (Math.floor(count / 60) < 10 ? '0' : '') + Math.floor(count / 60) ;
second.textContent = (count % 60 < 10 ? '0' : '') + count % 60 ;
circle.style.strokeDashoffset = length - (count / 60) * length;
},1000)
}
function stopTimer(){
console.log('stopTimer');
clearInterval(timer);
button.textContent = "START";
}
function resetTimer(){
stopTimer();
count = 0;
minute.textContent = '00';
second.textContent = '00'
circle.style.strokeDashoffset = length;
isPlaying = false;
}
也直接附上我的 codepen,
今天就先到这里啦~
我们明天见。
>>: Day28--Bootstrap&CSS文字排版&样式(6)
Bookinfo可以在sample这个folder里面找到,官方是使用这个专案demo istio的...
Youtube连结:https://bit.ly/3zoWgOx GCP BigQuery 提供我...
网域名称申请,严格说起来就是在想办法获取最後一个点之後的最後一部分。目前大多数台湾品牌网站,都以.c...
【前言】 本系列为个人前端学习之路的学习笔记,在过往的学习过程中累积了很多笔记,如今想藉着IT邦帮忙...
昨天我们针对声音讯号的基本处理做了一些简单的介绍,知道了声音是一连串随着时间变化的讯号所组成的,同时...