WEB前端知识大整合之JS网站定时弹出广告
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--
1. 确定事件: 页面加载完成的事件 onload
2. 事件要触发函数: init()
3. init函数里面做一件事:
1. 启动一个定时器 : setTimeout()
2. 显示一个广告
1. 再去开启一个定时5秒钟之后,关闭广告
-->
<script>
function init(){
setTimeout("showAD()",3000);
}
function showAD(){
//首先要获取要操作的img
var img = document.getElementById("img1");
//显示广告
img.style.display = "block";
//再开启定时器,关闭广告
setTimeout("hideAD()",3000);
}
function hideAD(){
//首先要获取要操作的img
var img = document.getElementById("img1");
//隐藏广告
img.style.display = "none";
}
</script>
</head>
<body onload="init()">
<img id="img1" src="../img/f001a62f-a49d-4a4d-b56f-2b6908a0002c_g.jpg" width="100%" style="display: none;"/>
</body>
</html>
图片显示吟诗
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
//文档加载顺序
// var img = document.getElementById("img1");
function hideImg(){
var img = document.getElementById("img1");
img.style.display = "none";
}
function showImg(){
var img = document.getElementById("img1");
img.style.display = "block";
}
</script>
</head>
<body>
<input type="button" value="显示" onclick="showImg()" />
<input type="button" value="隐藏" onclick="hideImg()" /><br />
<img src="../img/1-161104143944.gif" id="img1" />
</body>
</html>
