编程部落

【FCC】番茄时钟pomodoro clock网页版

作者：

风君子

在

文章目录

功能: 可以启动一个 25 分钟的番茄钟, 计时器将在 25 分钟后停止.

功能: 可以重置番茄钟的状态以便启动下一次计时.

功能: 可以为每个番茄钟自定义时长.
演示：

【HTML】

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>PomodoroClock</title>

		<link rel="stylesheet" type="text/css" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

		<link rel="stylesheet" type="text/css" href="css/main.css">
	</head>
	<body>
		<h1>番茄时钟Pomodoro Clock</h1>

		<div class="main">
			<div class="control">
				<div class="break">
					<p>BREAK LENGTH</p>
					<i class="fa fa-minus-square-o" aria-hidden="true" id="break-minus"></i>
					<span id="break-length">5</span>
					<i class="fa fa-plus-square-o" aria-hidden="true" id="break-plus"></i>
				</div>
				<div class="length">
					<p>SESSION LENGTH</p>
					<i class="fa fa-minus-square-o" aria-hidden="true" id="session-minus"></i>
					<span id="session-length">25</span>
					<i class="fa fa-plus-square-o" aria-hidden="true" id="session-plus"></i>
				</div>
			</div>
			<div class="clock">
				<h2 id="show-title">Session</h2>
				<h2 id="show-time">25:00</h2>
				<span id="per"></span>

			</div>
		</div>

		<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
		<script type="text/javascript" src="js/clock.js"></script>
	</body>
</html>

 

【css】

<style type="text/css">
	* {
		margin: 0;
		padding: 0;
	}

	html,
	body {
		height: 100%;
		width: 100%;
		background-color: #cb4042;
		overflow: hidden;
	}

	h1 {
		text-align: center;
		margin-top: 5%;
		color: #fff;
		/* font-family: 'Sedgwick Ave Display', cursive; */
	}

	.main {
		margin-top: 5%;
		position: relative;
		left: 50%;
		transform: translateX(-50%);
		width: 100%;
		height: 70%;
		text-align: center;
	}

	.control {
		width: 100%;
		display: flex;
		text-align: center;
		justify-content: center;
	}

	.break {
		display: inline;
		padding: 0 30px;
	}

	.length {
		display: inline;
		padding: 0 30px;
	}

	span {
		font-size: 2em;
		color: #fff;
		font-family: 'Bitter', serif;
	}

	.fa {
		font-size: 1.4em;
		color: #fff;
		cursor: pointer;
		margin: 0 10px;
	}

	.control p {
		color: #b5caa0;
	}

	.clock {
		width: 300px;
		height: 300px;
		border-radius: 50%;
		border: 4px solid #a8d8b9;
		text-align: center;
		position: relative;
		left: 50%;
		transform: translateX(-50%);
		margin-top: 30px;
		cursor: pointer;
		z-index: 20;
		overflow: hidden;
	}

	.clock:before {
		content: '';
		position: absolute;
		border: 4px solid #cb4042;
		border-radius: 50%;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
	}

	.clock h2 {
		font-family: 'Bitter', serif;
		font-size: 2.5em;
		margin-top: 80px;
		color: #fff;
	}

	#per {
		margin: 0;
		position: absolute;
		bottom: 0;
		right: 0;
		left: 0;
		height: 0%;
		width: 100%;
		background-color: #b5caa0;
		/* background-color: #3f2b36; */
		z-index: -1;
	}
</style>

【js】

<script type="text/javascript">
	$(document).ready(function() {
		var session = 25; //这个是默认工作时间，用在设置那儿显示的，这里以分钟为单位，且超过60也是分钟
		var breaklength = 5; //设置break时长——休息时长,细节同session
		var flag = 1; //设置工作状态，1是工作的暂停，2是正在休息的暂停，3是在工作中，4是休息中
		var sec = session * 60; //用来记录变化中的时间，单位为秒
		var percent = 0; //记录背景颜色显示的高度，0-100，是百分比

		$("#break-minus").on("click", function() {
			if (flag !== 1 && flag !== 2) {
				return; //如果非暂停状态，点击无效
			}
			breaklength--;
			if (breaklength < 1) {
				breaklength = 1;
			}
			$("#break-length").html(breaklength);
			if (flag === 2) {
				//如果是休息的暂停，一旦改了，就又对sec产生了修改
				sec = breaklength * 60;
			}
			showHMS(breaklength, 2);
		});
		$("#break-plus").on("click", function() {
			if (flag !== 1 && flag !== 2) {
				return; //如果非暂停状态，点击无效
			}
			breaklength++;
			$("#break-length").html(breaklength);
			if (flag === 2) {
				//如果是休息的暂停，一旦改了，就又对sec产生了修改
				sec = breaklength * 60;
			}
			showHMS(breaklength, 2);
		});
		$("#session-minus").on("click", function() {
			if (flag !== 1 && flag !== 2) {
				return; //如果非暂停状态，点击无效
			}
			session--;
			if (session < 1) {
				session = 1;
			}
			$("#session-length").html(session);
			if (flag === 1) {
				//如果是工作的暂停，一旦改了，就又对sec产生了修改
				sec = session * 60;
			}
			showHMS(session, 1);
		});
		$("#session-plus").on("click", function() {
			if (flag !== 1 && flag !== 2) {
				return; //如果非暂停状态，点击无效
			}
			session++;
			$("#session-length").html(session);
			if (flag === 1) {
				//如果是工作的暂停，一旦改了，就又对sec产生了修改
				sec = session * 60;
			}
			showHMS(session, 1);
		});

		//在时钟上显示时分秒，传两个参数，一个是分钟，一个是状态。
		//如果在工作的暂停中，修改休息的时长，不改变时钟上的显示，state有两个取值，取1时表示修改工作时长，取2表示修改休息时长
		var showHMS = function(min, state) {
			if (state !== flag) {
				return; //如果不是在对应的暂停状态，就不改变时钟上显示的值
			}
			var show = "";
			if (min >= 60) {
				show += parseInt(min / 60) + ":";
				min = min % 60;
			}
			if (min < 10) {
				show += "0";
			}
			show += min + ":00";
			$("#show-time").html(show);
		};

		//开始后时间的变化,参数是剩下的秒数
		function timeChange() {
			var temp = sec;
			if (flag === 1 || flag === 2) {
				//如果是暂停中，就不变时间
				return;
			}
			if (sec === 0) {
				if (flag === 3) {
					flag = 4;
					sec = breaklength * 60;
					$("#show-title").html("Break");
				} else {
					flag = 3;
					sec = session * 60;
					$("#show-title").html("Session");
				}

			}

			var showHMS = "";
			if (temp >= 3600) {
				showHMS += parseInt(second / 360) + ":";
				temp = temp % 360;
			}
			if (temp < 70) {
				showHMS += "0";
			}
			showHMS += parseInt(temp / 60) + ":";
			temp = temp % 60;
			if (temp < 10) {
				showHMS += "0";
			}
			showHMS += temp;

			//console.log(showHMS);
			$("#show-time").html(showHMS);
			if (flag === 3) {
				//工作中
				$("#per").css('background-color', '#b5caa0');
				if (sec === 0) {
					percent = 100;
				} else {
					percent = (session * 60 - sec) / session / 60 * 100;
				}
				$("#per").css('height', percent + '%');
			}
			if (flag === 4) {
				//休息中
				$("#per").css('background-color', "#3f2b36");
				if (sec === 0) {
					percent = 100;
				} else {
					percent = (breaklength * 60 - sec) / breaklength / 60 * 100;
				}
				$("#per").css('height', percent + '%');
			}
			sec--;
			setTimeout(timeChange, 1000);
		};

		//时钟点击事件——开始与暂停的转换，及开始后时间的变化
		$(".clock").on("click", function() {
			if (flag === 1) {
				flag = 3;
			} else if (flag === 3) {
				flag = 1;
			} else if (flag === 2) {
				flag = 4;
			} else if (flag === 4) {
				flag = 2;
			}

			//console.log(sec);
			timeChange();
		});

	});
</script>

 

更多文章

评论

2 条对“【FCC】番茄时钟pomodoro clock网页版”的回复

  1. test

    这个题挺难得啊

    回复
    1. fengjun

      确实挺难的

      回复

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

站内搜索

标签云

iphone 三星 信用卡 信贷 华为 小米 微软 快科技 手机 投资理财 支付宝 特斯拉 理财知识 电脑 科技 程序 股票 芯片 苹果 贷款 路由器 银行 银行卡 额度

热门文章

友情链接