使用js与html代码实现常见的几种网页延时特效与功能

简单介绍下使用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元素中显示不同的图片.