菜单 搜索
首页 前端知识 html页面广告5秒之后跳过

html页面广告5秒之后跳过

2024-06-24 02:06:05 前端知识 前端哥 38 614 我要收藏
  • 首页
    在这里插入图片描述
-
<!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>
转载请注明出处或者链接地址：https://www.qianduange.cn//article/13393.html
标签
上一篇：HTML基本结构及基本标签
评论
相关文章

前端哥

前端哥

发布的文章

JMeter断言之JSON断言

2024-07-22 01:07:18

jmeter接口关联：JSON提取和正则表达式提取

2024-07-22 01:07:44

39 | XML、JSON、YAML比较

2024-07-22 01:07:13

fastjson1.2.47远程代码执行&JNDI漏洞利用工具

2024-07-22 01:07:11

String和JSON相互转换

2024-07-22 01:07:11

package.json 中的 module 字段作用

2024-07-22 01:07:08

Vscode 中launch.json与tasks.json文件

2024-07-22 01:07:07

使用nvm命令进行node和npm版本下载以及切换

2024-07-22 01:07:59

pnpm : 无法加载文件 C:\Users\Administrator\AppData\Roaming\npm\pnpm.ps1，因为在此系统上禁止运行脚本。

2024-07-22 01:07:56

npm 安装报错

2024-07-22 01:07:55

大家推荐的文章
1

在HTML和CSS当中运用显示隐藏

2024-06-17 09:06:541000
2

成为优秀的TS体操高手 之 TS 类型体操前置知识储备

2024-06-10 11:06:351000
3

django改了html网页没有变化,,前端页面居然没有对应变化?!修改了css文件但是前端页面没有反应

2024-06-06 10:06:201000
4

html简单网页代码：基于html关爱空巢老人网页设计与实现

2024-06-04 10:06:181000
5

jquery实现注册表单验证（仅供参考）

2024-06-07 00:06:411000
6

基于Echarts的高校就业数据可视化管理系统设计与实现（计算机毕业设计源码81461）

2024-05-29 10:05:301000
7

VUE3 Vite Pinia TypeScript项目笔记

2024-05-20 14:05:191000
8

轻松掌握数据库中JSON数据提取：json_extract函数用法详解

2024-05-09 11:05:011000
9

HTML5(六)——Canvas 高级操作

2024-05-09 10:05:191000
10

UE4.27支持HTML5

2024-05-07 13:05:261000

rss订阅 百度xml 谷歌xml 搜狗xml soxml 神马搜索xml 网站地图

Copyright © 2018-2022 前端哥 陕ICP备2023000550号-1 前端哥

讲个笑话：程序员心理活动：看别人的代码，这都写得什么玩意儿，垃圾！！看自己一个月前的代码：这TM谁写得代码，垃圾！再一看，这代码怎么这么眼熟？我自己写得？仔细一看，卧槽！还TM的真是我自己写的！！

前端技术交流源码工具分享网站

会员中心 联系我 留言建议 回顶部
复制成功！