js计时器实现页面刷新和幻灯片效果

来源：互联网发布：迪杰斯特拉算法 c++ 编辑：程序博客网时间：2024/06/04 17:45

        在网页的特效制作中，经常要用到定时器，比如：间隔一定时间后页面自动跳转，或者间隔一定时间出现某种效果，像网页上的飞雪连天，或者背景颜色的定时改变等等。
   若要页面定时跳转，简单的可以在head头部的meta标记中设定重定向就可以了。但我要说的是javascript中的定时器，它的功能是十分强大和有用的。
在javascript中有两个关于定时器的函数，它们是：
1.倒计定时器：timename=setTimeout("function();",delaytime);
2.循环定时器：timename=setInterval("function();",delaytime); d
其中倒计定时器顾名思义，是设定一段时间后执行function()函数，而循环定时器则是每隔一段时间都执行function()函数一次。
   倒计定时器一般用在一段时间后的触发的事件，比如页面的定时跳转，有一些站点就是在注册完成后自动跳转到登录页面，或者用于确定是“老客”还是“新客”，是老客则会点击确定的某个地方（由站长设定）而快速进入站点，如果是“新客”，就不知道特定的点击处，所以可以设定5秒或者10秒转入新客页面。
   循环定时器则用于页面上的持续效果，比如背景用飞雪。
   function()函数，可以是一个函数，也可以是几个函数，中间用;连接，还可以接入javawcript的语句。
   delaytime则是设定间隔的时间，以毫秒为单位。
   有时候，我们想把一个定时器去掉，像循环定时器就是一直不停的运动的。可以用clearTimeout(timename)来清除setTimeout()定时器，而setInterval()则用clearInterval(timename)来清除。
     好了，现在你就可以用定时器来为你的主页增光添彩了。
1.幻灯片效果:lanternPic.jsp

<%@ page contentType="text/html;charset=utf-8" %>

<%@ page import="org.springframework.web.bind.ServletRequestUtils" %>

<%@ page import="com.ouou.album.service.beans.UserRole" %>

<%@ page import="java.util.List" %>

<%@ page import="com.ouou.album.model.Albums" %>

<%@ page import="com.ouou.album.util.ValidatorUtils" %>

<%@ page import="java.text.SimpleDateFormat" %>

<%@ page import="com.ouou.album.model.*" %>

<%@ include file="/common/taglib.jsp" %>

<%@ include file="/common/global.jsp" %>

<%!

private final static int pageSize = 7;

final SimpleDateFormat commonsdf = new SimpleDateFormat("yyyy-MM-dd");

int albumId=0;

int phId = ServletRequestUtils.getIntParameter(request, "id", 0);
int radioid = ServletRequestUtils.getIntParameter(request, "radioid",0);

Photos photos = photosManager.getPhoto(phId);

Albums albums = albumsManager.getAlbumsByPhotoId(phId);

if(null==photos){

out.println("<script>alert('该相片已不存在或被删除！');history.back();</script>");

return;

}

if(null!=albums){

albumId = albums.getAlbumId();

}

//取得以请求照片位于中间的指定pageSize个照片

List photos_List= photosManager.getPhotosByPhotoIdInMiddle(albumId,pageSize,phId,
UserRole.manager);

int totolNum=(!ValidatorUtils.isEmpty(photos_List)) ? photos_List.size() : 0;

int middleId = ((totolNum % 2) == 0) ? ((totolNum / 2) - 1) : ((totolNum-1) / 2);

int leftId = ((middleId-1)>0)? (middleId-1) : 0;

int rightId = ((middleId+1)<totolNum)? (middleId+1) : 0;

if(!ValidatorUtils.isEmpty(photos_List)){

leftId=((Photos)photos_List.get(leftId)).getPhotoId();

rightId=((Photos)photos_List.get(rightId)).getPhotoId();

}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

content="revealTrans(duration=3000, transition=<%=Math.round(Math.random()*23)%>">

<%@ include file="/common/style.jsp" %>

<%@ include file="/common/script.jsp" %>

</head>

<%@ include file="/common/nav.jsp" %>

<hr>

<%@ include file="/common/user_nav.jsp" %>

<hr/>

<%@ include file="/common/menu.jsp" %>

<hr/>

</a>

</div>

for (int i = 0; photos_List != null && i < photos_List.size(); i++) {

int photoId =((Photos) photos_List.get(i)).getPhotoId();

<a id="photo_<%=i%>" href="/manage/lanternPic.do?id=<%=photoId%>">

<img src="/photo?type=1&pid=<%=photoId%>" border=0/>

</a>

<%}%>

</div>

<a href="/manage/lanternPic.do?id=<%=rightId%>" id="right" >

</a>

</div>

<img id="photosShow" name="photosShow"
style="FILTER:revealTrans(duration=2,transition=20);"

src="/photo?type=3&pid=<%=photos.getPhotoId()%>"></a></div>

<li id="m_6_u_1"><span>幻灯播放</span>：

<input type="radio" id="0" name="radiobutton" value="radiobutton"
onclick="changePic(0);" checked/>停止　　　

<input type="radio" name="radiobutton" id="3" value="radiobutton"
onclick="changePic(3000);"/>3秒　　　

<input type="radio" name="radiobutton" id="8" value="radiobutton"
onclick="changePic(8000);"/>8秒　　　

<input type="radio" name="radiobutton" id="12" value="radiobutton"
onclick="changePic(12000);"/>12秒

</li>

</ul>

</div>

<li id="m_6_u_2"><a href="/photo?type=0&pid=<%=phId%>" alt="查看大图" title="查看大图"

class="b_link" target="_blank">查看大图</a></li>

</li>

</ul>

</div>

<hr/>

<%@ include file="/common/foot.jsp" %>

</div>

var bannerAD=new Array();

var temp=0;

</script>

int photoId;

for(int i=middleId;i<totolNum;i++){

photoId=((Photos)photos_List.get(i)).getPhotoId();

bannerAD[temp]='/photo?type=3&pid=<%=photoId%>';//图片的相对地址

temp++;

</script>

<%}%>

for(int i=0;i<middleId;i++){

photoId=((Photos)photos_List.get(i)).getPhotoId();

bannerAD[temp]='/photo?type=3&pid=<%=photoId%>';

temp++;

</script>

<%}%>

var bannerADlink=new Array();

var adNum=0;

var midId=<%=middleId%>;

var totalNum=<%=totolNum%>;

var theTime;

var preloadedimages=new Array();

for(var i=0;i<bannerAD.length;i++){

preloadedimages[i]=new Image();//防止图片在缓存内,暂无法显示问题

preloadedimages[i].src=bannerAD[i];

}

function setTransition(){

if (document.all){ //只有ie支持滤镜效果

document.getElementById('photosShow').filters.revealTrans.Transition=Math.floor(Math.random()*23);

document.getElementById('photosShow').filters.revealTrans.apply();

}

function playTransition(){

if (document.all) //只有ie支持滤镜效果

document.getElementById('photosShow').filters.revealTrans.play();

}

function changeNormalPic(time){

if(adNum<bannerAD.length-1) adNum++ ;

else adNum=0;

setTransition();

parent.document.images["photosShow"].src= preloadedimages[adNum].src;

playTransition();

theTime=window.setTimeout("changeNormalPic("+time+")", time);

}

function changePic(time){

if(time==0){

window.clearTimeout(theTime);

}else {

if(theTime!=null) window.clearTimeout(theTime);

changeNormalPic(time);

}

</script>

</body>

</html>

    在IE6 中如果用javascript改变img的src属性会显示不出图片，这是因在IE6中，图片要先下载到内存中，然后再显示出来，而我们改变了src之后，刚加载时，内存中并不存在这张图片所以会显示不出来，而反复点击几次，第二次再打开时就会显示出来，解决这个问题的方法就是在加载时先把图片预下载到内存，这样子就可以了，具体代码如下：
var   oImage=new   Image()   //先定义一个图片
oImage.src="1.gif"   //指定图片的src属性
objImage.src=oImage.src //将要改变的图片的src指定为刚定义的图片的src即可

2.定时刷新页面,只要把js代码改为以下即可:

//单击单选框按纽,定时刷新页面

var rId = <%=radioid%> ;

var timename;

var radioList = document.getElementsByName("radiobutton");

switch (rId){

case 0 :

radioList[0].checked = true;

window.clearTimeout(timename);

break;

case 3000 :

radioList[1].checked = true;

timename = setTimeout("showPic();", 3*1000);

break;

case 8000 :

radioList[2].checked = true;

timename = setTimeout("showPic();", 8*1000);

break;

case 12000 :

radioList[3].checked = true;

timename = setTimeout("showPic();", 12*1000);

break;

}

//when click the radio

function changePic(id){

if(id==0){

window.location = "/manage/lanternPic.do?id=<%=rightId%>&radioid="+id;

}else if(id>0){

window.location = "/manage/lanternPic.do?id=<%=rightId%>&radioid="+id;

}

function showPic() {

window.location = "/manage/lanternPic.do?id=<%=rightId%>&radioid=<%=radioid%>";

}

</script>

以上代码的效果请查看图片:http://p.blog.csdn.net/images/p_blog_csdn_net/houhy/330717/o_dingshi.PNG

语法：
filter : progid:DXImageTransform.Microsoft.RevealTrans ( enabled=bEnabled , duration=fDuration , transition=iTransitionType )
属性：
enable :可选项。布尔值(Boolean)。设置或检索滤镜是否激活。true | false true  :　默认值。滤镜激活。
false : 滤镜被禁止。
duration :可选项。浮点数(Real)。设置或检索转换完成所用的时间。其值为秒.毫秒(0.0000)格式。
你可以使用 play 方法的 iDuration 参数设置转换回放的持续时间。然而，当你一旦调用了 play 方法，在回放持续过程中 Duration 特性就变为只读特性。
transition :可选项。整数值(Integer)。设置或检索转换所使用的方式。 0  :　矩形收缩转换。
1  :　矩形扩张转换。
2  :　圆形收缩转换。
3  :　圆形扩张转换。
4  :　向上擦除。
5  :　向下擦除。
6  :　向右擦除。
7  :　向左擦除。
8  :　纵向百叶窗转换。
9  :　横向百叶窗转换。
10  :　国际象棋棋盘横向转换。
11  :　国际象棋棋盘纵向转换。
12  :　随机杂点干扰转换。
13  :　左右关门效果转换。
14  :　左右开门效果转换。
15  :　上下关门效果转换。
16  :　上下开门效果转换。
17  :　从右上角到左下角的锯齿边覆盖效果转换。
18  :　从右下角到左上角的锯齿边覆盖效果转换。
19  :　从左上角到右下角的锯齿边覆盖效果转换。
20  :　从左下角到右上角的锯齿边覆盖效果转换。
21  :　随机横线条转换。
22  :　随机竖线条转换。
23  :　随机使用上面可能的值转换。