【FCC】番茄时钟pomodoro clock网页版
生活随笔
收集整理的這篇文章主要介紹了
【FCC】番茄时钟pomodoro clock网页版
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
題目：
功能: 可以啟動一個 25 分鐘的番茄鐘, 計時器將在 25 分鐘后停止.
功能: 可以重置番茄鐘的狀態以便啟動下一次計時.
功能: 可以為每個番茄鐘自定義時長.
演示：
代碼:
【HTML】
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PomodoroClock</title>
<link rel="stylesheet" type="text/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>
總結
以上是生活随笔為你收集整理的【FCC】番茄时钟pomodoro clock网页版的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 【FCC】Pairwise js算法
- 下一篇： js实现简单五子棋游戏源码