Bài viết chia sẻ những cách tạo một dạng đồng hồ đếm ngược phục vụ làm việc, học tập hiệu quả.
Hôm nay, khi xem lại những bài viết được nhiều người tìm đọc thì thấy có một bài tạo đồng hồ đếm ngược bằng ajax trong asp.net có vẻ được nhiều người quan tâm. Thành ra dành chút thời gian buổi sáng để “nghiên cứu” thêm về cái này. Trong quá trình tìm hiểu thì lại phát hiện ra thêm một phương pháp quản lý thời gian làm việc rất hiệu quả – Pomodoro.
Pomodoro là gì
Kỹ thuật này được đặt theo tên người “phát minh” ra nó – Francesco Cirillo nhằm nâng cao khả năng tập trung làm việc trong một khoảng thời gian định trước.
Pomodoro (Đầy đủ theo tiếng Anh là Pomodoro Technique) là 1 phương pháp quản trị thời gian để nâng cao tối đa sự tập trung trong công việc được giới thiệu bởi Francesco Cirillo – CEO của 1 công ty phần mềm người Italia vào năm 1980.– Theo Wikipedia
Tại sao lại nên dùng Kỹ thuật Pomodoro?
Khi dùng kỹ thuật Pomodoro thì chúng ta sẽ có rất nhiều lợi ích như:
- Loại bỏ cảm giác mệt mỏi
- Tăng cường tập trung và Quản lý sự xao nhãng
- Nâng cao nhận thức đối với các quyết định của bạn
- Tăng động lực làm việc và giữ cho nó duy trì liên tục
- Củng cố quyết tâm thực hiện đạt được mục tiêu của bạn
- Ước lượng chính xác và thông minh thời gian bạn cần dùng để hoàn thành một công việc
- Hoàn thành công việc tốt hơn
- Cân bằng cuộc sống
Nếu các bạn biết kết hợp giữa phương pháp quản lý thời gian Pomodoro này với phương pháp Bullet journal để viết nhật ký công tác sẽ rất hiệu quả.
Though it does require a notebook, Bullet Journal® is actually a methodology. It’s best described as a mindfulness practice disguised as a productivity system. It’s designed to help you organize your what while you remain aware of your why. The goal of the Bullet Journal is to help its practitioners (bullet journalists) live intentional lives, ones that are productive and meaningful.– Theo BulletJournal.com
“Bullet journal” hay “Bujo” là phương pháp viết nhật kí hay ghi chú công việc hàng ngày dưới dạng “bullet point”, sử dụng những kí hiệu để thể hiện những công việc và hoạt động của bạn, hay người ta còn gọi đó là “Keys”.– www.hayleyvu.com
Các bước để thực hiện phương pháp Pomodoro
Để thực hiện được phương pháp này, các bạn cần phải tuân thủ theo các bước như sau:
- Bước 1: Chọn công việc mình sẽ làm.
- Bước 2: Đặt thời gian, thông thường là 25 phút.
- Bước 3: Làm việc cho đến khi hết 25 phút
- Bước 4: Nghỉ giải lao 5 phút.
- Bước 5: Sau 4 lần nghỉ giải lao trên thì nghỉ dài hơn với 10 phút (hoặc 15 – 30 phút tùy công việc và sức của mỗi người).
Trong quá trình thực hiện, nếu gián đoạn thì sẽ reset từ đầu. Chỉ tập trung làm 100% công việc đã đề ra và trong các khoảng nghỉ thì nên nghỉ “thực sự” như: nghe nhạc, thể dục tại chỗ, uống nước, mát xa đầu….
Để thực hiện hiệu quả phương pháp Pomodoro thì cần những gì?
Rất đơn giản, bạn chỉ cần có một đồng hồ đếm ngược để đo thời gian và rung chuông khi hết thời gian mà thôi. Trên thị trường có rất nhiều loại đồng hồ pomodoro khác nhau với nhiều hình dáng đẹp mắt. Các bạn có thể lên Amazon.com tìm Pomodoro clock tham khảo nhé.
Nhưng đâu phải ai cũng có điều kiện mua sắm cho mình một chiếc đồng hồ như vậy. Với dân công nghệ chúng ta thì có rất nhiều cách khác nhau để hiện thực hóa điều này.
Ứng dụng Pomodoro
Extension Marinara: Pomodoro® Assistant for Chrome
Ứng dụng Marinara: Pomodoro® Assistant này đúng chất là một trợ lý ảo về quản lý thời gian theo phương pháp Pomodoro.
Những tính năng có thể kể đến như:
- Thời gian nghỉ ngắn & dài
- Có biểu tượng trên thanh công cụ với đồng hồ đếm ngược
- Theo dõi lịch sử & số liệu thống kê Pomodoro
- Có thể tùy biến các khoảng thời gian nghỉ dài
- Thời lượng hẹn giờ có thể tùy biến dễ dàng
- Thông báo trên màn hình và tab
- Thông báo âm thanh với hơn 20 loại âm thanh
Extension FocusMe: A Pomodoro Timer and Website
FocusMe cung cấp một giao diện người dùng đơn giản nhưng hiệu quả để quản lý các giai đoạn tập trung và thư giãn này. FocusMe dựa trên kỹ thuật Pomodoro để quản lý thời gian. Khi phải đối mặt với bất kỳ nhiệm vụ hoặc chuỗi nhiệm vụ lớn nào, hãy chia nhỏ công việc thành các khoảng thời gian ngắn (được gọi là ‘Pomodoros’) được đặt cách nhau bằng khoảng thời gian ngắn. Điều này cho phép bạn tập trung tâm trí của mình và hoàn thành công việc tốt.
Forest: stay focused, be present
Forest cung cấp một giải pháp thú vị để giúp bạn tránh nghiện Internet. Bạn có thể trồng một hạt giống trong rừng. Trong 30 phút tiếp theo, hạt giống này sẽ dần dần phát triển thành một cái cây. Tuy nhiên, nếu bạn không thể cưỡng lại sự cám dỗ và bắt đầu duyệt các trang web trong Danh sách đen của bạn, cây của bạn sẽ khô héo. Với cơ chế thú vị này, ý thức về thành tích và trách nhiệm sẽ thúc đẩy người dùng của chúng tôi tránh xa những phiền nhiễu không đau đớn. Đặc biệt, ứng dụng này hỗ trợ tốt đa nền tảng từ IoS đến Android hoặc trên PC.
Tham khảo: website | IOS | Android | Extension for Chrome
Viết code tạo đồng hồ Pomodoro like a boss
Mình là dân công nghệ, nhiều khi cũng phải tận dụng “cây nhà lá vườn” đế chế ra mà dùng chứ nhỉ. Nếu không thích dùng ứng dụng có sẵn, các bạn có thể tham khảo một vài code tạo đồng hồ Pomodoro sau đây.
Music pomodoro timer
Để làm được mẫu đồng hồ như trên ta cần ba tập tin: index.html, style.css và clock.js. Ngoài ra còn cần các tập tin âm thanh để rung báo nếu muốn.
Đoạn code trong tập tin index.html
dưới đây là có sử dụng Bootstrap và Font awsome nhé.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 | <div class="container"> <header> <h1>Pomodoro music timer</h1> </header> <main> <div id="main-output"> <span id="work-output">WORK TIME</span> <div id="output">00:00</div> </div> <div class="timer"> <p>work time</p> <span id="timer-decrease"><i class="fa fa-arrow-circle-left fa-lg"></i></span> <span id="timer-input">25</span> <span id="timer-increase"><i class="fa fa-arrow-circle-right fa-lg"></i></span> </div> <div class="break"> <p>break time</p> <span id="break-decrease"><i class="fa fa-arrow-circle-left fa-lg"></i></span> <span id="break-input">5</span> <span id="break-increase"><i class="fa fa-arrow-circle-right fa-lg"></i></span> </div> <div class="buttons"> <button id="start" class="btn"><i class="fa fa-play fa-lg"></i></button> <button id="stop" class="btn" disabled><i class="fa fa-stop fa-lg" ></i></button> <div class="clear"></div> </div> <div class="slider"> <span>vol</span> <input id="volume" type="range" min="0" max="100" step="5" value="20"> <div class="clear"></div> </div> <div class="select"> <span>radio list</span> <select id="radio-list" name="select"> <option value="0">Chromanova</option> <option value="1">Nirvana</option> <option value="2">Ambient</option> <option value="3">Bassdrive</option> <option value="4">DnB Heaven</option> <option value="5">DnB Liquified</option> </select> </div> <div class="clear"></div> </main> </div> |
Trong đoạn CSS bên dưới có sử dụng thuộc tính Background lấy màu dạng Gradient
, box-shadow
và appearance
. Các bạn có thể tham khảo thêm trên Google về ý nghĩa của các thuộc tính này nhé. Còn lại chỉ là những CSS đơn giản thôi.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 | /* ############ COLORS ############## */ /* ############ END/COLORS ############## */ /* ############ TYPOGRAPHY ############## */ h1 { font-size: 18px; text-transform: uppercase; padding-top: 10px; padding-bottom: 10px; } a { color: #FE5F55; text-decoration: none; outline: none; } a:hover, a:focus, a:active { color: #DB504A; } /* ############ END/TYPOGRAPHY ############## */ /* ############ BUTTONS ############## */ .btn { line-height: 55px; padding: 0 20px; border-radius: 55px; border: 1px solid #ebebeb; background: transparent; color: #ebebeb; outline: none; } .btn:hover, .btn:focus { color: #FE5F55; border-color: #FE5F55; } .btn:active { color: #DB504A; border-color: #DB504A; } /* ############ END/BUTTONS ############## */ body { background: #3A3545; color: #ebebeb; font-size: 20px; font-family: 'Oswald', sans-serif; } .green { color: #CBEAA6; } .blue { color: #6CCFF6; } .red { color: #DB504A; } .container { margin: 20px auto 0 auto; text-align: center; width: 300px; min-height: 480px; background: #3A3545; background: -webkit-radial-gradient(#575065, #3A3545); /* Safari 5.1 to 6.0 */ background: -o-radial-gradient(#575065, #3A3545); /* For Opera 11.6 to 12.0 */ background: -moz-radial-gradient(#575065, #3A3545); /* For Firefox 3.6 to 15 */ background: radial-gradient(#575065, #3A3545); /* Standard syntax */ -webkit-box-shadow: 0px 5px 16px 6px rgba(0, 0, 0, 0.75); -moz-box-shadow: 0px 5px 16px 6px rgba(0, 0, 0, 0.75); box-shadow: 0px 5px 16px 6px rgba(0, 0, 0, 0.75); } .clear { clear: both; } #output { font-size: 60px; padding: 5px; } .timer { font-size: 25px; float: left; padding: 0 10px 10px 15px; cursor: pointer; } .timer:hover, .timer:focus { color: #FE5F55; border-color: #FE5F55; } .timer:active { color: #DB504A; border-color: #DB504A; } .timer #timer-input { padding: 16px; } .break { cursor: pointer; font-size: 25px; padding: 0 10px 10px 10px; } .break:hover, .break:focus { color: #FE5F55; border-color: #FE5F55; } .break:active { color: #DB504A; border-color: #DB504A; } .break #break-input { padding: 15px; } p { margin-top: 0; font-size: 20px; } .buttons { padding: 10px; } .buttons button { cursor: pointer; margin: 5px; } .slider span { float: left; margin-left: 65px; padding-top: 12px; } .slider #volume { padding-top: 2px; width: 150px; float: right; margin-right: 35px; } .select span { float: left; margin-left: 20px; margin-top: 14px; } select { cursor: pointer; float: right; margin: 15px 35px 0 0; background: #ebebeb url("https://www.dropbox.com/s/idu8lqyjba9fooa/arrow.png?raw=1") no-repeat 90% 20%; padding: 5px 68px 5px 5px; border: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; } select:active, select:hover, select:focus { background: #575065 url("https://www.dropbox.com/s/idu8lqyjba9fooa/arrow.png?raw=1") no-repeat 90% 20%; } footer { margin-top: 10px; text-align: center; } /*+++++++++++++++++++++++++++++*/ input { background: transparent; } [type=range] { -webkit-appearance: none; margin: 15px 0; width: 100%; } [type=range]:focus { outline: none; } [type=range]::-webkit-slider-runnable-track { width: 100%; height: 10px; cursor: pointer; transition: all .2s ease; box-shadow: 0px 0px 0px #222, 0 0 0px #2f2f2f; background: #ebebeb; border: 0px solid #000; border-radius: 0px; } [type=range]::-webkit-slider-thumb { box-shadow: 0px 0px 0px #111, 0 0 0px #1e1e1e; border: 1px solid #ebebeb; height: 30px; width: 30px; border-radius: 50px; background: #3A3545; cursor: pointer; -webkit-appearance: none; margin-top: -10px; } [type=range]:focus::-webkit-slider-runnable-track { background: #f8f8f8; } [type=range]::-moz-range-track { width: 100%; height: 10px; cursor: pointer; transition: all .2s ease; box-shadow: 0px 0px 0px #222, 0 0 0px #2f2f2f; background: #ebebeb; border: 0px solid #000; border-radius: 0px; } [type=range]::-moz-range-thumb { box-shadow: 0px 0px 0px #111, 0 0 0px #1e1e1e; border: 1px solid #ebebeb; height: 30px; width: 30px; border-radius: 50px; background: #3A3545; cursor: pointer; } [type=range]::-ms-track { width: 100%; height: 10px; cursor: pointer; transition: all .2s ease; background: transparent; border-color: transparent; border-width: 30px 0; color: transparent; } [type=range]::-ms-fill-lower { box-shadow: 0px 0px 0px #222, 0 0 0px #2f2f2f; background: #dedede; border: 0px solid #000; border-radius: 0px; } [type=range]::-ms-fill-upper { box-shadow: 0px 0px 0px #222, 0 0 0px #2f2f2f; background: #ebebeb; border: 0px solid #000; border-radius: 0px; } [type=range]::-ms-thumb { box-shadow: 0px 0px 0px #111, 0 0 0px #1e1e1e; border: 1px solid #ebebeb; height: 30px; width: 30px; border-radius: 50px; background: #3A3545; cursor: pointer; } [type=range]:focus::-ms-fill-lower { background: #ebebeb; } [type=range]:focus::-ms-fill-upper { background: #f8f8f8; } |
Cuối cùng là tập tin clock.js để thực hiện việc đếm ngược và phát nhạc khi hết thời gian.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 | 'use strict'; var t; var workTime = 25; var breakTime = 5; var minuteAlarm = document.createElement('audio'); //file âm thanh lấy từ nguồn bên ngoài minuteAlarm.src = 'https://www.dropbox.com/s/czuyrdnzmm27n66/minute-alarm.mp3?dl=1'; minuteAlarm.volume = 0.0; function timer(minutes) { //thiết lập thông số về thời gian. var sec = minutes * 60; var min, seconds, time; var start = new Date().getTime(); start = start + (sec * 1000); timedCount(); //Hàm đếm thời gian function timedCount() { var newTime = start - new Date().getTime(); // giảm số giây sec = Math.floor(newTime/1000); console.log('sec'+sec); // tính thời gian nghỉ var breakSec = breakTime * 60; // Nếu bộ đếm thời gian gặp break time, xuất break time, remove resume btn, // Dừng phát nhạc và tắt nút radio if(sec == breakSec){ document.getElementById('main-output').classList.remove('blue'); document.getElementById('main-output').classList.add('green'); document.getElementById('work-output').innerHTML = 'BREAK TIME'; stopAudio(); playAlarm(); enableRadioBtn(false); console.log('<<beep>> Break time start!'); } // Nếu thời gian còn 1 phút, bật music volume, // Phát nhạc và sau 3 giây sẽ tăng âm lượng if ((sec - breakSec) == 60) { // console.log('volume before: '+audio.volume); audio.volume = 0.1; minuteAlarm.volume = 0.4; // console.log('volume decreased: '+audio.volume); playAlarm(); // console.log('<<beep>> one minute till end. of work time'); }else if((sec - breakSec) == 57){ audio.volume = document.getElementById('volume').value / 100; //console.log('volume after: '+audio.volume); } (sec < breakSec)? time = sec : time = sec - breakSec ; min = Math.floor(time / 60); min = (min <= 9) ? '0' + min : min; seconds = time % 60; seconds = (seconds <= 9) ? '0' + seconds : seconds; // run if c not zero if (sec !== -1) { // set timeout to 1 sec t = setTimeout(function() { timedCount(); }, 100); //console.log('timer: ' + min + ':' + seconds); return document.getElementById('output').innerHTML = min + ':' + seconds; } // else stop counting stopCount(); playAlarm(); // console.log('timer: 00:00'); document.getElementById('main-output').classList.remove('green'); document.getElementById('main-output').classList.add('red'); document.getElementById('work-output').innerHTML = 'Session ended.'; return document.getElementById('output').innerHTML = '00:00'; } } // stop counting function stopCount() { console.log('stop countdown!'); return clearTimeout(t); } document.getElementById('start').addEventListener('click' , function(){ var wholeTime = breakTime + workTime; document.getElementById('main-output').classList.remove('red'); document.getElementById('main-output').classList.add('blue'); document.getElementById('work-output').innerHTML = 'WORK TIME'; document.getElementById('stop').disabled = false; stopCount(); playAudio(); minuteAlarm.volume = 0.0; playAlarm(); enableRadioBtn(true); timer(wholeTime); }); // stop btn, stop counting time, stop audio, enable resume btn document.getElementById('stop').addEventListener('click' , function(){ stopCount(); stopAudio(); }); //Lấy nguồn radio var audio = document.createElement('audio'); audio.src = 'http://176.31.123.212:9192/;'; audio.volume = 0.2; var radioList = document.getElementById('radio-list'); var list = ['http://176.31.123.212:9192/;','http://81.219.54.6:8004/;','http://163.172.166.114:80/asp-s','http://50.7.70.66:8200/;','http://95.168.216.197:8555/;','http://198.105.223.94:8000/;']; radioList.addEventListener('change', function(){ var num = this.value; audio.src = list[num]; stopAudio(); playAudio(); // console.log('audio src:'+audio.src); }); function enableRadioBtn(x){ if(x){ document.getElementById('radio-list').disabled = false; }else{ document.getElementById('radio-list').disabled= true; } } // play music function playAudio(){ audio.play(); console.log('play audio!'); } // pause music function stopAudio(){ audio.pause(); console.log('paused audio!'); } // change volume of audio document.getElementById('volume').addEventListener('change', function(){ audio.volume = this.value / 100; // console.log('audio volume: '+audio.volume); }); // create audio element, break alarm or minute alarm and play it function playAlarm(x){ //minuteAlarm.src = ''; //(x)? minuteAlarm.src = '/images/break-alarm.mp3'; : minuteAlarm.src = '/images/minute-alarm.mp3'; minuteAlarm.play(); } // event listeners on break and work time buttons document.getElementById('timer-increase').addEventListener('click',function(){ timerInput(true); }); document.getElementById('timer-decrease').addEventListener('click',function(){ timerInput(false); }); document.getElementById('break-increase').addEventListener('click',function(){ breakInput(true); }); document.getElementById('break-decrease').addEventListener('click',function(){ breakInput(false); }); // Hàm tăng và giảm thời gian breakTime function breakInput(increment){ var breakInput = document.getElementById('break-input'); // breakTime must be between 15 and 5 and output in html if(breakTime < 15 && breakTime > 5){ // if increment true increment breakTime, else decrement (increment)? breakTime++ : breakTime--; }else if(breakTime == 5 && increment == true){ breakTime++; }else if(breakTime == 15 && increment == false){ breakTime--; } console.log('break time: '+breakTime); return breakInput.innerHTML = breakTime; } // Hàm tăng và giảm thơi gian workTime function timerInput(increment){ var timerInput = document.getElementById('timer-input'); // workTime must be between 10 and 55 and output in html if(workTime < 55 && workTime > 10){ // if increment true increment workTime, else decrement (increment)? workTime++ : workTime--; }else if(workTime == 10 && increment == true){ workTime++; }else if(workTime == 55 && increment == false){ workTime--; } console.log('work time: '+workTime); return timerInput.innerHTML = workTime; } |
Với ba tập tin bên trên các bạn đã có thể tự tạo cho mình một ứng dụng đếm ngược thời gian Pomodoro cực chất rồi.
Nếu cần các bạn có thể tham khảo thêm một vài mẫu dưới đây:
See the Pen Pomodoro Clock [FreeCodeCamp] by Jay Karlsven (@JayV30) on CodePen.
See the Pen Pomodoro Clock by TeckL (@teckliew) on CodePen.
See the Pen Pomodoro Clock by Putra Aryotama (@putraaryotama) on CodePen.
See the Pen Pomodoro Clock by Refat (@Reni1996) on CodePen.
Tổng kết
Hy vọng với bài viết này, các bạn có thể áp dụng phương pháp quản lý thời gian Pomodoro trong quá trình công tác và làm việc sao cho hiệu quả. Chúc các bạn thành công!
You must log in to post a comment.