-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
98 lines (80 loc) · 4.13 KB
/
index.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
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
87
88
89
90
91
92
93
94
95
96
97
98
<!DOCTYPE html>
<html lang="pt">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Animated Number Counter</title>
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism-okaidia.min.css" rel="stylesheet" />
<link rel="stylesheet" href="styles.css">
</head>
<body class="flex flex-col items-center justify-center h-screen bg-gray-100">
<div class="counter text-5xl font-bold mb-9" id="counter">0</div>
<div class="flex items-center justify-center w-96">
<div class="w-full space-y-6">
<div class="flex space-x-4">
<div class="floating-label-group w-1/2">
<input type="number" id="startValue" placeholder=" " class="floating-label-input focus:ring-indigo-500 focus:border-indigo-500 block w-full h-16 shadow-sm sm:text-sm border-gray-300 rounded-md">
<label for="startValue" class="floating-label-label">start value</label>
</div>
<div class="floating-label-group w-1/2">
<input type="number" id="endValue" placeholder=" " class="floating-label-input focus:ring-indigo-500 focus:border-indigo-500 block w-full h-16 shadow-sm sm:text-sm border-gray-300 rounded-md">
<label for="endValue" class="floating-label-label">end value</label>
</div>
</div>
<div class="floating-label-group floating-label-input block w-full h-16 shadow-sm sm:text-sm border-gray-300 rounded-md">
<div class="range-labels">
<span class="range-label" id="minValue">duration</span>
<span class="range-label" id="maxValue">2000</span>
</div>
<input type="range" id="durationRange" min="500" max="5000" step="100" value="2000" class="range-input">
</div>
<button id="updateButton" class="bg-indigo-500 text-white px-4 py-2 rounded-md mt-4">Atualizar</button>
</div>
</div>
<div class="code-container flex justify-around space-x-4 mt-9 w-full px-4">
<pre class="bg-gray-800 text-white p-4 rounded h-80 overflow-auto w-full sm:w-1/2">
<code class="language-js">
document.addEventListener("DOMContentLoaded", function() {
const counter = document.getElementById('counter');
const durationRange = document.getElementById('durationRange');
const startValueInput = document.getElementById('startValue');
const endValueInput = document.getElementById('endValue');
const maxValue = document.getElementById('maxValue');
const updateButton = document.getElementById('updateButton');
function updateDurationDisplay() {
const duration = parseInt(durationRange.value);
maxValue.textContent = duration;
}
function updateDisplay() {
const startValue = parseInt(startValueInput.value) || 0;
const endValue = parseInt(endValueInput.value) || 100;
const duration = parseInt(durationRange.value);
animateCounter(startValue, endValue, duration);
}
function animateCounter(start, end, duration) {
let startTime = null;
function animation(currentTime) {
if (startTime === null) startTime = currentTime;
const progress = currentTime - startTime;
const currentNumber = Math.min(Math.floor((progress / duration) * (end - start) + start), end);
counter.textContent = currentNumber;
if (progress < duration) {
requestAnimationFrame(animation);
}
}
requestAnimationFrame(animation);
}
durationRange.addEventListener('input', updateDurationDisplay);
updateButton.addEventListener('click', updateDisplay);
// Inicializa o valor do maxValue ao carregar a página
updateDurationDisplay();
});
</code>
</pre>
</div>
<script src="script.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/prism.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-javascript.min.js"></script>
</body>
</html>