-
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
51 lines (47 loc) · 1.38 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
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Input type=duration</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="input-duration-element.js" type="module"></script>
<link rel="stylesheet" href="https://unpkg.com/muan.css"/>
<style>
</style>
</head>
<body>
<h1><code><input-duration></code></h1>
<form>
<fieldset>
<label for="duration">Duration (max 180s)</label>
<input-duration id="duration" name="duration" max="180"></input-duration>
<button type="submit">Submit</button>
</fieldset>
</form>
<form>
<fieldset>
<label for="default">Duration (default 123s)</label>
<input-duration id="default" name="duration" value="123"></input-duration>
<button type="submit">Submit</button>
</fieldset>
</form>
<form>
<fieldset>
<label for="dividers">Duration (custom dividers)</label>
<input-duration id="dividers" name="duration">
<span slot="hour">時</span>
<span slot="minute">分</span>
<span slot="second">秒</span>
</input-duration>
<button type="submit">Submit</button>
</fieldset>
</form>
<script>
for (const input of document.querySelectorAll('input-duration')) {
input.addEventListener('change', (event) => {
console.log(`Change event: ${event.currentTarget.value}`)
})
}
</script>
</body>
</html>