html页面广告5秒之后跳过

首页

-
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width; initial-scale=1; maximum-scale=1; minimum-scale=1; user-scalable=no;"> <title>Document</title><link rel="stylesheet" href="./swiper/swiper-bundle.css"><style>html{font-size: 31.25vw;}body{font-size: 16px;}*{margin: 0;padding: 0;list-style: none;text-decoration: none;}html,body{width:100%;height:100%}.boxOne{width: 100%;height:100%;position: relative;overflow: hidden;}.boxOne .boxOne_news{width: 100%;height: 100%;}.header{width: 100%;height: 0.5rem;display: flex;align-items: center;justify-content: center;margin-bottom: 0.1rem;}.content{overflow:auto;width: 100%;height:93%;background: url(./wechatImg/bg_img1.png) no-repeat;background-size: 100% 100%;position: relative;}.footer{width: 100%;height:7%;position: relative;bottom: 0px;display: flex;justify-content: space-around;align-items: center;}.header p{font-size: 0.15rem;}.header span img{width: 60%;}.header span{position: absolute;left: 9%;font-size: 0.2rem;}.userBox{width: 100%;height:0.6rem;display: flex;flex: 1;justify-content: space-evenly;}.username{width: 1.5rem;height: 0.5rem;display: flex;position: relative;}.step{width: 22%;margin-left: 22%;}.user_left{width: 1.43rem;height: 0.45rem;background-color: #d2edfd;align-self: center;  border-radius: 15px 35px 35px 15px;margin-left: 0.2rem;}.user_img{width:0.49rem;height:0.46rem;background-color: blue;border-radius: 50%;position: absolute;overflow: hidden;border: 4px solid #fff;}.user_img img{width: 0.5rem;height: 0.5rem;}.name{margin-top:0.1rem; margin-left: 0.37rem;font-size: 0.13rem;font-weight: 600;}.level{font-size: 0.09rem;margin-left:0.35rem;background-color: #51ba86;transform: skewX(-16deg);width: 0.7rem;color: #fff;text-align: center;}.step img{width: 70%;margin-left: 26%;}.content_list{width: 90%;height:2rem;background-color: #ffffff;position: absolute;top: 47%;left: 5%;}.list_title{width: 100%;line-height: 0.4rem;font-size: 0.15rem;}.list_title p{float: left;font-weight: 900;margin-left: 7%;}.list_title span {float: right;width: 0.8rem;font-size: 0.1rem;color: #e0e0e0;}.list_title span img{width: 0.04rem;}.swiper{width: 100%;height: 1.6rem;display: flex;flex: 1;}.swiper ul li{float: left;width: 25%;height: 0.7rem;}.swiper ul{width: 80%;margin: 2% auto;height: 1.6rem;}.swiper ul li a{display: block;text-align: center;}.swiper ul li a img{width: 50%;}.swiper ul li a p{font-size: 0.1rem;color:#000}.swiper ul li a span{font-size: 0.09rem;color: #e0e0e0;}.content_bottom{width: 100%;height: 0.6rem;position: absolute;top: 5.5rem;text-align: center;}.content_bottom img {width: 70%;}.footer_left {text-align: center;}.footer_right {text-align: center;}.footer_left .foot_img{width: 0.2rem;text-align: center;}.footer_right .foot_img{width: 0.2rem;text-align: center;}.footer_left p{font-size: 10px;color: #b7b7b7;}.footer_right p{font-size: 10px;color: #b7b7b7;}.foot_img_hover{display: none;width: 0.2rem;text-align: center;}.close_news p{text-align: center; border-radius: 0.2rem;width: 1rem;height: 0.3rem;background-color:  #b7b7b7;position: absolute;top: 0.2rem;right: 0.2rem;font-size: 0.2rem;color: #fff;}</style>
</head>
<body><div class="boxOne"><!-- 首先把这个广告图片加载出来 --><img class="boxOne_news" id="boxOne_news" src="./wechatImg/IMG_0780.gif" alt=""> <div class="close_news"><p><span id="count5s">5</span>秒后关闭</p>  </div><div class="content"><div class="header"><span><img src="./wechatImg/jiantou1.png" alt=""></span><p>******</p></div><div class="userBox"><div class="username"><div class="user_img"><img src="./wechatImg/img1.png" alt=""></div><div class="user_left"><p class="name">我的用户名</p><p class="level">LV1 低碳萌新</p></div></div><div class="step"><img src="./wechatImg/img2.png" alt=""></div></div><div class="content_list"><div class="list_title"><p>碳积分获取攻略</p><span>全部攻略 <img src="./wechatImg/list_more.png" alt=""></span></div><div class="swiper"><div class="swiper-wrapper"><div class="swiper-slide"><ul><li><a href="#"><img src="./wechatImg/wechat.png" alt=""><p>微信支付</p><span>每次一积分</span></a></li><li><a href="#"><img src="./wechatImg/zhifubao.png" alt=""><p>支付宝支付</p><span>每次一积分</span></a></li><li><a href="#"><img src="./wechatImg/jd.png" alt=""><p>京东支付</p><span>每次一积分</span></a></li><li><a href="#"><img src="./wechatImg/sport.png" alt=""><p>微信运动</p><span>每次一积分</span></a></li><li><a href="#"><img src="./wechatImg/money.png" alt=""><p>存款</p><span>每次一积分</span></a></li><li><a href="#"><img src="./wechatImg/licai.png" alt=""><p>购买理财</p><span>每次一积分</span></a></li><li><a href="#"><img src="./wechatImg/zhuanzhang.png" alt=""><p>转账</p><span>每次一积分</span></a></li><li><a href="#"><img src="./wechatImg/ATM.png" alt=""><p>ATM/CRS</p><span>每次一积分</span></a></li></ul></div><div class="swiper-slide"><ul><li><a href="#"><img src="./wechatImg/wechat.png" alt=""><p>微信支付</p><span>每次一积分</span></a></li><li><a href="#"><img src="./wechatImg/zhifubao.png" alt=""><p>支付宝支付</p><span>每次一积分</span></a></li><li><a href="#"><img src="./wechatImg/jd.png" alt=""><p>京东支付</p><span>每次一积分</span></a></li><li><a href="#"><img src="./wechatImg/sport.png" alt=""><p>微信运动</p><span>每次一积分</span></a></li><li><a href="#"><img src="./wechatImg/money.png" alt=""><p>存款</p><span>每次一积分</span></a></li><li><a href="#"><img src="./wechatImg/licai.png" alt=""><p>购买理财</p><span>每次一积分</span></a></li><li><a href="#"><img src="./wechatImg/zhuanzhang.png" alt=""><p>转账</p><span>每次一积分</span></a></li><li><a href="#"><img src="./wechatImg/ATM.png" alt=""><p>ATM/CRS</p><span>每次一积分</span></a></li></ul></div></div><!-- 如果需要分页器 --><div class="swiper-pagination"></div></div></div><div class="content_bottom"><img src="./img/index/碳足迹计算器.png" alt=""></div></div><div class="footer"><div class="footer_left"><a href="./index.html"><img class="foot_img" src="./wechatImg/index1.png" alt=""><img class="foot_img_hover" src="./wechatImg/index2 .png" alt=""><p>首页</p></a></div><div class="footer_right"><a href="./mine.html"><img class="foot_img" src="./wechatImg/mine.png" alt=""><img class="foot_img_hover" src="./wechatImg/mine2.png" alt=""><p>我的</p></a></div></div></div><script src="./jquery1.42.min.js"></script><script src="./swiper/swiper-bundle.js"></script><script language="javascript"> var mySwiper = new Swiper('.swiper',{pagination: {el: '.swiper-pagination',},uniqueNavElements: false,})//5秒之后进行自动关闭function closeAds() {document.getElementById('boxOne_news').style.display = "none";}var oCount5s = document.getElementById("count5s").innerTextvar second = parseInt(oCount5s)function countDown() {second -= 1;document.getElementById("count5s").innerText = second;}var countDown = setInterval(countDown, 1000)setInterval(function () {if (second === 0) {closeAds();clearInterval(countDown);}}, 1000)//手动关闭$('.close_news').click(function(){$('.boxOne_news').hide();})</script>
</body>
</html>

html页面广告5秒之后跳过相关推荐

Android 启动页面三秒后跳转主页面多种方法及动画
第一步思路假设 B页面里面一个动画或者一张图片,让app程序一进来就是这个页面过几秒在跳到主页面A. 让程序要进入那个页面先启动就在清单文件里面设置一下,如下 <in ...
支付宝扫码支付完成后如何跳转跳转页面_支付宝支付页面广告（按效果付费，杜绝隐形消费），企业拓客好帮手...
什么是支付宝支付页面广告? 支付宝支付广告,是支付宝支付后在支付完成页或者支付成功通知信息里展现的一种移动广告, 一般通过点击展现的文字.图片.图文等形式链接跳转到广告页面.支付宝支付广告一般有支付 ...
广告域名审核之后跳转技术：点击域名A页面iframe框架下的链接，域名A跳转到域名B...
广告域名审核之后跳转技术:点击域名A页面iframe框架下的链接,域名A跳转到域名B 注:域名B为afish.cnblogs.com 域名A页面代码: <!DOCTYPE html PUBLIC ...
html十秒倒计时跳转,javascript实现倒计时跳转页面
很多网页都有类似的效果,那就是经过指定的时间能够跳转到其他页面,如果再人性化一点话,会带有倒计时效果,本章节就介绍一下如何实现此效果,代码实例如下: var t=10; setInterval(&qu ...
vue跳转页面增加等待_vue实现几秒后跳转新页面代码
我就废话不多说了,大家还是直接看代码吧~ 提交 export default { data(){ return { count:"",//倒计时 } } }, mounted(){ ...
js实现5秒之后跳转到另一个页面
最近在做网上书城项目时,总结了两种方式实现5秒之后跳转到另一个页面. 第一种方式:直接在jsp页面中写入js代码: msg.jsp代码如下: <%@ page language="ja ...
需求：有一个首页，首页中有登录和注册 1. 点击注册进入注册页面。成功注册后，在页面中显示 “恭喜您，注册成功，页面内将在5秒后跳转到个人主页，点击这里立即跳转” 。进入个人主页后显示当前的时间。
1.项目所需的jar包导包:c3p0包.dbut ils包.servlet包,c3p0依赖包以及c3p0文件配置. 创建一个数据库day0914,并创建一个表user用于数据的存储. 数据库相关的包 ...
Android 欢迎界面停留3秒后进入登陆页面，输入登陆信息跳转到空白页面接收展示登陆页面内容
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档目录文章目录一.项目准备二.使用步骤第一个页面 MainActivity,java代码如下(示例): activity_mai ...
php中等3秒再跳转,跳转和重定向
页面跳转在应用开发中,经常会遇到一些带有提示信息的跳转页面,例如操作成功或者操作错误页面,并且自动跳转到另外一个目标页面.系统的ThinkController类内置了两个跳转方法success和er ...
市场营销分析--页面广告统计
基本需求:从埋点日志中,统计每小时页面广告的点击量,5秒刷新一次,并按照不同省份进行划分对于"刷单"式的频繁点击行为点击行为进行过滤,并将该用户加入黑名单解决思路:根据省份进行分 ...

html页面广告5秒之后跳过

html页面广告5秒之后跳过相关推荐

最新文章

热门文章