DOCTYPE html > < html> < head> < metacharset = " utf-8" > < title> title > < style>
body {
background : linear-gradient ( to bottom, #f2f2f2, #e0e0e0) ;
font-family : 'Helvetica Neue' , Helvetica, Arial, sans-serif;
}
table {
border-collapse : collapse;
border : 1px solid #ddd;
border-radius : 5px;
box-shadow : 0px 0px 10px rgba ( 0, 0, 0, 0.1) ;
margin : 50px auto;
width : 80%;
}
th {
background-color : #f5f5f5;
color : #333;
font-weight : bold;
padding : 10px 20px;
text-align : center;
text-shadow : 1px 1px 0px rgba ( 255, 255, 255, 0.5) ;
}
td {
background-color : #fff;
color : #333;
padding : 10px 20px;
text-align : center;
vertical-align : middle;
}
input[type="text"], input[type="button"], input[type="submit"], input[type="number"] {
border : 1px solid #ccc;
border-radius : 5px;
font-size : 16px;
font-family : 'Helvetica Neue' , Helvetica, Arial, sans-serif;
padding : 10px;
width : 100%;
}
input[type="text"]:focus, input[type="number"]:focus, input[type="button"]:hover, input[type="submit"]:hover {
border-color : #333;
outline : none;
}
.btn-row {
display : flex;
justify-content : center;
align-items : center;
margin-bottom : 20px;
}
.btn-container {
display : flex;
justify-content : center;
margin-top : 30px;
}
.btn {
background-color : #4CAF50;
border : none;
color : white;
padding : 10px 20px;
text-align : center;
text-decoration : none;
font-size : 16px;
margin : 0 10px;
border-radius : 5px;
width : 120px;
height : 40px;
cursor : pointer;
transition : background-color 0.3s ease-out, color 0.3s ease-out;
}
.btn-add {
background-color : #00a600;
padding-left : 20px;
padding-right : 20px;
}
.btn-remove {
background-color : #EA3526;
padding-left : 20px;
padding-right : 20px;
}
.btn-submit {
background-color : #009BFF;
width : 80px;
margin-left : 5px;
padding-left : 5px;
padding-right : 5px;
}
.btn-clear {
background-color : #ff9800;
width : 80px;
margin-left : 5px;
padding-left : 5px;
padding-right : 5px;
}
.btn-reminder {
background-color : #FFC107;
width : 120px;
margin-left : 5px;
padding-left : 5px;
padding-right : 5px;
font-size : 14px;
}
.btn:hover {
background-color : rgba ( 76, 175, 80, 1) ;
color : #fff;
opacity : 0.7;
}
.btn-add:hover {
background-color : rgba ( 0, 166, 0, 0.7) ;
}
.btn-remove:hover {
background-color : rgba ( 234, 53, 38, 0.7) ;
}
.btn-submit:hover {
background-color : rgba ( 0, 155, 255, 0.7) ;
}
.btn-clear:hover {
background-color : rgba ( 255, 152, 0, 0.7) ;
}
.btn-reminder:hover {
background-color : rgba ( 255, 193, 7, 0.7) ;
}
h1 {
color : #333;
text-align : center;
margin-top : 50px;
margin-bottom : 30px;
font-size : 4em;
text-shadow : 2px 2px 0px rgba ( 0, 0, 0, 0.1) ;
letter-spacing : 2px;
}
p {
color : #555;
font-size : 1.2em;
font-weight : bold;
text-align : center;
margin-bottom : 50px;
}
@media ( max-width : 768px) {
table {
font-size : 14px;
width : 95%;
}
input[type="text"], input[type="button"], input[type="submit"], input[type="number"] {
font-size : 14px;
padding : 8px;
}
h1 {
font-size : 3em;
}
p {
font-size : 1em;
}
.schedule-table {
border-collapse : collapse;
width : 100%;
margin-top : 20px;
}
.schedule-table th {
background-color : #4CAF50;
color : white;
font-size : 14px;
font-weight : normal;
padding : 8px;
text-align : center;
}
.schedule-table td {
border : 1px solid #ddd;
font-size : 14px;
padding : 8px;
text-align : center;
}
.break-row {
background-color : #f5f5f5;
font-size : 14px;
font-weight : bold;
}
.schedule-window {
width : 90%;
margin : 50px auto;
}
.schedule-header {
font-size : 24px;
font-weight : bold;
text-align : center;
margin-bottom : 20px;
}
.schedule-wrapper {
overflow-x : auto;
}
.schedule-close {
position : absolute;
top : 10px;
right : 10px;
font-size : 20px;
cursor : pointer;
}
}
.btn-container {
display : flex;
justify-content : center;
margin-top : 30px;
}
.btn {
margin : 0 10px;
}
.schedule-table {
border-collapse : collapse;
width : 100%;
margin-top : 20px;
}
.schedule-table th {
background-color : #4CAF50;
color : white;
font-size : 14px;
font-weight : normal;
padding : 8px;
text-align : center;
}
.schedule-table td {
border : 1px solid #ddd;
font-size : 14px;
padding : 8px;
text-align : center;
}
.break-row {
background-color : #f5f5f5;
font-size : 14px;
font-weight : bold;
}
.tomato-container {
display : flex;
justify-content : center;
margin-top : 30px;
margin-bottom : 30px;
}
.tomato-wrapper {
width : 50%;
display : flex;
justify-content : center;
align-items : center;
flex-direction : column;
}
.tomato-tasks {
display : flex;
justify-content : center;
align-items : center;
margin-top : 30px;
margin-bottom : 30px;
}
.tomato-task {
padding : 10px 20px;
border-radius : 5px;
background-color : #fff;
margin : 0 10px;
box-shadow : 0px 0px 10px rgba ( 0, 0, 0, 0.1) ;
text-align : center;
font-size : 16px;
font-family : 'Helvetica Neue' , Helvetica, Arial, sans-serif;
text-align : center;
width : 120px;
height : 40px;
}
.tomato-task-active {
background-color : #4CAF50;
color : #fff;
}
.tomato-timer {
font-size : 5em;
font-weight : bold;
color : #4CAF50;
text-align : center;
margin-bottom : 30px;
}
.tomato-buttons {
display : flex;
justify-content : center;
align-items : center;
}
.tomato-button {
background-color : #4CAF50;
border : none;
color : white;
padding : 10px 20px;
text-align : center;
text-decoration : none;
font-size : 16px;
margin : 0 10px;
border-radius : 5px;
width : 120px;
height : 40px;
cursor : pointer;
transition : background-color 0.3s ease-out, color 0.3s ease-out;
}
.tomato-button:hover {
background-color : rgba ( 76, 175, 80, 1) ;
color : #fff;
opacity : 0.7;
}
.modal {
display : none;
position : fixed;
z-index : 1;
left : 0;
top : 0;
width : 100%;
height : 100%;
background-color : rgba ( 0, 0, 0, 0.4) ;
}
.modal-content {
background-color : #fff;
margin : 15% auto;
padding : 20px;
border : 1px solid #888;
border-radius : 5px;
width : 50%;
height : 50%;
}
.modal-header {
display : flex;
justify-content : space-between;
align-items : center;
}
.modal-header h2 {
margin : 0;
font-size : 24px;
font-weight : bold;
}
.close {
color : #888;
font-size : 28px;
font-weight : bold;
cursor : pointer;
}
@media ( max-width : 768px) {
.modal-content {
width : 90%;
height : 70%;
}
}
style > head > < body> < h1> h1 > < p> p > < formid = " myForm" onsubmit = " return validateForm ( ) " > < tableid = " myTable" > < thead> < tr> < th> th > < th> th > tr > thead > < tbodyid = " myTbody" > < tr> < td> < inputtype = " number" min = " 1" name = " time[]" required /> < labelfor = " time[]" > label > td > < td> < inputtype = " text" name = " task[]" required /> < labelfor = " task[]" > label > td > tr > tbody > table > < divclass = " btn-container" > < buttonclass = " btn btn-add" type = " button" onclick = " addRow ( ) " > button > < buttonclass = " btn btn-remove" type = " button" onclick = " deleteRow ( ) " > button > < buttonclass = " btn btn-clear" type = " button" onclick = " clearTable ( ) " > button > < inputclass = " btn btn-submit" type = " submit" value = " 我已完成表单" /> div > form > < divclass = " tomato-container" id = " tomato-container" > < divclass = " tomato-wrapper" > < divclass = " tomato-tasks" id = " tomato-tasks" > div > < divclass = " tomato-timer" id = " tomato-timer" > div > < divclass = " tomato-buttons" > < buttonclass = " tomato-button" id = " start-button" onclick = " startTimer ( ) " > button > < buttonclass = " tomato-button" id = " pause-button" onclick = " pauseTimer ( ) " > button > < buttonclass = " tomato-button" id = " stop-button" onclick = " stopTimer ( ) " > button > div > div > div > < divid = " myModal" class = " modal" > < divclass = " modal-content" > < divclass = " modal-header" > < h2id = " modal-header" > h2 > < spanclass = " close" id = " close" > × span > div > < divclass = " modal-body" id = " modal-body" > div > < divclass = " modal-footer" > < buttonclass = " btn btn-reminder" onclick = " remind ( ) " > button > < buttonclass = " btn btn-submit" onclick = " resetTimer ( ) " > button > div > div > div > < script>
var timerInterval;
var currentTaskIndex = 0 ;
var tomatoTasks = [ ] ;
var tomatoTime = 25 * 60 ;
var tomatoStartTime = tomatoTime;
var taskList = document. getElementsByName ( 'task[]' ) ;
var timeList = document. getElementsByName ( 'time[]' ) ;
var modal = document. getElementById ( "myModal" ) ;
var modalHeader = document. getElementById ( "modal-header" ) ;
var modalBody = document. getElementById ( "modal-body" ) ;
var modalClose = document. getElementById ( "close" ) ;
if ( localStorage. getItem ( "eventList" ) ) {
document. getElementById ( "myTable" ) . innerHTML = localStorage. getItem ( "eventList" ) ;
}
for ( var i = 0 ; i < taskList. length; i++ ) {
tomatoTasks. push ( { task : taskList[ i] . value, time : timeList[ i] . value * 60 } ) ;
}
function addRow ( ) {
var table = document. getElementById ( "myTbody" ) ;
var row = table. insertRow ( - 1 ) ;
var cell1 = row. insertCell ( 0 ) ;
var cell2 = row. insertCell ( 1 ) ;
cell1. innerHTML = '时间(分钟) ' ;
cell2. innerHTML = '任务名称 ' ;
}
function deleteRow ( ) {
var table = document. getElementById ( "myTbody" ) ;
if ( table. rows. length > 1 ) {
table. deleteRow ( - 1 ) ;
}
}
function clearTable ( ) {
if ( confirm ( "确定要清空时间列表吗？" ) ) {
document. getElementById ( "myTbody" ) . innerHTML = '时间(分钟) 任务名称 ;
localStorage. removeItem ( "eventList" ) ;
}
}
function validateForm ( ) {
var table = document. getElementById ( "myTable" ) ;
for ( var i = 1 ; i < table. rows. length; i++ ) {
if ( table. rows[ i] . cells[ 0 ] . firstElementChild. value == "" || table. rows[ i] . cells[ 1 ] . firstElementChild. value == "" ) {
alert ( "请填写完整的时间列表！" ) ;
return false ;
}
}
localStorage. setItem ( "eventList" , document. getElementById ( "myTable" ) . innerHTML) ;
tomatoTasks = [ ] ;
for ( var i = 0 ; i < taskList. length; i++ ) {
tomatoTasks. push ( { task : taskList[ i] . value, time : timeList[ i] . value * 60 } ) ;
}
showTomato ( ) ;
return false ;
}
function showTomato ( ) {
document. getElementById ( "tomato-tasks" ) . innerHTML = "" ;
for ( var i = 0 ; i < tomatoTasks. length; i++ ) {
var taskButton = document. createElement ( "button" ) ;
taskButton. innerText = tomatoTasks[ i] . task;
taskButton. className = "tomato-task" ;
if ( i == currentTaskIndex) {
taskButton. classList. add ( "tomato-task-active" ) ;
}
taskButton. setAttribute ( "onclick" , "changeTask(" + i + ")" ) ;
document. getElementById ( "tomato-tasks" ) . appendChild ( taskButton) ;
}
var container = document. getElementById ( "tomato-container" ) ;
if ( container. style. display === "none" ) {
container. style. display = "flex" ;
}
startTimer ( ) ;
}
function startTimer ( ) {
document. getElementById ( "pause-button" ) . style. display = "inline-block" ;
document. getElementById ( "start-button" ) . style. display = "none" ;
timerInterval = setInterval ( updateTimer, 1000 ) ;
}
function pauseTimer ( ) {
document. getElementById ( "start-button" ) . style. display = "inline-block" ;
document. getElementById ( "pause-button" ) . style. display = "none" ;
clearInterval ( timerInterval) ;
}
function stopTimer ( ) {
var container = document. getElementById ( "tomato-container" ) ;
container. style. display = "none" ;
clearInterval ( timerInterval) ;
resetTimer ( ) ;
}
function resetTimer ( ) {
currentTaskIndex = 0 ;
tomatoTime = tomatoStartTime;
document. getElementById ( "start-button" ) . style. display = "inline-block" ;
document. getElementById ( "pause-button" ) . style. display = "none" ;
modal. style. display = "none" ;
showTask ( ) ;
}
function updateTimer ( ) {
tomatoTime-- ;
var minutes = Math. floor ( tomatoTime / 60 ) ;
var seconds = tomatoTime % 60 ;
document. getElementById ( "tomato-timer" ) . innerHTML = ( minutes < 10 ? "0" : "" ) + minutes + ":" + ( seconds < 10 ? "0" : "" ) + seconds;
if ( tomatoTime == 0 ) {
var audio = new Audio ( "https://assets.coderrocketfuel.com/pomodoro-times-up.mp3" ) ;
audio. play ( ) ;
modalHeader. innerText = tomatoTasks[ currentTaskIndex] . task;
modalBody. innerHTML = "恭喜你完成了这个任务！" ;
modal. style. display = "block" ;
currentTaskIndex++ ;
if ( currentTaskIndex < tomatoTasks. length) {
showTask ( ) ;
}
else {
resetTimer ( ) ;
}
}
}
function showTask ( ) {
tomatoTime = tomatoTasks[ currentTaskIndex] . time;
tomatoStartTime = tomatoTime;
var taskButton = document. getElementsByClassName ( "tomato-task" ) [ currentTaskIndex] ;
for ( var i = 0 ; i < taskList. length; i++ ) {
if ( taskList[ i] . value == tomatoTasks[ currentTaskIndex] . task) {
taskButton. classList. add ( "tomato-task-active" ) ;
timeList[ i] . focus ( ) ;
}
else {
taskList[ i] . parentNode. parentNode. classList. remove ( "tomato-task-active" ) ;
}
}
var minutes = Math. floor ( tomatoTime / 60 ) ;
var seconds = tomatoTime % 60 ;
document. getElementById ( "tomato-timer" ) . innerHTML = ( minutes < 10 ? "0" : "" ) + minutes + ":" + ( seconds < 10 ? "0" : "" ) + seconds;
}
function changeTask ( index ) {
if ( index != currentTaskIndex) {
currentTaskIndex = index;
showTask ( ) ;
}
}
modalClose. onclick = function ( ) {
modal. style. display = "none" ;
}
window. onclick = function ( event ) {
if ( event. target == modal) {
modal. style. display = "none" ;
}
}
function remind ( ) {
if ( Notification. permission !== "granted" ) {
Notification. requestPermission ( ) ;
}
else {
var notification = new Notification ( tomatoTasks[ currentTaskIndex - 1 ] . task, {
body : "时间到了！" ,
} ) ;
}
modal. style. display = "none" ;
}
script > body > html >
