freecodecamp小项目---计时器

最新推荐文章于 2021-09-01 10:16:17 发布

神以灵

最新推荐文章于 2021-09-01 10:16:17 发布

阅读量588

点赞数

分类专栏：【FreeCodeCamp】

本文链接：https://blog.csdn.net/juzipidemimi/article/details/73692760

版权

【FreeCodeCamp】专栏收录该内容

5 篇文章 1 订阅

订阅专栏

####一：说明

该项目在codepen上的地址：
https://codepen.io/lightforme/full/qjXvBg/
它的功能是计时，可以自己设置倒计时的时长，但不能超过60分钟，在计时过程中可以暂停，也可以重置倒计时时间，功能和效果比教程上给的案例差很多，sry;这个小demo我在几周前写了一半，由于一些其他事最近在把他完善，由于直接是在几周前的demo上进行的修改，如果发现错误，或者有好的建议，请在评论中告诉我，我还很菜~~~

####二：知识点

设置定时器后返回的值是number类型，可以当成参数传给clearInterval()方法，用于取消相应的定时器

####三：代码
html:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>Timer</title>
		<link rel="stylesheet" href="css/timer.css" />
	</head>
	<body>
		<div class="main">
			<h2 class="title">The Simple Timer</h2>
			<div class="con">
				<div class="change">
					<div class="min">
						<div>
							<h3>SESSION LENGTH</h3>
						</div>
						<button class="ses_mul">-</button>
						<span class="t_ses">25</span>
						<button class="ses_add">+</button>
					</div>
				</div>
				<div class="clock">
					<h3>Session</h3>
					<div class="time">25</div>
				</div>
			</div>
		</div>
		
		<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
		<script src="js/time.js"></script>
	</body>
</html>

css:

/*reset*/
div,h2,h3{
	margin:0;
	padding:0;
}

/*公共样式*/
.main{
	margin-top:40px;
}
body{
	font-family:arial;
	background: #5b5b5b;
	color:white;
}
.change h3{
	font-size:10px;
	font-weight: 100;
	margin-bottom: 5px;
}
.change span{
	font-size:25px;
	padding:0 5px;
}
.change button{
	font-size:18px;
	height:28px;
	line-height: 28px;
	vertical-align: top;
	color:white;
	cursor:pointer;
}
.change button:focus{
	outline: none;
}
.min,.break{
	display: inline-block;
	padding:0 25px;
}
.change button{
	border:none;
	background:#5b5b5b;
}
/*timer*/
h2.title{
	text-align: center;
	font-size:40px;
	padding:35px 0;
}
.con{
	text-align: center;
}
.clock{
	width:350px;
	height:350px;
	margin:0 auto;
}
.change{
	padding-bottom:30px;
}
.clock{
	border:2px solid #53ff63;
	border-radius: 50%;
	cursor:pointer;
}
.clock h3{
	margin-top:80px;
	font-size:60px;
	font-weight: 100;
}
div.clock div.time{
	font-size:60px;
	margin-top:50px;
}

js:

function calTime(time){
	var min = Math.floor(time/60);
	var sec = time - 60*min;
	if(min < 10){
		min = '0' + min;
	};
	if(sec < 10){
		sec = '0' + sec;
	};
	return min + ":" + sec;
};

$(function(){
	//获取倒计时的秒数
	var second = parseInt($(".time").text())*60;
	//更改每次倒计时分钟数
	$(".min .ses_mul").click(function(){
		clearInterval(timer);
		timer = null;
		let txt = parseInt($(".t_ses").text());
		if(txt > 0){
			$(".t_ses").text(txt - 1);
			$(".time").text(txt - 1);
		};
		second = parseInt($(".time").text())*60;
	});
	$(".min .ses_add").click(function(){
		clearInterval(timer);
		timer = null;
		let txt = parseInt($(".t_ses").text());
		if(txt < 60){
			$(".t_ses").text(txt + 1);
			$(".time").text(txt + 1);
		};
		second = parseInt($(".time").text())*60;
	});
	//点击.clock开始倒计时
	var timer = null;
	$(".clock").click(function(){
		if(timer){
			clearInterval(timer);
			timer = null;
		}else if(second != 0){
			timer = setInterval(function(){
				second--;
				if(second == 0){
					clearInterval(timer);
				};
				var con = calTime(second);
				$(".time").text(con);
			},1000);
		};
	});
});

神以灵

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
freecodecamp小项目---计时器

一：说明该项目在codepen上的地址： https://codepen.io/lightforme/full/qjXvBg/它的功能是计时，可以自己设置倒计时的时长，但不能超过60分钟，在计时过程中可以暂停，也可以重置倒计时时间，功能和效果比教程上给的案例差很多，sry;这个小demo我在几周前写了一半，由于一些其他事最近在把他完善，由于直接是在几周前的demo上进行的修改，如果发现错误，或
复制链接

扫一扫

专栏目录