怕自己注意力不集中？来做一个属于自己的番茄闹钟把
Posted 啵啵丶
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了怕自己注意力不集中？来做一个属于自己的番茄闹钟把相关的知识，希望对你有一定的参考价值。
首先
虽然这第一步不需要什么技术，但是也是非常重要的，那就是找一个好看的背景！你想啊，如果你做的闹钟外观看起来不怎么样或者说是你不喜欢的样式，那你会去用吗？（反正如果是我，我可能做完就放在那不会再打开了）所以，先不要想要去怎么构思代码，找背景才是关键！（我是找了好久，勉强找了一个能看的，简约且又像闹钟）给你们瞅瞅（emmm...不要吐槽！不要吐槽！）
图片找好了那就要开始布局了，想想你的倒计时要放在哪里，以及时长的选择还有一些功能键的位置，因为我选的图片正好是居中放置的，所以其他的功能键也居中放看起来会正常点。
进而
页面布局好了，那就要开始构思代码了。我们先把重点部分写好 ，再写优化的功能部分。这里我们要实现的是倒计时功能，所以重点就是倒计时部分。既然跟时间有关，那自然而然就会想到Date() 对象，对！一开始我也是这么想的，但当你深入去构思代码的时候，发现其实根本不需要使用Date()！那不就简单多了，只需要把用户输入的时长，转化成毫秒或秒，再使用定时器，隔一秒就让转化后的时间减1（如果是毫秒就要减 1000），并每次减完再转化成时分秒显示到页面上。
//转化为小时
var h = parseInt((time / 1000)/60/60%12);
//如果转化后的值小于10，就在前面添加0
h = h >= 10 ? h : '0' + h;
//转化为分钟
var m = parseInt((time / 1000)/60%60);
m = m >= 10 ? m : '0' + m;
//转化为秒
var s = parseInt((time / 1000)%60);
s = s >= 10 ? s : '0' + s;其次
主要功能写好了，那就开始写必须要有的时常选择模块，这里我用了 select 标签做的，这时有人就问，用Input表单获取用户自己输入的时间不是体验感更好吗，但是你们想想如果用了Input，万一有人故意输入一些很长很长的并且带小数点的值，很明显这样去计算就没有什么意义，而且说不准还会导致程序的崩溃。所以与其这样，还不如设置几个比较常用的且合理的固定的值，让用户去选择，这里你们可以根据自己的喜好去设置。
<select id="choice">
<option>6秒</option>
<option >10分钟</option>
<option >30分钟</option>
<option>60分钟</option>
<option>120分钟</option>
</select> 补充一个知识点：获取select中当前选中的值
k = parseInt($('#choice option:selected').text());最后
最后就是补充几个功能键，这里我做了开始、暂停、重置这三个功能，开始键里要做的就是开启定时器，和当用户按了暂停再继续在当前时间上倒计时，暂停按钮要做的就是清除定时器，重置按钮就是用来让页面初始化的，因为三个按钮功能都不一样，所以我就分开写了。
$('.btn button').eq(0).on('click',function()
$('.hidden').hide();
if(flag)
Datetime(k);
//flag用来判断前一个状态是点完暂停还是重新开始的
flag = false;
else
Obj(p);
)
$('.btn button').eq(1).on('click',function()
clearInterval(timer);
)
$('.btn button').eq(2).on('click',function()
//全部初始化
clearInterval(timer);
$('ul li').eq(0).html('00');
$('ul li').eq(2).html('00');
$('ul li').eq(4).html('00');
flag = true;
p = 0;
)补充
为了让这个闹钟看起来没那么压抑，我还做了当时间到了以后，会提示说该休息了~伴着愉快的心情
完整代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="jQuery.min.js"></script>
<style>
body
background-color: antiquewhite;
*
margin: 0;
padding: 0;
list-style: none;
box-sizing: border-box;
.box
position: relative;
width: 500px;
height: 400px;
margin: 100px auto;
.box img
width: 100%;
height: 100%;
.box ul
position: absolute;
top: 173px;
left: 157px;
display: flex;
ul li
width: 30px;
height: 50px;
margin: 0 2px;
font-size: 30px;
font-weight: 700;
text-align: center;
line-height: 50px;
color:#ec6d31;
select
position: absolute;
bottom: -46px;
left: 50px;
padding: 6px 18px;
outline: none;
background-color: rgb(246, 255, 127);
.btn
position: absolute;
bottom: -46px;
left: 205px;
.btn button
width: 60px;
height: 30px;
cursor: pointer;
background-color: aquamarine;
border: none;
border-radius: 10px;
font-weight: 700;
.btn button:hover
background-color:cornflowerblue;
.hidden
display: none;
position: absolute;
top: 100px;
left: -381px;
.hidden img
width: 200px;
height: 170px;
.hidden p
font-weight: 700;
</style>
</head>
<body>
<div class="box">
<div class="hidden">
<img src="./images/小黄人.gif" alt="">
<p>休息啦！可以耍去了！</p>
</div>
<img src="./images/时钟背景2.jpg" alt="">
<ul>
<li>00</li>
<li>:</li>
<li>00</li>
<li>:</li>
<li>00</li>
</ul>
<select id="choice">
<option>6秒</option>
<option >10分钟</option>
<option >30分钟</option>
<option>60分钟</option>
<option>120分钟</option>
</select>
<div class="btn">
<button>开始</button>
<button>暂停</button>
<button>重置</button>
</div>
</div>
<script>
$(function()
var k = 0.1;
var timer = null;
var flag = true;
var p = 0;
// Datetime(10);
$('.btn button').eq(0).on('click',function()
$('.hidden').hide();
if(flag)
Datetime(k);
flag = false;
else
Obj(p);
)
$('.btn button').eq(1).on('click',function()
clearInterval(timer);
)
$('.btn button').eq(2).on('click',function()
clearInterval(timer);
$('ul li').eq(0).html('00');
$('ul li').eq(2).html('00');
$('ul li').eq(4).html('00');
flag = true;
p = 0;
)
$('#choice').on('change',function()
k = parseInt($('#choice option:selected').text());
clearInterval(timer);
flag = true;
)
function Obj(time)
timer = setInterval(function()
var h = parseInt((time / 1000)/60/60%12);
h = h >= 10 ? h : '0' + h;
var m = parseInt((time / 1000)/60%60);
m = m >= 10 ? m : '0' + m;
var s = parseInt((time / 1000)%60);
s = s >= 10 ? s : '0' + s;
$('ul li').eq(0).html(h);
$('ul li').eq(2).html(m);
$('ul li').eq(4).html(s);
time-= 1000;
p = time;
if(time < 0)
clearInterval(timer);
$('.hidden').show();
flag = true;
,1000)
function Datetime(time)
time = time * 60 * 1000;
Obj(time);
)
</script>
</body>
</html> 
以上是关于怕自己注意力不集中？来做一个属于自己的番茄闹钟把的主要内容，如果未能解决你的问题，请参考以下文章