练习的目的在于练熟,也在于积累,有的时候我们写一些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