每隔3秒頁面內容進行更改

全是套路
于 2008-10-29 14:13:00 发布
阅读量480
点赞数
分类专栏： JavaScript 文章标签： function float div null
本文链接：https://blog.csdn.net/lv_ping/article/details/3175173
版权
JavaScript 专栏收录该内容
7 篇文章 0 订阅
订阅专栏
該例子的實現的功能為:每隔3秒,頁面顯示的內容進行自動更新.
 
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题 1</title>
    <style type="text/css">
.style1{float:left; width:120px; background-color:#00FFFF; border:1px solid #6AB5FF; text-align:center; margin-right:2px; list-style-type:none; cursor:pointer;}
.style2{float:left; width:120px; background-color:#6AB5FF; border:1px solid #6AB5FF; text-align:center; margin-right:2px; list-style-type:none; cursor:pointer;}
.style3{float:left; width:120px; background-color:#AAD5FF; border:1px solid #6AB5FF; text-align:center; margin-right:2px; list-style-type:none; cursor:pointer;}
</style>
    <script type="text/javascript">
opCard = function()
{
    this.bind = new Array();
    this.index = 0;     
    
    this.style = new Array();       
    this.overStyle = false;     
    this.overChange = false;        
    this.menu = false;              
    this.nesting = [false,false,"",""];     
    
    this.auto = [false, 3000];      
    this.timerID = null;            
    this.menutimerID = null;        
    
    this.creat = function(func)
    {
        var _arrMenu = document.getElementById(this.bind[0]).getElementsByTagName(this.bind[1]);
        var _arrInfo = document.getElementById(this.bind[2]).getElementsByTagName(this.bind[3]);
        var my = this, i;
        var argLen = arguments.length;
        var arrM = new Array();
        
        if(this.nesting[0] || this.nesting[1])  
        {   
            var arrMenu = this.nesting[0]?getChilds(_arrMenu,this.bind[0],2):_arrMenu;
            var arrInfo = this.nesting[1]?getChilds(_arrInfo,this.bind[2],3):_arrInfo;
        }
        else
        {
            var arrMenu = _arrMenu;
            var arrInfo = _arrInfo;
        }
        
        var l = arrMenu.length;
        if(l!=arrInfo.length){alert("菜單和肉容必須擁有相同的數量/n如果需要，你可以放一個空的在那占位。")}
        
        
        if(this.menu){this.auto=false;this.overChange=true;} 
        
        for(i=0;i<l;i++)
        {
            arrMenu[i].cName = arrMenu[i].className;
            arrMenu[i].className = (i!=this.index || this.menu)?getClass(arrMenu[i],this.style[0]):getClass(arrMenu[i],this.style[1]);      
            
            if(arrMenu[i].getAttribute("skip")) 
            {
                if(this.overStyle || this.overChange)   
                {
                    arrMenu[i].onmouseover = function(){changeTitle(this, 2);autoStop(this, 0);}
                    arrMenu[i].onmouseout = function(){changeTitle(this, 0);autoStop(this, 1);}
                }
                arrMenu[i].onclick = function(){if(argLen==1){func()}}
                arrInfo[i].style.display = "none";
                continue;
            }
            
            if(i!=this.index || this.menu){arrInfo[i].style.display="none"};    
            arrMenu[i].index = i;   
            arrInfo[i].index = i;
            
            
            if(this.overChange) 
            {
                arrMenu[i].onmouseover = function(){changeOption(this);my.menu?changeMenu(1):autoStop(this, 0);}
                arrMenu[i].onmouseout = function(){changeOption(this);my.menu?changeMenu(0):autoStop(this, 1);}
            }
            else    
            {
                arrMenu[i].onclick = function(){changeOption(this);autoStop(this, 0);if(argLen==1){func()}}
                if(this.overStyle)  
                {
                    arrMenu[i].onmouseover = function(){changeTitle(this, 2);autoStop(this, 0);}
                    arrMenu[i].onmouseout = function(){changeTitle(this, 0);autoStop(this, 1);}
                }
                else    
                {
                    if(this.auto[0])    
                    {
                        arrMenu[i].onmouseover = function(){autoStop(this, 0);}
                        arrMenu[i].onmouseout = function(){autoStop(this, 1);}
                    }
                }
            }
            
            if(this.auto[0] || this.menu)
            {
                arrInfo[i].onmouseover = function(){my.menu?changeMenu(1):autoStop(this, 0);}
                arrInfo[i].onmouseout = function(){my.menu?changeMenu(0):autoStop(this, 1);}
            }
        }   
        
        if(this.auto[0])
        {
            this.timerID = setTimeout(autoMove,this.auto[1])
        }
        
        
        function autoMove()
        {
            var n;
            n = my.index + 1;
            if(n==l){n=0};
            while(arrMenu[n].getAttribute("skip"))      
            {
                n += 1;
                if(n==l){n=0};
            }
            changeOption(arrMenu[n]);
            my.timerID = setTimeout(autoMove,my.auto[1]);
        }
        
        
        function autoStop(obj, num)
        {
            if(!my.auto[0]){return;}
            
            num == 0 ? clearTimeout(my.timerID) : my.timerID = setTimeout(autoMove,my.auto[1]);
        }
        
        
        function changeOption(obj)
        {
            arrMenu[my.index].className = getClass(arrMenu[my.index],my.style[0]);  
            arrInfo[my.index].style.display = "none";   
            
            obj.className = getClass(obj,my.style[1]);      
            arrInfo[obj.index].style.display = "";
            
            my.index = obj.index;   
        }
        
        
        function changeTitle(obj, num)
        {
            if(!my.overStyle){return;};
            if(obj.index!=my.index){obj.className = getClass(obj,my.style[num])}
        }
        
        
        function changeMenu(num)
        {
            if(!my.menu){return;}
            num==0?my.menutimerID = setTimeout(menuClose,1000):clearTimeout(my.menutimerID)
        }
        
        
        function menuClose()
        {
            arrInfo[my.index].style.display = "none";
            arrMenu[my.index].className = getClass(arrMenu[my.index],my.style[0]);
        }
        
        
        function getClass(o, s)
        {
            if(o.cName==""){return s}
            else{return o.cName + " " + s}
        }
        
        
        function getChilds(arrObj, id, num)
        {
            var depth = 0;
            var firstObj = my.nesting[num]==""?arrObj[0]:document.getElementById(my.nesting[num]);      
            do  
            {
                if(firstObj.parentNode.getAttribute("id")==id){break}else{depth+=1}
                firstObj = firstObj.parentNode;
            }
            while(firstObj.tagName.toLowerCase()!="body")   
            
            var t;
            var arr = new Array();
            for(i=0;i<arrObj.length;i++)    
            {
                t = arrObj[i], d = 0;
                do
                {
                    if(t.parentNode.getAttribute("id")==id && d == depth)
                    {   
                        arr.push(arrObj[i]);break;      
                    }
                    else
                    {
                        if(d==depth){break};d+=1;
                    }
                    t = t.parentNode;
                }
                while(t.tagName.toLowerCase()!="body")  
            }
            return arr;
        }
    }
}
window.onload = function()
{
    var dd = new opCard();
    dd.bind = ["a2","li","b2","div"];
    dd.style = ["style1","style2","style3"];
    dd.auto = [true, 3000];
    dd.creat();
    dd = null;  
}
    </script>
</head>
<body>
    <div id="Div1">
        <ul>
            <li>出遊</li>
            <li>聚餐/聚會</li>
            <li>集會</li>
        </ul>
        <font color='red'>鼠標光標離開活動窗口內，每3秒自動刷新。</font>
    </div>
    <div id="b2">
        <div>
            我好</div>
        <div>
            你好</div>
        <div>
            他好</div>
    </div>
</body>
</html>
 