blob: 17aac812c6fed598c9e640747d8b47179ea923bc (
plain)
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
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
|
<!doctype html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="Berechnet die Preise für Pizza im Verhältnis zum Flächeninhalt. Lieber zwei kleine oder eine große Pizza kaufen?">
<link rel='stylesheet' type='text/css' href="/css/bootstrap.min.css">
<link rel='icon' href="https://iamfabulous.de/favicon.ico">
<title>Beats per Minute</title>
<style>
html {
width: 100%;
}
.main {
margin-top: 1rem;
}
</style>
</head>
<body class="container main text-center">
<span id="countBpm">
<div class="jumbotron">
<h1>Hier klicken um die BPMs zu zählen:</h1>
<h2><span id="showBpm">0</span> BPM</h2>
</div>
<button class="btn btn-primary">Click</button>
</span>
<button id="reset" class="btn btn-secondary">Reset</button>
<script>
function median(values){
if ( values.length === 0 ) {
return 0;
}
values.sort(function(a,b){
return a-b;
});
var half = Math.floor(values.length / 2);
if (values.length % 2) {
return values[half];
}
return (values[half - 1] + values[half]) / 2.0;
}
function reset() {
lastClick = 0;
bpm = [];
document.getElementById("showBpm").innerHTML = 0;
}
function display(bpm) {
/* slice() copies by value, not by reference, so the median() doesn't mess with the array */
document.getElementById("showBpm").innerHTML = Math.round(median(bpm.slice()));
}
window.addEventListener("load",function() {
var lastClick = 0;
var bpm = [];
document.getElementById("countBpm").addEventListener("click", function(e){
var d = new Date();
var t = d.getTime();
var seconds = ( t - lastClick ) / 1000;
if ( 0 != lastClick ) {
if ( seconds > 10 ) {
// reset after 10 seconds delay
reset();
} else {
var _bpm = 60 / seconds
bpm.push( _bpm );
if ( bpm.length > 10 ) {
// keep only last 10 clicks
bpm.shift();
}
display(bpm);
}
}
lastClick = t;
});
document.getElementById("reset").addEventListener("click", function(e){
reset();
})
});
</script>
</body>
|
