zoukankan      html  css  js  c++  java
  • JavaScript海报定时弹框设计

    tml代码如下:

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title>网页的顶端海报弹框操作</title>
    	</head>
    	<body>
    		<div id="ad" style="100%;display: none;">
    			<img src="img/banner1.jpg" width="100%" />
    		</div>
    	</body>
    </html>
    

      

    JavaScript代码如下:

    <script type="text/javascript">
    	
    		//记录次数
    		var i=0;
    		
    		//定时器id
    		var timer;
    		
    		onload=function(){
    			//设置定时器 间隔4秒后展示图片
    			timer=setInterval(showAd,4000);
    		}
    		
    		//展示广告方法 展示2秒之后隐藏
    		function showAd(){
    			//展示的次数加1
    			i++;
    			
    			//若i=3 清空由setinterval设置的定时器
    			if(i==3){
    				clearInterval(timer);
    			}
    			
    			//1.获取广告
    			var divObj=document.getElementById("ad");
    			
    			//2.修改广告的样式 将其显示
    			divObj.style.display="block";
    			
    			//3.2秒之后隐藏 只执行一次
    			setTimeout(hideAd,2000);
    			
    		}
    		
    		//隐藏广告
    		function hideAd(){
    			//1.获取广告
    			var divObj=document.getElementById("ad");
    			
    			//2.修改样式 将其隐藏
    			divObj.style.display="none";
    		}
    </script>

      

    图片素材: banner1

     

    分割线 
    作者: 杨校

    出处: http://www.cnblogs.com/xiaoxiao5016

    分享是快乐的,也见证了个人成长历程,文章大多都是工作经验总结以及平时学习积累,基于自身认知不足之处在所难免,也请大家指正,共同进步。

    本文版权归作者所有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出, 如有问题, 可邮件(397583050@qq.com)咨询。

  • 相关阅读:
    ASP.Net请求处理机制初步探索之旅
    WebService如何调试及测试工具
    winform窗体间传值
    C# 窗体间传值方法大汇总
    c#写windows服务
    C# 公关类(全)
    简单的yoman generator
    Service Worker + Push API + Notification API实现桌面消息推送
    Service Worker
    HTML5桌面通知Notification
  • 原文地址:https://www.cnblogs.com/xiaoxiao5016/p/9367338.html
Copyright © 2011-2022 走看看