Pomodoro 番茄時鐘(未完成預設版) | Programming Project

{"id":660738,"student_id":10,"content":"{\"html\":\"\u003c!DOCTYPE html\u003e\\n\u003chtml\u003e\\n\u003chead\u003e\\n\\t\u003ctitle\u003eDocument\u003c/title\u003e\\n\\t\u003cscript src=\\\"https://code.jquery.com/jquery-3.7.1.min.js\\\"\u003e\u003c/script\u003e\\n\u003c/head\u003e\\n\u003cbody\u003e\\n    \u003cdiv class=\\\"box\\\"\u003e\\n        \u003cbutton id=\\\"btn-a\\\" class=\\\"btn active\\\"\u003ePomodoro\u003c/button\u003e\\n        \u003cbutton id=\\\"btn-b\\\" class=\\\"btn\\\"\u003eShort break\u003c/button\u003e\\n        \u003ch1 class=\\\"h1\\\"\u003e00:00\u003c/h1\u003e\\n        \u003cbutton class=\\\"btn start-btn\\\" id=\\\"toggle\\\"\u003e開始\u003c/button\u003e\\n    \u003c/div\u003e\\n\u003c/body\u003e\\n\u003c/html\u003e\",\"css\":\"body {\\n    background: rgb(186, 73, 73);\\n    color: white;\\n    padding: 30px;\\n    font-family: Monospace;\\n}\\n\\nh1 {\\n    font-size: 5rem;\\n}\\n\\n.box {\\n    max-width: 500px;\\n    background-color: rgba(255, 255, 255, .2);\\n    padding: 30px;\\n    border-radius: 10px;\\n    text-align: center;\\n    margin: auto;\\n    cursor: pointer;\\n}\\n\\n.btn {\\n    background-color: rgba(255, 255, 255, 0);\\n    border-width: 0;\\n    padding: 10px;\\n    border-radius: 5px;\\n    color: white;\\n    font-family: Monospace;\\n}\\n\\n.active {\\n    background-color: rgba(0, 0, 0, .3);\\n}\\n\\n.start-btn {\\n    background-color: white;\\n    color: black;\\n}\",\"js\":\"var active = false; // true 表示倒數中 false 表示停止\\nvar timer = 60 * 25; // 倒數剩餘的秒數\\n\\nfunction update() {\\n    \\n    // 如果正在計時，就剩餘秒數 -1\\n    if (active) {\\n        timer -= 1;\\n    }\\n    \\n    // 如果剩餘秒數小於 0，就停止計時\\n    if (timer \u003c 0) {\\n        active = false;\\n    }\\n    \\n    var min = Math.floor(timer / 60); //算出分數\\n    var sec = timer % 60; //算出秒數\\n    if (min \u003c 10) min = '0' + min; //如果小於 0 就在前面補零\\n    if (sec \u003c 10) sec = '0' + sec; //如果小於 0 就在前面補零\\n    $('h1').text(min + ':' + sec); //將剩餘時間更新至 h1 元素\\n}\\n\\n// 當開始/暫停按鈕點擊\\nfunction toggle() {\\n    if (active) {\\n        active = false;\\n    } else {\\n        active = true;\\n    }\\n}\\n\\n// 設定 25 分鐘時間\\nfunction setPomodoro() {\\n    timer = 60 * 25;\\n    active = false;\\n    $('body').css('background', 'rgb(186, 73, 73)');\\n    $('.btn').removeClass('active');\\n    $('#set-a').addClass('active');\\n}\\n\\n// 設定 5 分鐘時間\\nfunction setShortBreak() {\\n    timer = 60 * 5;\\n    active = false;\\n    $('body').css('background', 'rgb(56, 133, 138)');\\n    $('.btn').removeClass('active');\\n    $('#btn-b').addClass('active');\\n}\\n\\n// 設定 10 分鐘時間\\n\\n\\n$('#btn-a').click(setPomodoro);\\n$('#btn-b').click(setShortBreak);\\n$('#toggle').click(toggle);\\n\\nsetInterval(update, 1000);\\n\\n\"}","created_at":"2023-12-14T18:02:27.361+08:00","updated_at":"2023-12-15T10:44:52.852+08:00","name":"Pomodoro 番茄時鐘(未完成預設版)","language":"web","screenshot":{"url":"/uploads/project/screenshot/660738/6723d82ab9ca07beedef8f5191873779.jpg"},"parent_id":3,"plugin":"","description":null,"note":null,"status":"public","like_student_ids":[],"is_featured":false,"views":250,"hashid":"npms4k5e8","is_content_changed":false,"review_status":"unsubmitted","submitted_at":null,"reviewed_at":null,"advise":null,"is_deleted":false}