目標: 在 CodePen.io 上做一個類似于 http://codepen.io/FreeCodeCamp/full/VemPZX 的 APP.
規(guī)則 #1: 代碼是開源的，你可以借鑒娄蔼，但請不要抄襲镣煮。
規(guī)則 #2: 可以使用你喜愛的任何庫來定制屬于你自己的風(fēng)格蹭沛，實現(xiàn)下面的功能.
功能: 可以啟動一個 25 分鐘的番茄鐘, 計時器將在 25 分鐘后停止.
功能: 可以重置番茄鐘的狀態(tài)以便啟動下一次計時.
功能: 可以為每個番茄鐘自定義時長.
在簡書上不少關(guān)于干貨的文章都有介紹過番茄工作法，即設(shè)定固定的學(xué)習(xí)時間锋八，在這段時間內(nèi)心無旁騖的學(xué)習(xí)掐暮，再休息相應(yīng)的時間稻轨，休息時間結(jié)束后繼續(xù)學(xué)習(xí)励翼。這就是番茄工作法蜈敢，勞逸結(jié)合。
這邊用angularjs的方式實現(xiàn)番茄工作法計時器的小實例：
- session流逝的時間用綠顏色填充
- break流逝的時間用紅色填充
- 單擊計時器可以暫停計時器
- 暫停狀態(tài)才可以修改session和break的值汽抚，否則不可以修改
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>angularJS實例-番茄鐘</title>
<style type="text/css">
@import url(https://fonts.googleapis.com/css?family=Pacifico|Open+Sans:300);
*{margin: 0;font-family:Open Sans,Arial; }
html,body,main{height: 100%;overflow: hidden;background: #333333;}
h1{display: block;background: #333333;margin:0 auto;color: white;text-align: center;font-family: 'Pacifico';font-size: 5em;}
header{display: flex;justify-content: center;text-align: center;margin: 0 auto;color: #ffffff;text-transform: uppercase;padding: 20px;}
header .session{font-size: .8rem;display: flex;}
header .session .breakCtrl,header .session .sessionCtrl{display: inline;padding-left: 30px;padding-right: 30px;}
header .session .minus,header .session .plus{background: #333333;color: #fff;border: none;cursor: pointer;font-size: 2rem;outline: none;}
header .session .time{font-size: 2.5rem;padding-left: 10px;padding-right: 10px;}
section{background: #333333;height: 100%;color: #fff;}
section .title{text-align: center;line-height: 180px;font-size: 0.8em;}
section .timer{margin:0 auto;text-align: center;width: 300px;height: 300px;font-size: 4em;border:2px solid #99cc00;border-radius: 50%;cursor: pointer;position: relative;z-index: 20;overflow: hidden;}
section .timer:before{content: '';position:absolute;top: 0;bottom: 0;left: 0;right: 0;border-radius: 50%;z-index: 2;border: 4px solid #333333;}
section .fill{content: '';position: absolute;background: #99cc00;bottom: 0;right: 0;left: 0;z-index: -1;}
</style>
<script src="https://cdn.bootcss.com/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<h1>FreeCodeCamp</h1>
<main ng-app="PomodoroApp" ng-controller="MainCtrl">
<header>
<div class="session">
<!-- break length控制器 -->
<div class="breakCtrl">
<p>break length</p>
<button class="minus" ng-click="breakLengthChange(-1)">-</button><span class="time">{{breakLength}}</span>
<button class="plus" ng-click="breakLengthChange(1)">+</button>
</div>
<!-- session length控制器 -->
<div class="sessionCtrl">
<p>session length</p>
<button class="minus" ng-click="sessionLengthChange(-1)">-</button><span class="time">{{sessionLength}}</span>
<button class="plus" bg-click="sessionLengthChange(1)">+</button>
</div>
</div>
</header>
<section ng-click="toggleTimer()">
<div class="timer">
<p class="title">{{sessionName}}</p>
<p>{{timeLeft}}</p><span class="fill" ng-style="{'height':fillHeight,'background':fillColor}"></span>
</div>
</section>
</main>
</body>
<script type="text/javascript">
var app = angular.module('PomodoroApp',[]); //angularjs模塊初始化
app.controller('MainCtrl',function($scope,$interval){
$scope.breakLength = 5; //breaklength初始化值為5 休息時間
$scope.sessionLength = 25; //sessionlength初始化值為25 工作時間
$scope.timeLeft = $scope.sessionLength; //剩余時間為sessionlength的長度
$scope.fillHeight = '0%'; //一開始的填充高度為0
$scope.sessionName = 'Session'; //計時器的名字為session 可以自己隨便定義
$scope.currentTotal;
var runTimer = false; //標志是否在計時的布爾值
var secs = 60 * $scope.sessionLength; //將分鐘轉(zhuǎn)換成秒
$scope.originalTime = $scope.sessionLength; //初始設(shè)置的session長度
//將時間轉(zhuǎn)換成時分秒的顯示形式
function secondsToHms(d){
d = Number(d);
var h = Math.floor(d/3600);
var m = Math.floor(d%3600/60);
var s = Math.floor(d%3600%60);
return((h>0?h+":"+(m<10?"0":""):"")+m+":"+(s<10?"0":"")+s);;
}
//Change default session length 改變sessionlength的長度
$scope.sessionLengthChange = function(time){
if(!runTimer){ //當處于非運行狀態(tài)的時候抓狭，可以對原來設(shè)置的session大小進行加減
if($scope.sessionName === 'Session'){
$scope.sessionLength += time;
if($scope.sessionLength < 1){
$scope.sessionLength = 1;
}
$scope.timeLeft = $scope.sessionLength;
$scope.originalTime = $scope.sessionLength;
secs = 60*$scope.sessionLength;
}
}
}
//Change default break length 改變breaklength的長度
$scope.breakLengthChange = function(time){
if(!runTimer){
$scope.breakLength += time;
if($scope.breakLength<1){
$scope.breakLength = 1;
}
if($scope.sessionName === 'Break!'){
$scope.timeLeft = $scope.breakLength;
$scope.originalTime = $scope.breakLength;
secs = 60 * $scope.breakLength;
}
}
}
$scope.toggleTimer = function(){
if(!runTimer){ //如果正在運行中
if($scope.currentName == 'Session'){
$scope.currentLength = $scope.sessionLength;
}else{
$scope.currentLength = $scope.breakLength;
}
updateTimer();
runTimer = $interval(updateTimer,1000); //每秒更新一下時間
}else{
$interval.cancel(runTimer); //取消runTimer，暫停
runTimer = false;
}
}
function updateTimer(){
secs -= 1; //以1s為單位進行時間更新
if(secs <0){
//countdown is finished
//Play audio
// Play audio
// var wav = 'http://www.oringz.com/oringz-uploads/sounds-917-communication-channel.mp3';
// var audio = new Audio(wav);
// audio.play();
//toggle break an session
$scope.fillColor = '#333333';
if($scope.sessionName === 'Break!'){
$scope.sessionName = 'Session';
$scope.currentLength = $scope.sessionLength;
$scope.timeLeft = 60 * $scope.sessionLength;
$scope.originalTime = $scope.sessionLength;
secs = 60 * $scope.sessionLength;
}else{
$scope.sessionName = 'Break!';
$scope.currentLength = $scope.breakLength;
$scope.timeLeft = 60 * $scope.breakLength;
$scope.originalTime = $scope.breakLength;
secs = 60 * $scope.breakLength;
}
}else{
if($scope.sessionName === 'Break!'){
$scope.fillColor = '#ff4444';
}else{
$scope.fillColor = '#99cc00';
}
$scope.timeLeft = secondsToHms(secs);
var denom = 60 * $scope.originalTime;
var perc = Math.abs((secs / denom) * 100 -100);
$scope.fillHeight = perc + '%'; //計算已經(jīng)流逝的時間占總時間的百分比
console.log($scope.fillHeight);
}
}
});
</script>
</html>
session時間流逝.gif
break時間流逝.gif
代碼github地址：https://github.com/Iris-mao/css-tricks/tree/master/Pomodoro-Clock
