编程示例：web页面上的定时器_web计时器代码-CSDN博客

本文链接：https://blog.csdn.net/gggwfn1982/article/details/131074624

该文章介绍如何在web页面上创建一个定时器工具，用户可设置小时、分钟和秒数，点击开始后，当达到设定时间会触发音乐提醒。代码基于JavaScript，利用AudioContext和WebAudioAPI来播放提醒音乐。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

编程示例：web页面上的定时器

在windows10没有找到定时器这个小工具，因为经常在手机上使用这个小工具
也是很好用的小工具。于是，在web页面上，实现了这个小工具。

操作步骤：
第一步：设置到期的小时数，分钟数，和秒数。
第二步：点击开始按钮，激活定时器。
第三步：当到达设定时间时，系统响起音乐，提醒用户时间已到。

代码如下：
<html>
<head>
<title>定时器</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="thread.js"></script>
<style type="text/css">

</style>
</head>
<body>
<script>
window.AudioContext = window.AudioContext || window.webkitAudioContext;

if (!window.AudioContext)
{
alert('当前浏览器不支持Web Audio API');
}
var arrFrequency = [196.00, 220.00, 246.94, 261.63, 293.66, 329.63, 349.23, 392.00, 440.00, 493.88, 523.25, 587.33, 659.25, 698.46, 783.99, 880.00, 987.77, 1046.50];

var thread_arr=[];
var timer_count=0;
var second_count=0;

function play_sound()
{
// 音调依次递增或者递减处理需要的参数
var start = 0, direction = 1;
for (var i = 0; i < 54000; i++) {

if (i%3000==0) {
//thead
// 创建新的音频上下文接口
var audioCtx = new AudioContext();
// 当前频率
var frequency = arrFrequency[start];
// 如果到头，改变音调的变化规则（增减切换）
if (!frequency) {
direction = -1 * direction;
start = start + 2 * direction;
frequency = arrFrequency[start];
}
// 改变索引，下一次hover时候使用
start = start + direction;
// 创建一个OscillatorNode, 它表示一个周期性波形（振荡），基本上来说创造了一个音调
var oscillator = audioCtx.createOscillator();
// 创建一个GainNode,它可以控制音频的总音量
var gainNode = audioCtx.createGain();
// 把音量，音调和终节点进行关联
oscillator.connect(gainNode);
// audioCtx.destination返回AudioDestinationNode对象，表示当前audio context中所有节点的最终节点，一般表示音频渲染设备
gainNode.connect(audioCtx.destination);
// 指定音调的类型，其他还有square|triangle|sawtooth
oscillator.type = 'sine';
// 设置当前播放声音的频率，也就是最终播放声音的调调
oscillator.frequency.value = frequency;
// 当前时间设置音量为0
gainNode.gain.setValueAtTime(0, audioCtx.currentTime);
// 0.01秒后音量为1
gainNode.gain.linearRampToValueAtTime(1, audioCtx.currentTime + 0.01);
// 音调从当前时间开始播放
oscillator.start(audioCtx.currentTime);
// 1秒内声音慢慢降低，是个不错的停止声音的方法
gainNode.gain.exponentialRampToValueAtTime(0.001, audioCtx.currentTime + 5);
// 1秒后完全停止声音
oscillator.stop(audioCtx.currentTime + 1);
}
}
}
</script>
<input id="hour" type=text value=0>小时：</input>
<input id='minute' type=text value=3> 分钟</input>
<input id='second' type=text value=0>秒 </input>
<input type="button" value="开始" οnclick='start();'></input>
<input type="button" value="sleep1" οnclick='sleep();'></input>
<input type="button" value="resume1" οnclick='resume();'></input>
<input type="button" value="abort1" οnclick='abort();'></input>
<div id="t1">0</div>
</body>
</html>

另一个脚本文件thread.js,要放在与主页面同一个目录之下。如下：
function Thread(_task,_delay,_times)
{
this.runFlag=false;
this.busyFlag=false;
this.taskArgs=Array.prototype.slice.call(arguments,3);

if (_times!=undefined)
{
this.times=_times;
}
else
{
this.times=1;
}

var _point=this;

this.timerID=-1;

this.start=function()
{
if (this.runFlag==false)
{
this.timerID=window.setInterval(_point.run,_delay);
this.runFlag=true;
}
}

this.run=function()
{
if (_point.busyFlag) return;
if (_point.times==-1)//无限循环
{
_task(_point.taskArgs);
}
else if (_point.times>0)
{
_task(_point.taskArgs);
_point.times-=1;
if (_point.times==0)
{
window.clearInterval(this.timerID);
}
}
}

this.sleep=function()
{
this.busyFlag=true;
}

this.resume=function()
{
this.busyFlag=false;
}

this.abort=function()
{
window.clearInterval(this.timerID);
}
}