在正文的第一句加入“我正在参加 码上掘金体验活动，详情：show出你的创意代码块”

前言

生活中很多地方都需要定时器来提醒自己记得做某件事。定时器应用于生活中的各个地方，如电饭煲预约煮饭，微波炉加热定时。那怎么用前端技术来实现一个简单可变定时器呢

代码

正文

1.框架搭建

首先搭建框架，三个input框和两个按钮

<div id="app">
  倒计时<input id="aa" value="5">分钟 <input id="start" type="button" value="开始倒计时"><input id="stop" type="button" value="停止倒计时">
  <br/>
        还剩<input id='min' readonly value="">分<input id='sec' readonly value="">秒
</div>

第一个input是输入定时时间，然后跟着两个启停动作控制按钮，后面两个input显示分钟和秒钟，设置属性为只读。

2.简单装饰

#min{
  background-color: gray;
  
}
#sec{
  background-color: gray;
}

设置两个只读的输入框背景色为灰色。

3.控制代码编写

首先定义个全局变量timer，然后开始写开始按钮的控制代码

$("#start").click(function () {
  $("#aa").attr("readonly", "true")
  var aa = $("#aa").val() * 60
  timer = setInterval(function () {
    console.info(aa)
    aa--
    var minutes = Math.floor(aa / 60)
    var seconds = aa % 60
    $("#min").val(minutes)
    $("#sec").val(seconds)
    if (aa == 0) {
      clearTimeout(timer)
    }
  }, 1000)
});

定位到开始计时的按钮之后，设置计时器为只读，避免在计时的过程中修改值。然后获取输入值，创建一个timer周期函数。1秒钟改变一次后面两个时间输入框的值，分钟的值是设置值x60/60, 取整数部分，秒钟取余。

$("#stop").click(function () {
  clearTimeout(timer)
  $("#min").val("")
  $("#sec").val("")
});

停止按钮实现起来就比较简单了，找到周期函数实例，然后清除，同时置空后面两个输入框。 到此，一个简单的web计数器就实现了。

结语

由于前端知识有限，对于美化方便没有做的特别多，后续学到了美化的知识之后再优化吧。