使用JavaScript实现的番茄钟网页设计-CSDN博客

本文链接：https://blog.csdn.net/weixin_61726211/article/details/125007475

这篇博客记录了一项期末大作业——设计一个基于番茄工作法的网页应用。用户可以输入任务，点击开始按钮启动25分钟倒计时，倒计时过程中伴有可关闭的励志音乐，并提供暂停和结束计时功能。博主分享了页面核心的JavaScript代码和CSS样式，展示了页面效果，并表达了学习过程中的感受。

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

一、简要说明

本模块旨在为用户提供番茄工作法的时间规划，在用户在输入框中输入事项之后，点击“开始吧”按钮即可收到“即将开始25分钟倒计时”的提示，随即转至25分钟倒计时页面，开始25分钟倒计时，在此期间，会有可关闭的循环播放的励志音乐，同时还可以暂停计时或结束计时，点击“暂停计时”按钮即可暂停页面内的25分钟倒计时，并弹出“计时暂停中，点击‘确定’键继续...”的提示信息；点击“结束计时”按钮即可结束计时，并弹出“确定要离开此页面吗”的提示消息，并返回番茄钟主页面。

二、页面核心代码

番茄钟主页面

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>番茄钟</title>
		<link href="css/tomato.css" rel="stylesheet" type="text/css" />
	</head>
	<body>
		<!-- 导航栏 -->
		<div>
			<ul class="to3">
				<li>TODOLIST&nbsp;|&nbsp;我欲摘星斗</li>
			</ul>
			<ul class="to1">
				<li class="to2"><a href="首页.html">首页</a></li>
				<li class="to2"><a href="番茄钟.html">番茄钟</a></li>
				<li class="to2"><a href="备忘录.html">备忘录</a></li>
				<li class="to2"><a href="倒计时.html">纪念日</a></li>
				<li class="to2"><a href="日记本.html">日记本</a></li>
				<li class="to2"><a href="关于我.html">关于我</a></li>
				<li class="to2"><a href="index.html">退出登录</a></li>
			</ul>
		</div>
		<!-- banner开头通栏 -->
		<div>
			<div class="banner">
				<!--左侧通栏-->
				<div class="left">
					<div class="content_left">
						<p class="school_en">ToDoList</p>
						<p class="school_ch">我欲摘星斗</p>
						<p class="advertise">来日纵是千千晚星，亮过今晚月亮<br>流浪的月亮和繁密的星辰姗姗来迟，你有自己的花期</p>
						<ul class="style_a">
							<li class="current"><a href="img/banner图.jpg"></a></li>
							<li class="current"><a href="img/banner图1.jpg"></a></li>
							<li class="current"><a href="img/banner图3.jpg"></a></li>
							<li class="current"><a href="img/banner图4.jpg"></a></li>
							<li class="current"><a href="img/banner图5.jpg"></a></li>
							<li class="current"><a href="img/banner图6.jpg"></a></li>
						</ul>
					</div>
				</div>
				<!--右侧通栏-->
				<div class="right">
					<div class="content_right">
						<h4>番茄钟<br>INTRODUCTION</h4>
						<ul class="style_icon">
							<li><img src="img/g1.jpg"></li>
						</ul>
						<br />
						<p class="cl">
							番茄工作法是由弗朗西斯科·西里洛于1992年创立的一种相对于GTD（Getting Things Done）更微观的时间管理方法。
						</p>
						<br />
						<p class="cl2">
							使用番茄工作法，选择一个待完成的任务，将番茄时间设为25分钟，专注工作，中途不允许做任何与该任务无关的事，直到番茄时钟响起，然后在纸上画一个对号短暂休息一下(5分钟就行)，每完成4