用js完成页面定时弹出广告
程序员文章站
2022-06-01 23:22:04
...
用js完成页面定时弹出广告
第一步：在页面指定位置隐藏一个广告图片（使用display属性的none值）
第二步：确定事件（onload）并为其绑定一个函数
第三步：书写这个函数（设置一个显示图片的定时操作）
第四步：书写定时器中的函数（获取图片的位置并设置属性style的display值为block）
第五步：清除显示图片的定时操作（）
第六步：书写隐藏图片的定时操作
第七步:书写定时器中的函数（获取广告图片的位置属性style的display值none）
第八步：清除隐藏图片的定时操作（）
需要用到的js事件
onload（）此事件只能写一次并且放在body标签中。
setInterval（code(）,毫秒时间）；此事件设置循环事件
clearInterval(time);此事件清除循环事件；
实现代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>用js实现图片定时弹出和定时消失</title>
</head>
<body onload="init()">
<img src="D:/img/1.jpg" width="100%" height="100%" style="display:none" id="img1">
</body>
</html>
<script type="text/javascript">
function init(){
time = setInterval("clock()",3000);
}
function clock(){
var img1 = document.getElementById('img1');
img1.style.display="block";
clearInterval(time);
time = setInterval("clock1()",3000);
}
function clock1(){
var img1 = document.getElementById('img1');
img1.style.display="none";
clearInterval(time);
}
</script>结果：
在打开浏览器3秒后在指定位置弹出图片，显示图片3秒后会自定消失掉。
上一篇： nginx服务器配置多域名
下一篇： ipa包重新签名