今天我教大家的内容是用input标签计数，这个方法主要是用一次性计时器来实现，当然我们也可以用间隔计时器来实现。打开我们的开发工具(Adobe Dreamweaver CC 2017)，简称DW。首先我们把页面布局，下面是我布局的代码：
我在上面布局三个按钮，分别给它们的id，由于实现这个功能要用到js，所以我创建了一个js来实现我们下面的功能，然后把js引进来。下面是我们布局出来的样式图：
我主要实现的功能是当点击开始计数的时候，在input标签就会显示数字，让数字按我们设置的一次性计时器自动增加。当我们点击停止计数的时候让数字停止，再次点击开始计数，数字会接着增加。在上面我设置一个sayHello按钮，当我们点击这个按钮的时候，会弹出一个提示框。页面布局好之后，我们就要开始写实现计数的方法。来到创建的js，我在js里面写一个页面载入事件，当页面载入完成，我们调用里面的方法。我们先来把上面的按钮的功能给完成，
var btnHello=document.getElementById(‘btnHello’);
btnHello.οnclick=function(){
sayHello();
};
function sayHello(){
var timerTimeout=setTimeout(“alert(‘hello! everyone’)”,1000);
}
我们用document.getElementById把上面按钮的id给获取，当我们点击btnHello的时候，调用sayHello的方法，让它到一秒的时候，弹出一个提示框，弹出提示框后，停止计数，点击确定的时候继续计数。上面的按钮完成，我们就要开始做点击开始和停止按钮了。
上面是我们需要声明的变量，获取开始和停止按钮的id。下面是实现功能的代码：
startCount.οnclick=function(){
if(tranfor){
return ;
}
timerInterval=setInterval(start,100);
};
stopCount.οnclick=function(){
clearInterval(timerInterval);
tranfor=false;
};
function start(){
tranfor=true;
document.getElementById(‘count’).value=num;
num++;
}
当我们点击startCount的时候，让tranfor等于return,然后调用一次性计时器的方法，我是让它每毫秒调用一次，当我们点击stopCount，让timerInterval进行停止，tranfor等于false。然后我们把tranfor等于true的时候在input标签自动增加。(如下图)
学习总结：通过这次学习，我学到了如何用input标签计数。虽然代码量不多，但是里面的内容，我们可以用来做其它的动画效果，例如我们的轮播就需要用计时器来完成。我们不能只看到数量的问题，我们更重要看到的是实现的功能，当然学习IT更希望的是以少量的代码，可以实现更多的功能。我希望大家可以在里面找到自己要有用的代码，去改写，去创新。