Share Code Web - Chia sẻ niềm đam mê bất tận > Lập trình > Web Design > Ajax-Jquery-Javascript > Tạo đồng hồ đếm ngược Pomodoro hiệu quả

Tạo đồng hồ đếm ngược Pomodoro hiệu quả

Publish Date: 05/09/2018 | Category: Ajax-Jquery-Javascript

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” là phương pháp viết nhật kí hay ghi chú công việc hàng ngày dưới dạng “bullet point”, sử dụng những kí hiệu để thể hiện những công việc và hoạt động của bạn, hay người ta còn gọi đó là “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.
focusMe

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é.

<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>

<h1>Pomodoro music timer</h1>

</header>

<main>

</div>

</div>

<p>break time</p>

</div>

</div>

</div>

<span>radio list</span>

<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>

</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.

/* ############ 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;
}

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.

'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;
}

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!

Có liên quan

Thẻ:đồng hồ đếm ngược, pomodoro, pomodoro clock, pomodoro timer

Tác giả: Nguyễn Trung Hiếu

Một blogger ... cùi bắp! Đơn giản: tôi muốn ghi lại những gì xảy ra xung quanh, cả công việc lẫn cuộc sống và chia sẻ với các bạn đọc. Nếu bạn cảm thấy bài viết có nhiều điểm không chính xác, hãy comment và chia sẻ để tôi còn được học hỏi từ những góp ý của bạn. Email: hieunt.dcn@gmail.com

Bạn phải Đăng nhập để tham gia bình luận.

Chú ý

Hướng dẫn download trên Box.com

Series

Customize Wordpress Admin (6)
Hướng dẫn config theme wordpress (2)
Những plugin tuyệt vời cho wordpress (2)
Thiết kế theme Adaptive Blog (12)
Ubuntu 18.10 (1)
Wordpress for Beginner (7)

Mục lục

1 Pomodoro là gì
2 Tại sao lại nên dùng Kỹ thuật Pomodoro?
3 Các bước để thực hiện phương pháp Pomodoro
4 Để thực hiện hiệu quả phương pháp Pomodoro thì cần những gì?
5 Ứng dụng Pomodoro
6 Viết code tạo đồng hồ Pomodoro like a boss
- 6.1 Music pomodoro timer
7 Tổng kết

Blog Stats

4.006 hits

Tạo đồng hồ đếm ngược Pomodoro hiệu quả

Pomodoro là gì

Tại sao lại nên dùng Kỹ thuật Pomodoro?

Các bước để thực hiện phương pháp Pomodoro

Để thực hiện hiệu quả phương pháp Pomodoro thì cần những gì?

Ứng dụng Pomodoro

Extension Marinara: Pomodoro® Assistant for Chrome

Extension FocusMe: A Pomodoro Timer and Website

Forest: stay focused, be present

Viết code tạo đồng hồ Pomodoro like a boss

Music pomodoro timer

Tổng kết

Like this:

Có liên quan

Tác giả: Nguyễn Trung Hiếu

Leave a comment

Chú ý

Series

Mục lục

Blog Stats

Bài viết mới nhất

Follow me

Giới thiệu

Tạo đồng hồ đếm ngược Pomodoro hiệu quả

Pomodoro là gì

Tại sao lại nên dùng Kỹ thuật Pomodoro?

Các bước để thực hiện phương pháp Pomodoro

Để thực hiện hiệu quả phương pháp Pomodoro thì cần những gì?

Ứng dụng Pomodoro

Extension Marinara: Pomodoro® Assistant for Chrome

Extension FocusMe: A Pomodoro Timer and Website

Forest: stay focused, be present

Viết code tạo đồng hồ Pomodoro like a boss

Music pomodoro timer

Tổng kết

Share this:

Like this:

Có liên quan

Tác giả: Nguyễn Trung Hiếu

Leave a comment

Chú ý

Series

Mục lục

Blog Stats

Bài viết mới nhất

Follow me

Giới thiệu