用HTML5和JavaScript编写一个网站常见广告窗

最新推荐文章于 2024-04-22 16:26:35 发布

caijilaoyan

最新推荐文章于 2024-04-22 16:26:35 发布

阅读量681

点赞数

本文链接：https://blog.csdn.net/caijilaoyan/article/details/89645282

版权

说明：进入网站时广告窗缓慢显示出来点击广告窗关闭按钮后（x）广告窗缓慢消失；

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		*{padding: 0px;margin: 0px;}
		div{width: 300px;height: 350px;background: #999;position: absolute;right: 20px;bottom: 20px; opacity: 0;transition: all 2s ;}
		p{height: 30px;background: red;}
		.s2{float: right;line-height: 30px;color: #fff;width: 30px;height:30px;background: #333;text-align: center;font-size: 30px;opacity: 0.8;cursor:pointer;}
		#s1{line-height: 30px;color: #fff;font-size: 18px;}
	</style>
	<script type="text/javascript">
		window.onload=init;
		function init() {
			var o=document.querySelector('#ad');
			//代码执行一次 再打开网站两秒后启动定时器
			setTimeout(function(){
				o.style.opacity=1;
			},2000)
			//点击关闭后广告窗透明度为0
			document.querySelector('.s2').onclick=function () {

最低0.47元/天解锁文章

优惠劵

caijilaoyan

关注关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
用HTML5和JavaScript编写一个网站常见广告窗

说明：进入网站时广告窗缓慢显示出来点击广告窗关闭按钮后（x）广告窗缓慢消失；<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> *{padding: 0px;ma...
复制链接

扫一扫