练习的目的在于练熟，也在于积累，有的时候我们写一些js的特效，你会通常这样子，会在百度搜索，然后在相应的网站找到我们所需要的特别效果，但通常需求我们自己再修改，如果你做了这次的例子之后再将其记录下来，你下次再需要做同样特效时，找回以前的例子看一看就好了，比你再慢慢从百度上面找那会快不少。
更多干货请关注微信公众号：nedsoft
其实对于练习，也没有太多的技巧可言，无非就一个字---勤，在练习工程中你可以看到很多方法，这里推荐一个前端的练习网站w3school.com.cn这个
这里不仅可以练习，还可以看到例如前端的API一类，是一个对于练习和查询一些JS的类还有方法的一个不错的网站。
把很多例如JS对方啊，一些常用的方法，练习一下，大概1两个星期就可以玩得比较好了，有些时候我们会把做些特效，这个可以我们通常就是问百度啦，下载下来修改以下，下面我们演示一个修改的过程，按个这个套路练习，然后把我们做过的练习都自己保存下来，当有需要的时候就可以很快解决问题了。
现在我修改一个关于时间的脚本，是一个计时器的脚本，这种脚本很多时候用到，按照这个演示来练习，其实就很容易上手。
<!DOCTYPEhtml>
<htmllang="en">
<head>
<meta charset="gbk">
<title>计时器</title>
<script>
var hour,minute,second;//时 分 秒
hour=minute=second=0;//初始化
var millisecond=0;//毫秒
var int;
function Reset()//重置
{
window.clearInterval(int);
millisecond=hour=minute=second=0;
document.getElementById('timetext').value='00时00分00秒000毫秒';
}
function start()//开始
{
int=setInterval(timer,50);
}
function timer()//计时
{
millisecond=millisecond+50;
if(millisecond>=1000)
{
millisecond=0;
second=second+1;
}
if(second>=60)
{
second=0;
minute=minute+1;
}
if(minute>=60)
{
minute=0;
hour=hour+1;
}
document.getElementById('timetext').value=hour+'时'+minute+'分'+second+'秒'+millisecond+'毫秒';
}
function stop()//暂停
{
window.clearInterval(int);
}
</script>
</head>
<body>
<divstyle="text-align: center">
<input type="text"id="timetext" value="00时00分00秒"readonly><br>
<button type="button"onclick="start()">开始</button> <button type="button"onclick="stop()">暂停</button><button type="button" onclick="Reset()">重置</button>
</div>
</body>
</html>
现在我要将其修改为一个只有一个开始按钮，然后倒数10秒，期间这个按钮是灰色的，10秒后才能重新发送。
现在注释了重置的JS代码，我们调试的时候按F12，然后就会弹出以下错误，这些错误，只要你点进去，然后错误原因，错误位置都可以找到。
然后将其作以下修改，看看能否达到我们的要求。
发现不可以
开始找原因，这里就要用到断点调试，这里断点很容易，比如我在27行打断点，就鼠标左键点击一下调试器那里27行就可以，现在怀疑second值没有变，那么鼠标放在second这个参数上面，看看其值
这里就找到原因了，还是10，那么就要对second这个值进行修改了，修改成这样
成功了，之后就是0秒停止，和变灰操作了，逐个来
变成0的容易，因为已经有了，直接调用就行
变灰操作是这样，一点击就变灰，然后时间到了可以再重发，颜色变回来
假如我们不知道按钮这个对象有什么属性，上w3school.com.cn查就可以
对于按钮，有其属性，例如能不能用之类
对于每个HTML DOM（按钮也是一种），都可以设置其style，所以我们找这两个就可以，先是style
最后贴上完整代码
<!DOCTYPE html>
<html>
<head>
<metacharset="gbk">
<title>计时器</title>
<script>
varhour,minute,second;//时 分 秒
//hour=minute=second=0;//初始化
varmillisecond=0;//毫秒
var int;
/* function Reset()//重置
{
window.clearInterval(int);
millisecond=hour=minute=second=0;
document.getElementById('timetext').value='00时00分00秒000毫秒';
}
*/
functionstart()//开始
{
second=10;
document.getElementById('start').disabled=true;
int=setInterval(timer,1000);
}
functiontimer()//计时
{
if(second==0){
stop();
document.getElementById('start').disabled=false;
}else{
document.getElementById('start').innerHTML='重新发送';
document.getElementById('timetext').value=--second+'秒';
}
}
functionstop()//暂停
{
window.clearInterval(int);
}
</script>
</head>
<body>
<div style="text-align: center">
<inputtype="text" id="timetext" value="10秒"readonly><br>
<buttontype="button" id="start" onclick="start()">开始</button>
<!-- <buttontype="button" onclick="stop()">暂停</button>
<buttontype="button" onclick="Reset()">重置</button>
--!>
</div>
</body>
</html>
本文摘自：诗东教育，网址:www.nedsoft.cn