简单介绍下使用js定时方法setTimeout与setInterval简单实现几种常见的网页网页特效以及功能。
首先先了解下Window setTimeout()方法
它可以实现在指定的毫秒数之后开始调用指定的函数或者表达式.
示例:
1、比如需要在页面中6秒后输出文字内容:www.qtool.net
代码如下:
<div id="aaa"></div>
<script type="text/javascript">
function shuchuneirong() {
document.getElementById("aaa").innerHTML = "www.qtool.net";
}
setTimeout(shuchuneirong, 6000);
</script>
首先在页面中间一个id为aaa的元素,然后再在js中定义一个js函数shuchuneirong()
指定id输出文字内容,然后通过setTimeout函数6秒后去执行输出函数shuchuneirong()
2、实现网页的定时跳转到指定新页面的功能
<script type="text/javascript">
function zhidingurl(){
window.location = " "; //要跳转到新页面网址
}
setTimeout(zhidingurl, 5000);
</script>
示例2定义一个名称为zhidingurl的函数,其内容动作为跳转到指定网页,然后设置定时器setTimeout 5000毫秒后执行该函数动作.
3、显示倒计时数字减小效果
<span id="newnum"></span>
<script type="text/javascript">
var newnum = 100;
function jishu(){
document.getElementById("newnum").innerHTML = newnum;
newnum--;
window.setTimeout(jishu, 1000);
}
jishu();
</script>
在网页页面中创建一个名称为newnum的div元素,定义一个js变量newnum值为100,定义一个jishu函数输出数字,以及递减数字,执行的时间间隔为1秒。
然后调用jishu函数来实现计数。
4、或者:
<div id="num"></div>
<script type="text/javascript">
var num=100;
var zxx=setInterval(daotime,1000);
function daotime(){
if(num==0){
clearInterval(zxx);
}
document.getElementById('num').innerHTML=""+num+"秒";
num--;
}
</script>
在以上代码中使用到了setInterval方法,它与setTimeout方法类似,但是setTimeout方法只执行一次后就停止调用,而setInterval方法可以按照指定毫秒时间间隔周期来重复的调用函数。
5、页面定时显示不同的图片
<div id="gdtu"></div>
<script type="text/javascript">
function tupiangd(i){
i++;
if(i==1){
document.getElementById('gdtu').innerHTML='<img src="www图片1地址" alt="" />';
};
if(i==2){
document.getElementById('gdtu').innerHTML='<img src="qtool图片2地址" alt="" />';
};
if(i==3){
document.getElementById('gdtu').innerHTML='<img src="net图片3地址" alt="" />';
i=0;
};
setTimeout("tupiangd("+i+")",5000);
};
tupiangd(0);
</script>
其原理为同上通过重复调用自定义的函数tupiangd传递变量i的值,判断每执行5000毫秒后变量i的数值来实现指定间隔的时间在id名称为gdtu的div元素中显示不同的图片.