用JS写了一个30分钟倒计时器

巨輪

已于 2022-05-01 03:00:01 修改

阅读量6.7k

点赞数 9

分类专栏： JavaScript 文章标签： javascript 前端 html

于 2022-03-12 02:56:20 首次发布

本文链接：https://blog.csdn.net/u011863024/article/details/123437525

版权

本文介绍了一款使用JavaScript编写的30分钟倒计时器，具有多种交互功能。用户可以通过点击计时器数字区切换显示秒钟、暂停/启动计时器。倒计时结束后，需刷新页面重新开始。计时过程中，用户可以输入备注并保存到本地。此外，通过双击进度条可导出计时信息，同时支持自定义启动和结束音乐。

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

效果图

在这里插入图片描述

额外功能

左键单击计时器数字区，不显示或显示秒钟区。
左键双击计时器数字区，暂停或启动计时器。计时完毕，只能刷新页面启动计时器。
输入框可输入备注信息，输入框失去焦点或计时完毕后，时间戳附带备注信息会存入本地。
左键双击进度条区，可将导出历来使用计数器所处时间及备注信息。
两audio标签可填个人喜爱音频文件的路径作启动、结束时的音乐。

放码过来

<!DOCTYPE HTML>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
		<title>Countdown Timer</title>
		<style type="text/css">
			input{
     
			    padding-bottom: 0px;
				padding-top: 0px;
				border-top-width: 0px;
				border-left-width: 0px;
				border-right-width: 0px;
				font-size: 20px;
				width:100%;
			}
		</style>
	</head>
	
	<body>
		<span id="numbers" style="white-space:nowrap;"></span>
		
		<table id="table1" >
			<tr>
				<td style="background-color:rgb(41, 74, 155);padding:3px;"></td>
				<td></td>
			</tr>
			<tr>
				<td style="width:100%;" colspan=2>
					<input id="content"/>
				</td>
			</tr>
			<tr>
				<td style="width:100%;" colspan=2>
					<canvas id="my

最低0.47元/天解锁文章