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

該例子的實現的功能為:每隔3秒,頁面顯示的內容進行自動更新.

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5.     <title>無標題 1</title>
  6.     <style type="text/css">
  7. .style1{float:left; width:120px; background-color:#00FFFF; border:1px solid #6AB5FF; text-align:center; margin-right:2px; list-style-type:none; cursor:pointer;}
  8. .style2{float:left; width:120px; background-color:#6AB5FF; border:1px solid #6AB5FF; text-align:center; margin-right:2px; list-style-type:none; cursor:pointer;}
  9. .style3{float:left; width:120px; background-color:#AAD5FF; border:1px solid #6AB5FF; text-align:center; margin-right:2px; list-style-type:none; cursor:pointer;}
  10. </style>
  11.     <script type="text/javascript">
  12. opCard = function()
  13. {
  14.     this.bind = new Array();
  15.     this.index = 0;     
  16.     
  17.     this.style = new Array();       
  18.     this.overStyle = false;     
  19.     this.overChange = false;        
  20.     this.menu = false;              
  21.     this.nesting = [false,false,"",""];     
  22.     
  23.     this.auto = [false, 3000];      
  24.     this.timerID = null;            
  25.     this.menutimerID = null;        
  26.     
  27.     this.creat = function(func)
  28.     {
  29.         var _arrMenu = document.getElementById(this.bind[0]).getElementsByTagName(this.bind[1]);
  30.         var _arrInfo = document.getElementById(this.bind[2]).getElementsByTagName(this.bind[3]);
  31.         var my = this, i;
  32.         var argLen = arguments.length;
  33.         var arrM = new Array();
  34.         
  35.         if(this.nesting[0] || this.nesting[1])  
  36.         {   
  37.             var arrMenu = this.nesting[0]?getChilds(_arrMenu,this.bind[0],2):_arrMenu;
  38.             var arrInfo = this.nesting[1]?getChilds(_arrInfo,this.bind[2],3):_arrInfo;
  39.         }
  40.         else
  41.         {
  42.             var arrMenu = _arrMenu;
  43.             var arrInfo = _arrInfo;
  44.         }
  45.         
  46.         var l = arrMenu.length;
  47.         if(l!=arrInfo.length){alert("菜單和肉容必須擁有相同的數量/n如果需要,你可以放一個空的在那佔位。")}
  48.         
  49.         
  50.         if(this.menu){this.auto=false;this.overChange=true;} 
  51.         
  52.         for(i=0;i<l;i++)
  53.         {
  54.             arrMenu[i].cName = arrMenu[i].className;
  55.             arrMenu[i].className = (i!=this.index || this.menu)?getClass(arrMenu[i],this.style[0]):getClass(arrMenu[i],this.style[1]);      
  56.             
  57.             if(arrMenu[i].getAttribute("skip")) 
  58.             {
  59.                 if(this.overStyle || this.overChange)   
  60.                 {
  61.                     arrMenu[i].onmouseover = function(){changeTitle(this, 2);autoStop(this, 0);}
  62.                     arrMenu[i].onmouseout = function(){changeTitle(this, 0);autoStop(this, 1);}
  63.                 }
  64.                 arrMenu[i].onclick = function(){if(argLen==1){func()}}
  65.                 arrInfo[i].style.display = "none";
  66.                 continue;
  67.             }
  68.             
  69.             if(i!=this.index || this.menu){arrInfo[i].style.display="none"};    
  70.             arrMenu[i].index = i;   
  71.             arrInfo[i].index = i;
  72.             
  73.             
  74.             if(this.overChange) 
  75.             {
  76.                 arrMenu[i].onmouseover = function(){changeOption(this);my.menu?changeMenu(1):autoStop(this, 0);}
  77.                 arrMenu[i].onmouseout = function(){changeOption(this);my.menu?changeMenu(0):autoStop(this, 1);}
  78.             }
  79.             else    
  80.             {
  81.                 arrMenu[i].onclick = function(){changeOption(this);autoStop(this, 0);if(argLen==1){func()}}
  82.                 if(this.overStyle)  
  83.                 {
  84.                     arrMenu[i].onmouseover = function(){changeTitle(this, 2);autoStop(this, 0);}
  85.                     arrMenu[i].onmouseout = function(){changeTitle(this, 0);autoStop(this, 1);}
  86.                 }
  87.                 else    
  88.                 {
  89.                     if(this.auto[0])    
  90.                     {
  91.                         arrMenu[i].onmouseover = function(){autoStop(this, 0);}
  92.                         arrMenu[i].onmouseout = function(){autoStop(this, 1);}
  93.                     }
  94.                 }
  95.             }
  96.             
  97.             if(this.auto[0] || this.menu)
  98.             {
  99.                 arrInfo[i].onmouseover = function(){my.menu?changeMenu(1):autoStop(this, 0);}
  100.                 arrInfo[i].onmouseout = function(){my.menu?changeMenu(0):autoStop(this, 1);}
  101.             }
  102.         }   
  103.         
  104.         if(this.auto[0])
  105.         {
  106.             this.timerID = setTimeout(autoMove,this.auto[1])
  107.         }
  108.         
  109.         
  110.         function autoMove()
  111.         {
  112.             var n;
  113.             n = my.index + 1;
  114.             if(n==l){n=0};
  115.             while(arrMenu[n].getAttribute("skip"))      
  116.             {
  117.                 n += 1;
  118.                 if(n==l){n=0};
  119.             }
  120.             changeOption(arrMenu[n]);
  121.             my.timerID = setTimeout(autoMove,my.auto[1]);
  122.         }
  123.         
  124.         
  125.         function autoStop(obj, num)
  126.         {
  127.             if(!my.auto[0]){return;}
  128.             
  129.             num == 0 ? clearTimeout(my.timerID) : my.timerID = setTimeout(autoMove,my.auto[1]);
  130.         }
  131.         
  132.         
  133.         function changeOption(obj)
  134.         {
  135.             arrMenu[my.index].className = getClass(arrMenu[my.index],my.style[0]);  
  136.             arrInfo[my.index].style.display = "none";   
  137.             
  138.             obj.className = getClass(obj,my.style[1]);      
  139.             arrInfo[obj.index].style.display = "";
  140.             
  141.             my.index = obj.index;   
  142.         }
  143.         
  144.         
  145.         function changeTitle(obj, num)
  146.         {
  147.             if(!my.overStyle){return;};
  148.             if(obj.index!=my.index){obj.className = getClass(obj,my.style[num])}
  149.         }
  150.         
  151.         
  152.         function changeMenu(num)
  153.         {
  154.             if(!my.menu){return;}
  155.             num==0?my.menutimerID = setTimeout(menuClose,1000):clearTimeout(my.menutimerID)
  156.         }
  157.         
  158.         
  159.         function menuClose()
  160.         {
  161.             arrInfo[my.index].style.display = "none";
  162.             arrMenu[my.index].className = getClass(arrMenu[my.index],my.style[0]);
  163.         }
  164.         
  165.         
  166.         function getClass(o, s)
  167.         {
  168.             if(o.cName==""){return s}
  169.             else{return o.cName + " " + s}
  170.         }
  171.         
  172.         
  173.         function getChilds(arrObj, id, num)
  174.         {
  175.             var depth = 0;
  176.             var firstObj = my.nesting[num]==""?arrObj[0]:document.getElementById(my.nesting[num]);      
  177.             do  
  178.             {
  179.                 if(firstObj.parentNode.getAttribute("id")==id){break}else{depth+=1}
  180.                 firstObj = firstObj.parentNode;
  181.             }
  182.             while(firstObj.tagName.toLowerCase()!="body")   
  183.             
  184.             var t;
  185.             var arr = new Array();
  186.             for(i=0;i<arrObj.length;i++)    
  187.             {
  188.                 t = arrObj[i], d = 0;
  189.                 do
  190.                 {
  191.                     if(t.parentNode.getAttribute("id")==id && d == depth)
  192.                     {   
  193.                         arr.push(arrObj[i]);break;      
  194.                     }
  195.                     else
  196.                     {
  197.                         if(d==depth){break};d+=1;
  198.                     }
  199.                     t = t.parentNode;
  200.                 }
  201.                 while(t.tagName.toLowerCase()!="body")  
  202.             }
  203.             return arr;
  204.         }
  205.     }
  206. }
  207. window.onload = function()
  208. {
  209.     var dd = new opCard();
  210.     dd.bind = ["a2","li","b2","div"];
  211.     dd.style = ["style1","style2","style3"];
  212.     dd.auto = [true, 3000];
  213.     dd.creat();
  214.     dd = null;  
  215. }
  216.     </script>
  217. </head>
  218. <body>
  219.     <div id="Div1">
  220.         <ul>
  221.             <li>出遊</li>
  222.             <li>聚餐/聚會</li>
  223.             <li>集會</li>
  224.         </ul>
  225.         <font color='red'>鼠標光標離開活動窗口內,每3秒自動刷新。</font>
  226.     </div>
  227.     <div id="b2">
  228.         <div>
  229.             我好</div>
  230.         <div>
  231.             你好</div>
  232.         <div>
  233.             他好</div>
  234.     </div>
  235. </body>
  236. </html>
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章