javascript制作计时器
首先我们应该先想清楚计时器的特点 点击开始按钮时，开始计时 点击暂停按钮时，计时暂停 点击清除按钮时，计时器清零 然后我们开始写样式
HTML+css部分
<body>
<div class="container">
<div class="timer">
<svg width="0" height="0" viexBox="0 0 0 0">
<defs>
<g id="h">
<path d="M20 0 A20 20 0 0 0 20 40 M20 0 L180 0 L180 40 L20 40 M180 0 A20 20 0 0 1 180 40"/>
</g>
</defs>
<defs>
<g id="v">
<path d="M0 20 A20 20 0 0 1 40 20 M0 20 L0 200 L40 200 L40 20 M0 200 A20 20 0 0 0 40 200"/>
</g>
</defs>
</svg>
<div class="sec">
<svg id="sec1" class="num-0" width="130" height="250" viewBox="0 0 260 520">
<use class="segment a" xlink:href="#h" x="30" y="0"/>
<use class="segment b" xlink:href="#v" x="220" y="30"/>
<use class="segment c" xlink:href="#v" x="220" y="270"/>
<use class="segment d" xlink:href="#h" x="30" y="480"/>
<use class="segment e" xlink:href="#v" x="0" y="270"/>
<use class="segment f" xlink:href="#v" x="0" y="30"/>
<use class="segment g" xlink:href="#h" x="30" y="240"/>
</svg>
<svg id="sec2" class="num-0" width="130" height="250" viewBox="0 0 260 520">
<use class="segment a" xlink:href="#h" x="30" y="0"/>
<use class="segment b" xlink:href="#v" x="220" y="30"/>
<use class="segment c" xlink:href="#v" x="220" y="270"/>
<use class="segment d" xlink:href="#h" x="30" y="480"/>
<use class="segment e" xlink:href="#v" x="0" y="270"/>
<use class="segment f" xlink:href="#v" x="0" y="30"/>
<use class="segment g" xlink:href="#h" x="30" y="240"/>
</svg>
<svg id="sec3" class="num-0" width="130" height="250" viewBox="0 0 260 520">
<use class="segment a" xlink:href="#h" x="30" y="0"/>
<use class="segment b" xlink:href="#v" x="220" y="30"/>
<use class="segment c" xlink:href="#v" x="220" y="270"/>
<use class="segment d" xlink:href="#h" x="30" y="480"/>
<use class="segment e" xlink:href="#v" x="0" y="270"/>
<use class="segment f" xlink:href="#v" x="0" y="30"/>
<use class="segment g" xlink:href="#h" x="30" y="240"/>
</svg>
</div>
<div class="csec">
<svg id="csec1" class="num-0" width="130" height="250" viewBox="0 0 260 520">
<use class="segment a" xlink:href="#h" x="30" y="0"/>
<use class="segment b" xlink:href="#v" x="220" y="30"/>
<use class="segment c" xlink:href="#v" x="220" y="270"/>
<use class="segment d" xlink:href="#h" x="30" y="480"/>
<use class="segment e" xlink:href="#v" x="0" y="270"/>
<use class="segment f" xlink:href="#v" x="0" y="30"/>
<use class="segment g" xlink:href="#h" x="30" y="240"/>
</svg>
<svg id="csec2" class="num-0" width="130" height="250" viewBox="0 0 260 520">
<use class="segment a" xlink:href="#h" x="30" y="0"/>
<use class="segment b" xlink:href="#v" x="220" y="30"/>
<use class="segment c" xlink:href="#v" x="220" y="270"/>
<use class="segment d" xlink:href="#h" x="30" y="480"/>
<use class="segment e" xlink:href="#v" x="0" y="270"/>
<use class="segment f" xlink:href="#v" x="0" y="30"/>
<use class="segment g" xlink:href="#h" x="30" y="240"/>
</svg>
</div>
</div>
<div class="buttons">
<button id="start">Start
</button>
<button id="stop">Stop
</button>
<button id="reset">Reset
</button>
</div>
</div>
</body>
*{
margin: 0
;
padding: 0
;
box-sizing: border-box
;
}
.timer{
display: flex
;
justify-content: center
;
}
.timer div{
display: inline-block
;
margin: 40px
;
}
.sec{
position: relative
;
}
.sec svg , .csec svg{
display: inline-block
;
margin: 20px
;
}
.sec::before,
.sec::after{
content: "";
position: absolute
;
width: 40px
;
height: 40px
;
border-radius: 50%
;
top: 60px
;
right:-60px
;
background-color: red
;
}
.sec::before{
top: 160px
;
}
.segment{
fill: rgb(255,0,0,0.1
);
}
.buttons{
display: flex
;
justify-content: center
;
}
.buttons button{
padding: 10px 20px
;
margin: 60px
;
font-size: 1.2em
;
cursor: pointer
;
}
.num-0 .a,
.num-0 .b,
.num-0 .c,
.num-0 .d,
.num-0 .e,
.num-0 .f{
fill: red
;
}
.num-1 .b,
.num-1 .c{
fill: red
;
}
.num-2 .a,
.num-2 .b,
.num-2 .d,
.num-2 .e,
.num-2 .g{
fill: red
;
}
.num-3 .a,
.num-3 .b,
.num-3 .c,
.num-3 .d,
.num-3 .g{
fill: red
;
}
.num-4 .b,
.num-4 .c,
.num-4 .f,
.num-4 .g{
fill: red
;
}
.num-5 .a,
.num-5 .c,
.num-5 .d,
.num-5 .f,
.num-5 .g{
fill: red
;
}
.num-6 .a,
.num-6 .c,
.num-6 .d,
.num-6 .e,
.num-6 .f,
.num-6 .g{
fill: red
;
}
.num-7 .a,
.num-7 .b,
.num-7 .c{
fill: red
;
}
.num-8 .a,
.num-8 .b,
.num-8 .c,
.num-8 .d,
.num-8 .e,
.num-8 .f,
.num-8 .g{
fill: red
;
}
.num-9 .a,
.num-9 .b,
.num-9 .c,
.num-9 .d,
.num-9 .f,
.num-9 .g{
fill: red
;
}
html和css的样式写完大致就是图片的样子，然后我们开始写javascript部分
Javascript部分
<script
>
let sec
=0,csec
=0,intv
=null;
document
.getElementById("start").addEventListener('click',e
=>{
start_timer();
})
document
.getElementById("stop").addEventListener('click',e
=>{
stop_timer();
})
document
.getElementById("reset").addEventListener('click',e
=>{
reset_timer();
})
function start_timer(){
if(intv
) return;
intv
=setInterval(counting
,10);
}
function stop_timer(){
clearInterval(intv
);
intv
=null;
}
function reset_timer(){
stop_timer();
sec
=0;
csec
=0;
set_time(0,0);
}
function counting(){
csec
++;
if(csec
>99){
sec
++;
csec
=0;
}
if(sec
>999){
sec
=0;
csec
=0;
}
set_time(sec
,csec
);
}
function set_time(sec
,csec
){
psec
=sec
.pad(3);
pcsec
=csec
.pad(2);
document
.getElementById("sec1").setAttribute('class','num-'+psec
.substr(0,1));
document
.getElementById("sec2").setAttribute('class','num-'+psec
.substr(1,1));
document
.getElementById("sec3").setAttribute('class','num-'+psec
.substr(2,1));
document
.getElementById("csec2").setAttribute('class','num-'+pcsec
.substr(1,1));
document
.getElementById("csec1").setAttribute('class','num-'+pcsec
.substr(0,1));
}
Number
.prototype
.pad=function(size
){
let a
=String(this);
while(a
.length
<size
){
a
="0"+a
;
}
return a
;
}
</script
>
然后我们的定时器就完成了 第一次写博客，可能有很多地方写的不对，希望大家可以包容一下 再此谢谢大家啦！
