JavaScript海报定时弹框设计

亦凉 2021-04-24 07:38 477阅读 0赞

html代码如下:

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

JavaScript代码如下:

<script type="text/javascript">
    	
    		//记录次数
    		var i=0;
    		
    		//定时器id
    		var timer;
    		
    		οnlοad=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

![分割线][img_f8beed0542cc9f483f404af6a203c131.gif]

[img_f8beed0542cc9f483f404af6a203c131.gif]: /images/20210424/1619249938446.gif

发表评论取消回复

表情：

评论列表（有 0 条评论，477人围观）

还没有评论，来说两句吧...

相关阅读

相关 swing 定时关闭弹框工具类

import javax.swing.; import java.util.Timer; import java.util.TimerTask;

红太狼/ 2023年10月09日 17:25/ 0 赞/ 24 阅读

相关 java工作复习——JavaScript的3个弹框对比总结——JavaScript的Alert弹框——confirm弹框 ——prompt弹框...

引入包：import org.openqa.selenium.Alert; js的alert弹框 Alert alert = driver.switchTo().al

冷不防/ 2023年10月03日 17:03/ 0 赞/ 69 阅读

相关 JQuery弹出提示框定时自动消失

这是网络上的原始样式地址，感谢博主：[https://www.cnblogs.com/zhijiangch/p/7270109.html][https_www.cnblogs.

向右看齐/ 2023年06月30日 10:44/ 0 赞/ 6 阅读

相关 JavaScript的三种弹出框

下面我们来总结一下js的弹出框： 1. alert弹出框具体写法： <!doctype html> <html lang="en"> <hea

灰太狼/ 2022年07月27日 14:45/ 0 赞/ 253 阅读

相关 JavaScript 弹窗(对话框)警告框、确认框、提示框.

JavaScript 弹窗(对话框) 三种消息框：警告框、确认框、提示框。 1. 警告框警告框经常用于确保用户可以得到某些信息。当警告框出现后，

野性酷女/ 2022年06月08日 02:57/ 0 赞/ 505 阅读

相关【JavaScript】8.弹出框（Dialog）

最近做项目，用到了弹出框提示信息，就做了个demo，记录总结了一下，对一般的网站来说，弹出框是比较常见的。或是给出用户操作提示，或是通过弹出框打开一个小窗口以提示信息，或是给出

叁歲伎倆/ 2022年06月01日 13:06/ 0 赞/ 316 阅读

相关 JavaScript弹框

注意：弹窗使用反斜杠来换行![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG

系统管理员/ 2022年04月12日 05:40/ 0 赞/ 337 阅读

相关 JavaScript弹出框

提到弹出框，首先想到的alert()了，其次想到的也还是alert（），其实在js中有三种弹出框，下面我们一一说明。 1，仅确定。即：对话框界面上只有确定

忘是亡心i/ 2021年10月13日 04:17/ 0 赞/ 567 阅读

相关 JavaScript弹出框、对话框、提示框、弹窗总结

JavaScript弹出框、对话框、提示框、弹窗总结。 1、JS的三种最常见的对话框 //====================== JS最常用三种弹出对话框

快来打我*/ 2021年09月20日 10:24/ 0 赞/ 600 阅读

相关 JavaScript海报定时弹框设计

html代码如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <...

亦凉/ 2021年04月24日 07:38/ 0 赞/ 478 阅读