html页面广告5秒之后跳过

最新推荐文章于 2023-04-12 20:20:17 发布
最新推荐文章于 2023-04-12 20:20:17 发布
阅读量3.3k 收藏 4
点赞数 1
分类专栏： 苦练基本功 文章标签： 网页布局 交互设计 Swiper组件 碳积分 支付方式
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_47120348/article/details/127860571
版权
  • 首页
    在这里插入图片描述
-
<!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").innerText
        var 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>
爱码～
关注
  • 1
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HTML页面3秒后自动跳转的三种常见方法
12-12
在练习中，我们常常遇到一种问题就是，怎么实现页面N秒之后自动跳转呢？ 我自己遇到问题和查找资料，总结了3个方法 方法1： 最简单的一种：直接在前面<head>里面添加代码： 复制代码代码如下:<span xss=removed> </span><span xss=removed><meta http-equiv=”refresh” content=”3;URL=res.html”> </span> <span xss=removed>//3秒之后自动跳转到res.html，两个属于同一文件下面，要是需要跳转到jsp
前端学习（896）：回调函数以及五秒关闭广告
歌谣的博客
04-19 343
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Docum...
8个超炫酷仿HTML5动画源码
weixin_33724659的博客
01-04 869
1.jQuery万年历插件 带农历老皇历功能 这是一款基于jQuery的日历插件，这款日历插件和之前分享的日历控件有很大差异，它是一本万年历，包含了农历已经老皇历的功能，是一个挑好日子的工具。同时日历还可以查看本年度的放假安排，功能非常强大。有兴趣的朋友可以下载学习。 在线演示 源码下载 2.CSS3发光进度条动画 超炫酷的样式 这次我们要来分享一款非常炫酷的CSS3进度条动画，其样...
定时关闭广告2020/11/24
weixin_50286102的博客
11-24 487
setTimeout(function() { ad.style.display = ‘none’ }, 2000) <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv=
一些页面自动跳转的实现 （功能：5秒后，自动跳转到同目录下的02view.html文件）
wjp553650958的专栏
02-04 1923
1）html的实现head>meta http-equiv="refresh" content="5;url=02view.html">head>优点：简单缺点：Struts Tiles中无法使用 2）javascript的实现script language="javascript" type="text/javascript">   setTimeout("javascrip
dplayer整合前置广告、暂停广告3.0.zip
02-05
skipAfter: 5 // 可跳过广告的等待时间，单位秒 } } }); ``` 4. 性能优化与用户体验 在实现广告功能的同时，DPlayer 3.0也考虑到了性能和用户体验。例如，广告加载和播放过程尽可能不阻塞主视频的加载，广告视频...
pdf-html-quickfix:Chrome 扩展程序可在查看期刊文章时跳过讨厌的“*pdf+html”页面
06-16
为了解决这个问题，开发者创建了"pdf-html-quickfix"这个Chrome扩展程序，它允许用户直接跳过这些烦人的页面，直达PDF原文档。 ### 1. Chrome扩展程序基础知识 Chrome扩展程序是基于浏览器的插件，由一系列Web技术...
倒计时的头部全屏广告显示隐藏特效代码
03-20
在IT行业中，全屏广告是吸引用户注意力的有效方式，尤其在网页设计中，头部全屏广告更是常见。本文将深入探讨如何实现一个具有倒计时功能的头部全屏广告显示和隐藏特效，以及如何为广告添加链接。 首先，我们要了解...
微信小程序进入广告实现代码实例
10-16
首先，我们需要创建一个包含广告的页面，这里是一个简单的HTML结构，包含一个图片组件（`<image>`）用于展示广告，以及一个文本组件（`<text>`）提供“跳过广告”的选项： ```html ...
ad-demo.zip
07-03
在这个ad-demo项目中，HTML5很可能被用来构建页面结构，包括广告图片、跳过和进入首页的按钮，以及倒计时元素。这些特性让广告引导页在不同设备上拥有良好的适应性和性能。 其次，Swiper是一个强大的触摸滑动组件，...
785-788---BOM（定时器(setTimeout() 定时器)，案例：5秒后自动关闭广告，停止 setTimeout() 定时器，setInterval() 定时器）
weixin_51249285的博客
05-04 998
文章目录BOM3 定时器3.1 两种定时器3.2 setTimeout() 定时器案例：5秒后自动关闭广告3.3 停止 setTimeout() 定时器 BOM 3 定时器 eg： 此处轮播图有两张，它每隔一段时间就会播放下一个图片，这些跟时间打交道的效果，我们便可以使用定时器。 3.1 两种定时器 window对象给我们提供了2个非常好用的方法定时器。 setTimeout() setInterval() 3.2 setTimeout() 定时器 window.setTimeout (调用函数,[延
巧用JavaScript定时器3秒自动关闭广告
zy1992As的博客
03-01 1310
在实际开发中，考虑到一个网页中可能会有很多个定时器，所以建议用一个变量保存定时器的id（唯一标识）,若想要在定时器启动后，取消该定时器操作，可以将setTimeost()的返回值（定时器id）传递给clearTimeout)方法。在上述代码中，当参数为一个函数名时，这个函数名不需要加()小括号，否则就变成了立即执行这个函数，将函数执行后的返回值传入。在上述语法中，第1个参数表示到达第2个参数设置的等待时间后要执行的代码，也可以传入一个函数，或者函数名，第2个参数的时间单位以毫秒（ms）计。
JavaScript之BOM对象操作窗口大小、加载、定时器、this指向、同步与异步、location对象、navigator对象、history对象
weixin_53155105的博客
08-09 166
什么是BOM？ BOM（Browser Object Model）即浏览器对象模型，它提供了独立于内容而与浏览器窗口进行交互的对象，其核心对象是 window。 BOM 由一系列相关的对象构成，并且每个对象都提供了很多方法与属性。 BOM 缺乏标准，JavaScript 语法的标准化组织是 ECMA，DOM 的标准化组织是 W3C，BOM 最初是Netscape 浏览器标准的一部分。 window 对象是浏览器的顶级对象,它具有双重角色。 它是 JS 访问浏览器窗口的一个接口。 ..
本节作业之5秒后自动关闭广告、倒计时、发送短信、5秒之后自动跳转页面、获取URL参数数据
最新发布
小王的博客
04-12 923
本节作业之5秒后自动关闭广告、倒计时、发送短信、5秒之后自动跳转页面、获取URL参数数据
html图片5秒后消失,如何让网页中图片等待5秒再显示_html/css_WEB-ITnose
weixin_39951018的博客
06-04 1746
如何让网页中图片等待5秒再显示。网页打开的时候，网页中的图片就会马上显示。如何让某一个图片，在网页打开后5秒在显示出来。回复讨论(解决方案)1. 图片载入有判别事件，在事件中设置图片对象的显示隐藏2. 网页加定时器，到了5s,把指定图片显示出来11222JS定时器setInterval用js控制啊，setTimeout()使用定时器setIntervalsetTimeout() 是在事件触发之后...
点击跳转和5秒之后自动跳转到百度
a86669的博客
10-07 1019
<button>跳转</button> <div></div> <script> varbtt=document.querySelector('button'); vardiv=document.querySelector('div'); vartimer=5; btt.addEventListener('click',function(){ ...
HTML5如果让div只出现几秒,28个你必须知道的HTML5的新特性
weixin_36325879的博客
06-16 273
1. 新的Doctype尽管使用，即使浏览器不懂这句话也会按照标准模式去渲染。2. Figure元素用figure和figcaption来语义化地表示带标题的图片。Thisisanimageofsomethinginteresting.3. 重新定义的已经被重新定义了，现在被用来表示小的排版，如网站底部的版权声明。4. 去掉link和script标签里面的type属性5. 加/不加 ...
html5 input 精确到秒,html5input输入实时检测以及延时优化
weixin_35909443的博客
06-28 543
这篇文章主要介绍了html5 input输入实时检测以及延时优化问题，有一定的参考价值，有需要的朋友可以参考一下，希望对你们有所帮助。有个项目是，这么个情况，输入框，实时监测输入，触发请求。第一想法是input 上的onchange()方法，试了一下，不好用，是值等更改确认了，才会触发，不即时。上网查了一下，$("#fix").on('input propertychange', function...
html5京东秒杀页面代码,静态页面（一）：原生JS模拟京东秒杀专场倒计时
weixin_32803887的博客
06-03 2928
最近将BOM重新复习了一遍，本想使用定时器给女朋友做一个生日倒计时，奈何canvas都忘了。所以模拟了一个京东的秒杀专场倒计时。各位小伙伴有什么建议和意见，请不吝赐教。下面是京东首页的截图：利用BOM提供的setInterval()方法可以实现这样的一个小功能。HTML代码：京东秒杀000000CSS样式表：/*清除默认内外边距*/*{padding:0;margin:0;}/*设置超链接的样式*...
HTML5广告技术解析与应用
该资源是一本关于HTML5在广告领域的应用的电子书，旨在探讨HTML5如何改变和提升数字广告的体验。书中内容涵盖了HTML5技术的发展历程、广告技术的演变、如何利用Web标准进行广告设计，以及HTML5中的Canvas、SVG和Web...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值