您的位置：首页 > 其它

freecodecamp小项目---计时器

2017-06-24 17:02 459 查看

一：说明

该项目在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);
};
});
});

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航