html
html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!DOCTYPE html>
<html>
<head>
<audio id="audio" autoplay loop>
<source src= "https://dl-web.dropbox.com/s/so2l579qs7alolb/Stopwatch.mp3">
</audio>
<title>Stopwatch heart</title>
</head>
<body>
<figure class="heart">
<div id="circle1"></div>
<div id="circle2"></div>
<div id="rect"></div>
</figure>
<div id="stopwatch">
<center class="timer">
<h2 id="h2">
00:00<small>.00</small>
</h2>
<ol id="ol"></ol>
<input type="button" id="bStart" value="start" onclick="start()">
<input type="button" id="bSave" value="save" onclick="save()">
<input type="button" id="bStop" value="stop" onclick="stop()">
<input type="button" id="bRestart" value="restart" onclick="restart()">
</center>
</div>
</body>
</html>
Enter to Rename, Shift+Enter to Preview
css
css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
* {
margin:0;
padding:0;
}
html,body {overflow: hidden;}
body {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
background-color: darkred;
}
#stopwatch {position: absolute;}
h2 {
border: 2px inset red;
padding: 0 4.5px;
color: aqua;
background-color: grey;
}
#ol {
position: absolute;
background-color: rgba(100, 100, 100, 0.26);
border: .1px solid black;
border-radius: 0 0 1em 1em;
padding: 2px 11px 5px 30px;
max-height: 55px;
overflow: scroll;
Enter to Rename, Shift+Enter to Preview
js
js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
let m = s = ms = 0, time;
function start(){
audio.play();
bStart.style.display = "none";
bSave.style.display = "block";
bStop.style.display = "block";
if(!time) time=setInterval(str,10);
function str(){
show(), ms++;
if(ms >= 100) ms = 0, s++;
if(s >= 60) s = 0, m++;
}
}
function save(){
li = document.createElement('li');
li.innerHTML = h2.innerHTML;
ol.appendChild(li);
ol.style.display = "block";
}
function show(){
h2.innerHTML = `${
m < 10 ?'0'+m :m }:${
s < 10 ?'0'+s :s }<small>.${
ms < 10 ?'0'+ms :ms}</small>`;
}
function stop(){
stopTime();
audio.pause();
Enter to Rename, Shift+Enter to Preview
BROWSER
Console
Run