网页右下角小广告

网页右下角小广告页面加载完成页面右下角出现小窗口,倒计时5秒关闭,也可自行手动关闭代码如下:<!DOCTYPE html><html lang="en"

大家好,又见面了,我是你们的朋友全栈君。

  页面加载完成页面右下角出现小窗口,倒计时5秒关闭,也可自行手动关闭
代码如下:
<!DOCTYPE html>
<html lang=”en”>

 

<head>
    <meta charset=”UTF-8″>
    <meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
    <title>Document</title>
    <style>
        .banner {
            width: 260px;
            height: 200px;
            background-color: #999;
            position: fixed;
            right: 0;
            bottom: 0;
        }

 

        em {
            margin-right: 195px;
        }
    </style>
</head>

 

<body>
    <div class=”banner”>
        <em>5s</em>
        <input type=”button” value=”关闭” id=”stop”>
    </div>
    <script>
        let banner = document.querySelector(“.banner”);
        let em = document.querySelector(“em”);
        let stop0 = document.querySelector(“#stop”);

 

        let y = -200;
        let timer = setInterval(function () {
            y++;
            banner.style.cssText = `bottom: ${y}px;`;
            if (y >= 0) {
                time();
                clearInterval(timer);
            }
        }, 5);

 

        // 按钮关闭
        stop0.onclick = function () {
            Object.assign(banner.style, {
                display: “none”
            })
        };
        // 5秒倒计时关闭
        function time() {
            let second = 5;
            let timer = setInterval(function () {
                second–
                em.innerHTML = `${second}s`;
                if (second == 0) {
                    clearInterval(timer);
                    Object.assign(banner.style, {
                        display: “none”
                    })
                }
            }, 1000);
        }
    </script>
</body>
</html>
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/155329.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • 2020最新Java常见面试题及答案

    Java最新常见面试题+答案汇总1、面试题模块汇总面试题包括以下十九个模块:Java基础、容器、多线程、反射、对象拷贝、JavaWeb模块、异常、网络、设计模式、Spring/SpringMVC、SpringBoot/SpringCloud、Hibernate、Mybatis、RabbitMQ、Kafka、Zookeeper、MySql、Redis、JVM。如下图所示:可…

  • html5爱心代码_html爱心动画代码

    html5爱心代码_html爱心动画代码代码<!doctypehtml><html><head><metacharset=”utf-8″><title>canvas爱心</title><style>html,body{height:100%;padding:0;margin:0;background:#000;}canvas{position:absolute;width:100%;

    2022年10月10日
  • maven会自动下载jar包_给maven项目添加jar

    maven会自动下载jar包_给maven项目添加jar1、关闭maven离线模式;具体操作:打开设置ctrl+alt+s,搜索maven,取消勾选Workoffine2、设置自动下载jar包;3、更新不完整依赖命令;

  • 散列/散列函数「建议收藏」

    散列/散列函数「建议收藏」散列是一种用于以常数平均时间执行插入、删除和查找的技术。每个关键字被映射到从0-TableSize-1这个范围中的某个数,并且被放到适当的单元中。这种映射就叫做散列函数我认为,先用散列函数将我们所要进行操作的集合整合成散列表,是对之后的操作的一种便利。放到实际中去,我们要进行操作的集合不仅仅只是数字,例如图书馆中的书籍分类等等。而且就算是一组不连续差距较大的数字,要执行后序的插入删除和查找都是很不方

  • 人人商城生成app教程_人人商城APP打包教程(APICLOUD版)「建议收藏」

    人人商城生成app教程_人人商城APP打包教程(APICLOUD版)「建议收藏」一.APP环境搭建和配置编译1.登录APICLOUD后台新建应用step1注册账号注册apicloud账号并登录APICLOUD控制台step2新建应用再账户下面找到开发控制台=>开发控制台=>创建应用填写应用名和说明,必选NativeApp创建NativeApp2.开发工具下载安装APICLOUD开发工具:安装APICLOUD开发工具3.下载解压。然后运行apiclou…

    2022年10月30日
  • Linux初识[通俗易懂]

    Linux发展史简介Linux是一套自由加开放源代码的类Unix操作系统,诞生于1991年10月5日(第一次正式向外公布),由芬兰学生LinusTorvalds和后来陆续加入的众多爱好者共同开发

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号