wmpluto.github.io/beep.html at master · wmpluto/wmpluto.github.io · GitHub

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
99
100
101
102
103
104
105
106
107
108
109
110
111
112
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>循环定时提醒</title>
    <style>
        body {
            font-family: Monospace;
            margin: 20px;
        }
        label, input {
            display: block;
            margin: 10px 0;
        }
		.display {
            font-size: 50vw;
            text-align: center;
	    color: gray;
        }
    </style>
</head>
<body>
    <h1>循环定时提醒</h1>
    <label for="repeatCount">循环次数:</label>
    <input type="number" id="repeatCount" min="1" value="99">

    <label for="intervalTime">间隔时间 (秒):</label>
    <input type="number" id="intervalTime" min="10" max="600" value="30">

    <button id="startButton">开始</button>
    <button id="stopButton" disabled>停止</button>

	<div id="status" style="margin-top: 20px; font-weight: bold;"></div>
	<div class="display" id="display">00</div>

    <script>
        const startButton = document.getElementById('startButton');
        const stopButton = document.getElementById('stopButton');
		const statusDiv = document.getElementById('status');
        let intervalId;
        let currentCount = 0;

        startButton.addEventListener('click', () => {
            const repeatCount = parseInt(document.getElementById('repeatCount').value, 10);
            const intervalTime = parseInt(document.getElementById('intervalTime').value, 10) * 1000;

            if (isNaN(repeatCount) || isNaN(intervalTime) || intervalTime < 1000 || intervalTime > 600000) {
                alert('请输入有效的循环次数和间隔时间（10秒到600秒之间）');
                return;
            }

            currentCount = 0;
            startButton.disabled = true;
            stopButton.disabled = false;

            intervalId = setInterval(() => {
                currentCount++;
                if (currentCount > repeatCount) {
                    clearInterval(intervalId);
                    startButton.disabled = false;
                    stopButton.disabled = true;
                    return;
                }
                playBeep(currentCount);
				updateDisplay(currentCount, 'black');
				statusDiv.textContent = `运行中，剩余次数：${repeatCount - currentCount}`;
            }, intervalTime);

			updateDisplay(currentCount, 'black');
			statusDiv.textContent = `运行中，剩余次数：${repeatCount - currentCount}`;
        });

        stopButton.addEventListener('click', () => {
            clearInterval(intervalId);
            startButton.disabled = false;
            stopButton.disabled = true;

			statusDiv.textContent = `停止`;
			updateDisplay(0, 'gray');
        });

        function updateDisplay(number, color) {
            const display = document.getElementById('display');
            display.textContent = number.toString().padStart(2, '0');
	    display.style.color = color;
        }

        function playBeep(times) {
            const audioContext = new (window.AudioContext || window.webkitAudioContext)();
            for (let i = 0; i < times; i++) {
                setTimeout(() => {
                    const oscillator = audioContext.createOscillator();
                    oscillator.type = 'sine';
                    oscillator.frequency.setValueAtTime(440, audioContext.currentTime);
                    oscillator.connect(audioContext.destination);
                    oscillator.start();
                    oscillator.stop(audioContext.currentTime + 0.1);
					const now = new Date();
					const hours = now.getHours().toString().padStart(2, '0');   // 时
					const minutes = now.getMinutes().toString().padStart(2, '0'); // 分
					const seconds = now.getSeconds().toString().padStart(2, '0'); // 秒
					const milliseconds = now.getMilliseconds().toString().padStart(3, '0'); // 毫秒

					const timeString = `${hours}:${minutes}:${seconds}.${milliseconds}`;
					console.log(timeString);
                }, (i+1) * 500);
            }
        }
    </script>
</body>
</html>