网页右下角小广告

网页右下角小广告页面加载完成页面右下角出现小窗口,倒计时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)


相关推荐

  • 几张系统图_一共有几个系统

    几张系统图_一共有几个系统几张系统图

  • 学习分享——location.hash的用法「建议收藏」

    学习分享——location.hash的用法「建议收藏」【学习分享】location.hash的用法location对象:设置或获取当前URL的信息使用location对象可以设置或返回URL中的一些信息,一个完整的URL地址的格式为:协议://主机:端口

  • 内核态和用户态的区别[通俗易懂]

    内核态和用户态的区别[通俗易懂]当一个任务(进程)执行系统调用而陷入内核代码中执行时,我们就称进程处于内核运行态(或简称为内核态)。此时处理器处于特权级最高的(0级)内核代码中执行。当进程处于内核态时,执行的内核代码会使用当前进程的内核栈。每个进程都有自己的内核栈。当进程在执行用户自己的代码时,则称其处于用户运行态(用户态)。即此时处理器在特权级最低的(3级)用户代码中运行。当正在执行用户程序而突然被中断程序中断时,此时用户程序…

  • 博客搬家

    博客搬家我的另一个博客http://www.cnblogs.com/dingxiaowei欢迎光临,共同学习!我的新浪微博http://blog.sina.com.cn/dingxiaowei2013转载于:https://www.cnblogs.com/java20130723/archive/2013/01/04/3211485.html…

  • mac远程连接mysql「建议收藏」

    mac远程连接mysql「建议收藏」sudosshroot@IPmysql-uroot-p-hIP

    2022年10月13日
  • phpstorm激活码2022【中文破解版】

    (phpstorm激活码2022)这是一篇idea技术相关文章,由全栈君为大家提供,主要知识点是关于2021JetBrains全家桶永久激活码的内容https://javaforall.cn/100143.htmlIntelliJ2021最新激活注册码,破解教程可免费永久激活,亲测有效,上面是详细链接哦~747EFQ8BIF-eyJsaWNlb…

发表回复

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

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