wmpluto.github.io/timer.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
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
<!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: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            /* 视口高度 */
            background-color: #f0f0f0;
        }

        .container {
            text-align: center;
        }

        .timer {
            font-size: 25vw;
            /* 字体大小为视口宽度的 25% */
            line-height: 1;
        }

        button {
            font-size: 1.5em;
            padding: 10px 20px;
            cursor: pointer;
            margin-top: 20px;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="timer" id="timer">00:00</div>
        <button id="toggleButton">开始计时</button>
        <button id="soundButton">每秒提示</button>
    </div>

    <script>
        let minutes = 0;
        let seconds = 0;
        let timerInterval = null;
        let isRunning = false;
        let isSecondsSound = false;

        const timerDisplay = document.getElementById('timer');
        const toggleButton = document.getElementById('toggleButton');
        const soundButton = document.getElementById('soundButton');
        const beepSound = document.getElementById('beepSound'); // 获取音频元素
        const audioContext = new (window.AudioContext || window.webkitAudioContext)();

        // 更新计时器显示
        function updateTimerDisplay() {
            const formattedMinutes = minutes.toString().padStart(2, '0');
            const formattedSeconds = seconds.toString().padStart(2, '0');
            timerDisplay.textContent = `${formattedMinutes}:${formattedSeconds}`;
        }

        // 播放“滴”声
        function playBeep(times) {
            if (isSecondsSound) return; // 每秒提示时不播放
            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}`;
                }, (i + 1) * 500);
            }
        }

        // 播放嘀嗒声
        function playTick(frequency) {
            if (!isSecondsSound) return; // 每分提示时不播放
            const oscillator = audioContext.createOscillator();
            const gainNode = audioContext.createGain();
            oscillator.type = 'sine'; // 正弦波
            oscillator.frequency.value = frequency; // 设置频率
            gainNode.gain.value = 0.3; // 音量控制
            oscillator.connect(gainNode);
            gainNode.connect(audioContext.destination);
            oscillator.start();
            //setTimeout(() => oscillator.stop(), 200); // 播放100ms
            oscillator.stop(audioContext.currentTime + 0.2);
        }

        // 秒表计时逻辑
        function startTimer() {
            timerInterval = setInterval(() => {
                seconds++;
                if (seconds === 60) {
                    seconds = 0;
                    minutes++;
                    playBeep(minutes); // 到整分钟时播放“滴”声
                }
                if (minutes === 99 && seconds === 60) {
                    stopTimer(); // 达到最大值时停止计时计时
                }

                // 判断奇偶秒并播放声音
                if (seconds % 2 === 0) {
                    playTick(880); // 偶数秒播放"嗒"声（880Hz）
                } else {
                    playTick(440); // 奇数秒播放"嘀"声（440Hz）
                }

                updateTimerDisplay();
            }, 1000);
        }

        // 停止计时计时
        function stopTimer() {
            clearInterval(timerInterval);
            timerInterval = null;
            minutes = 0;
            seconds = 0;
        }

        // 开关按钮点击事件
        toggleButton.addEventListener('click', () => {
            if (isRunning) {
                stopTimer();
                toggleButton.textContent = '开始计时';
                updateTimerDisplay();
            } else {
                startTimer();
                toggleButton.textContent = '停止计时';
            }
            isRunning = !isRunning;
        });

        // 提示音按钮点击事件
        soundButton.addEventListener('click', () => {
            if (isSecondsSound) {
                soundButton.textContent = '每秒提示';
            } else {
                soundButton.textContent = '每分提示';
            }
            isSecondsSound = !isSecondsSound;
        })

        // 初始化显示
        updateTimerDisplay();
    </script>
</body>

</html>