js定时隐藏div

最新推荐文章于 2023-05-18 14:00:43 发布
最新推荐文章于 2023-05-18 14:00:43 发布
阅读量758 收藏 6
点赞数 1
原文链接：https://yq.aliyun.com/articles/542246
版权

js定时隐藏div（向右上角滑动隐藏）

 
 
  1. <html> 
  2. <head> 
  3. <style> 
  4. .tab{ 
  5.     border:1px solid  #f00; 
  6.     width:400px; 
  7.     height:400px; 
  8.     background:#360; 
  9.     margin:auto; 
  10.     padding:0px; 
  11.     overflow:hidden; 
  12.     position:relative; 
  13.     left:0px; 
  14.     top:0px 
  15. } 
  16. </style> 
  17. <script> 
  18. H=400; 
  19. W=400; 
  20. id='timing_hidden' 
  21. function show_con(){ 
  22. var obj_nav=document.getElementById(id) 
  23. var n=20,t=50; 
  24. var timers=new Array(n); 
  25.     for(var i=0;i<n;i++){( 
  26.      function(){ 
  27.       if(timers[i]) clearTimeout(timers[i]); 
  28.       var j=i; 
  29.       timers[i]=setTimeout(function(){ 
  30.        obj_nav.style.height=H-Math.round(H*(j+1)/n); 
  31.        obj_nav.style.width=W-Math.round(W*(j+1)/n); 
  32.        obj_nav.style.left=Math.round(W*(j+1)/n)/2; 
  33.        },(i+1)*t); 
  34.      } 
  35.     )()}; 
  36. } 
  37. setTimeout("show_con()",3000); 
  38. </script> 
  39. </head> 
  40.  
  41. <body> 
  42. <div id='timing_hidden' class='tab'> 
  43.     提示：3秒钟后这个层自动隐藏，可自定义时间。 
  44. </div> 
  45. </body> 
  46. </html> 
 
 
 
  
 
 
 
 
 
  
 
 
 
 
 
  
 
 
 
 
 
   本文转自许琴 51CTO博客，原文链接：http://blog.51cto.com/xuqin/1184346 
  ，如需转载请自行联系原作者 
 
 
 
 
  
 
 
 
 
 
  
 
 
 
 
 
  
 
 
 
 
 
  
 
 
 


                

        

        




    




    

      

        

            

              
                
                  weixin_33878457
                
              
            

            

                关注
              
            

        

        

          
    
            
  • 
              
                
                
                
                
                    1
                
              
              
    点赞
    
            
    • 
            
  • 
              
                
                
                
              
              
    踩
    
            
    • 
            
  • 
              
                
                
                
                
                    6
                
              
              
    
                
    
                  
                    收藏
                  
                
    
              
    
              
    
                
    
                  觉得还不错?
                  
                    一键收藏
                  
                 
                
    
              
    
            
    • 
          
  • 
            
    
              
              
            
    
              
              
              
                    0
              
            
            
    评论
    
          
    • 
          
  • 
          
    • 
          
  • 
            
              
            
              
    
            
              
                
            
    
          
    • 
        

      

      










                



	

		

			

				
					
js实现定时隐藏div

				
			

			

				

					12-17
				

			

		

		

			
				
js实现定时隐藏div层，任你设置时间，时间一到立即隐藏

			
		

	



                

              
                



	

		

			

				
					
query 实现定时显示与隐藏div广告代码

				
			

			

				

					gaoqiao1988的专栏
				

				

					04-09
					
					1390
					
				

			

		

		

			
				
jquery 实现定时显示与隐藏div广告代码





 html页面中我们随便放些东西

代码如下

关闭

 

jquery代码

 

代码如下





$(function(){

setTimeout('$(".toolbarframe").show("slow")',3000);

setTimeout('$(".toolb

			
		

	



                


  
              

                


	

		

			

				
					
JS实现各种动态显示隐藏div效果

				
			

			

				

					01-10
				

			

		

		

			
				
JS实现各种动态显示隐藏div效果，包括卷动显示隐藏效果，渐变显示隐藏效果，大小缩放显示隐藏效果

			
		

	





	

		

			

				
					
Jquery定时隐藏对话框

				
			

			

				

					小知识折射大智慧
				

				

					03-10
					
					1293
					
				

			

		

		

			
				
以下内容可能不正确，只是在有问题时进行参考。
1. setTimeout
    ：出现设置了时间，但是程序立即执行的情况。
    ：无论是window.setTimeout还是window.setInterval，在使用函数名作为调用句柄时都不能带参数。
    ：解决就是定义一个匿名函数
setTimeout(function(){$j('#pre'+ID).fadeOut()},

			
		

	



		

			
		



	

		

			

				
					
基于jquery实现的定时显示与隐藏div广告的实现代码

				
			

			

				

					10-26
				

			

		

		

			
				
在本文档中，作者使用了setTimeout()来实现定时显示和隐藏DIV广告的需求。  知识点四：实现定时显示与隐藏的代码 在本文档中，作者展示了具体的实现方法。首先，页面中放置了一个DIV元素，并初始设置为隐藏状态...

			
		

	





	

		

			

				
					
JavaScript实现定时隐藏与显示图片的方法

				
			

			

				

					10-23
				

			

		

		

			
				
今天我们就来探讨如何使用JavaScript实现图片的定时隐藏与显示功能。具体来说，这个功能可以使得网页上的图片在经过设定的时间后自动隐藏，同时又能在一定时间后再次显示。这样的操作对于实现动态效果非常有帮助，...

			
		

	





	

		

			

				
					
JS实现定时自动关闭DIV层提示框的方法

				
			

			

				

					10-24
				

			

		

		

			
				
在DIV层提示框的场景下，我们需要让定时器在一定时间后执行隐藏DIV层的操作。  具体到代码实现，最简单的一种方法就是在网页加载完成时，通过body标签的onLoad事件触发一个setTimeout函数，这个函数中指定一个ID对应...

			
		

	





	

		

			

				
					
定时出现div

				
			

			

				

					08-01
				

			

		

		

			
				
综上所述，"定时出现div"的核心在于使用jQuery结合JavaScript的定时器实现元素的定时显示和隐藏。这不仅提高了用户体验，也为网页增添了一丝动态美。在实际项目中，还可以结合其他前端框架和库，如Vue.js、React.js...

			
		

	





	

		

			

				
					
JS定时广告的隐藏和显示；

				
			

			

				

					Syntacticsugar's   blog
				

				

					09-20
					
					1082
					
				

			

		

		

			
				
 

 定时广告的隐藏和显示；

 


&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;title&gt;Demo03&lt;/title&gt;
    &lt;script type="text/jav

			
		

	





	

		

			

				
					
精美的div隐藏与显示

				
			

			

				

					12-10
				

			

		

		

			
				
jquery+js打造div滑动效果，淡入淡出，隐藏与显示。

			
		

	





	

		

			

				
					
JS实现广告的定时隐藏以及图片的轮播

				
			

			

				

					BullZeng的博客
				

				

					05-06
					
					442
					
				

			

		

		

			
				
&lt;!DOCTYPE html&gt;
&lt;html&gt;
    &lt;head&gt;
        &lt;meta charset="UTF-8"&gt;
        &lt;title&gt;&lt;/title&gt;

        &lt;style&gt;
            /*整个body*/
            #bodyDi

			
		

	





	

		

			

				
					
html中怎么实现广告自动出来又自动隐藏?,基于jquery实现的定时显示与隐藏div广告的实现代码...

				
			

			

				

					weixin_34504277的博客
				

				

					05-31
					
					138
					
				

			

		

		

			
				
基于jquery实现的定时显示与隐藏div广告的实现代码下面我给大家分享我的方法：在jquery中要显示与隐藏层是很简单的直接使用hide与show方法就可以了，但要定时我们需要利用setTimeout函数来实例，下面我给大家分享我的方法。html页面中我们随便放些东西复制代码 代码如下:关闭jquery代码复制代码 代码如下:$(function(){setTimeout('$(".toolba...

			
		

	





	

		

			

				
					
js实现对div的隐藏和显示

				
			

			

				

					冬木彩雨
				

				

					12-08
					
					518
					
				

			

		

		

			
				
先根据div的id获取该div: var tPic=document.getElementById("tPic");


tPic.style.display="none";//隐藏，不占位


tPic.style.display="";//显示




tPic.style.visibility="hidden";//隐藏，占位


tPic.style.visib

			
		

	





	

		

			

				
					
JS控制一个DIV层在指定时间内消失

				
			

			

				

					chichaojing6253的博客
				

				

					05-31
					
					199
					
				

			

		

		

			
				
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="htt...

			
		

	





	

		

			

				
					
js 定时去重复显示和隐藏的思路

				
			

			

				

					PBitW的博客
				

				

					05-18
					
					729
					
				

			

		

		

			
				
思路一 每秒执行
思路二 直接用定时器，但是不每秒
思路三 es9 异步迭代
异步迭代
例子1 直接使用
例子2 async await
例子3 * yield
异步遍历器 --》要想用for await of 必须遍历这个
简化 for await of
解决1秒出现第一个结果，再过2秒出现第二个，再过3秒出现第三个的问题

			
		

	





	

		

			

				
					
js javascript  每隔某个时间显示隐藏，动态显示隐藏不同的信息

				
			

			

				

					sinat_29326171的博客
				

				

					02-18
					
					648
					
				

			

		

		

			
				
<script type="text/javascript">
      /* toast start */
      var area = ['北京', '广州', '郑州', '上海'];
      var person = ['赵先生', '吴女士', '高先生', '郑女士'];

      function showToast() {
        var area...

			
		

	





	

		

			

				
					
前台用js脚本隐藏时间列表

				
			

			

				

					滴水成海
				

				

					01-19
					
					901
					
				

			

		

		

			
				
<br /><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml"><br />
<head><br />
<meta http-equiv="Content-Type" content="text/html; char

			
		

	





	

		

			

				
					
JS实现定时弹出及隐藏之经典案例回顾（二）

				
			

			

				

					Marion的博客
				

				

					01-20
					
					494
					
				

			

		

		

			
				
使用JS实现定时弹出广告定时隐藏.
1	需求:
在网站的首页上定时弹出一个广告，并且定时隐藏掉.
分析：
1	技术分析：
【JS的window对象的定时的方法】


设置定时的方法



清除定时的方法

【CSS的显示和隐藏的属性】

display

block：显示元素：
none：隐藏元素：





步骤分析：
【步骤一】创建一个HTML页面
【步骤二】确定事件：页面的加载事件
【步骤三...

			
		

	





	

		

			

				
					
设置div定时缓慢淡入的js代码

					
最新发布

				
			

			

				

					05-19
				

			

		

		

			
				
 // 隐藏 div  $("#myDiv").hide();    // 在3秒后缓慢淡入div  setTimeout(function(){  $("#myDiv").fadeIn(2000);  }, 3000); }); ```  解释说明： 1. 首先，使用jQuery的document.ready()方法，确保页面中的所有...

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值