js定时器实现右下角弹窗广告缓慢弹出

最新推荐文章于 2024-09-03 19:05:15 发布

百事可口

最新推荐文章于 2024-09-03 19:05:15 发布

阅读量1.6k

点赞数

分类专栏： js 文章标签：定位 css js

本文链接：https://blog.csdn.net/qq_38594056/article/details/106178565

版权

js 专栏收录该内容

41 篇文章 0 订阅

订阅专栏

主要利用js的定时器实现对html元素的定位进行改动，以达到缓慢出现在右下角的效果。
效果如下：
在这里插入图片描述

代码如下：

html和js部分：

<body>
<div id="box" style="position: fixed;right: 0;bottom:-300px">
    <div class="head">系统提醒您
        <i class="iconfont stop">&#xe677;</i>
    </div>
    <div class="body">
        <img src="virus2.png" alt="">
    </div>
    <div class="virusName">
        <p class="clear">发现木马，建议立即清除</p>
        <p class="name">木马文件 ：
            <span>C:\ProgramData\Steam</span>
        </p>
        <p class="name">木马名称 ：
            <span>herosuperProsVirus.exe</span>
        </p>
    </div>
    <div class="bottom">
        <div class="new">添加信任</div>
        <button class="right" type="button">立刻清除</button>
        <button type="button">更多</button>
    </div>
</div>
<script>
    //关闭按钮
    var stop = document.getElementsByClassName('stop')[0];
    var box = document.getElementById('box');
    stop.onclick = function () {
        box.style.display = 'none'
    };
    //设置定时器
    var virus = setInterval(up, 20);

    function up() {
        var speed = 2;
        var bottom = parseInt(box.style.bottom) + speed;
        box.style.bottom = bottom + 'px';
        //console.log(bottom);
        if (bottom >= 0) {
            clearInterval(virus)
        }
    }
</script>

css部分，内部样式：

    <style>
        * {
            margin: 0;
            padding: 0;
            text-align: center;
            text-decoration: none;
        }

        #box {
            width: 400px;
            height: 300px;
        }

        .head {
            width: 400px;
            height: 40px;
            background-color: rgb(241, 53, 8);
            font-size: 22px;
            line-height: 41px;
            color: white;
            padding-left: 10px;
            box-sizing: border-box;
            letter-spacing: 4px;
        }

        .stop {
            font-size: 26px;
            padding-left: 215px;
            text-align: right;
            cursor: pointer;
        }

        .body {
            width: 400px;
            height: 110px;
            background-color: rgb(241, 53, 8);
        }

        img {
            width: 100%;
            height: 100%;
        }

        .virusName {
            width: 400px;
            height: 100px;
            background-color: white;
        }

        .clear {
            color: rgb(241, 53, 8);
            font-size: 26px;
            letter-spacing: 2px;
            font-weight: 700;
        }

        .name {
            font-weight: 700;
            margin-top: 8px;
        }

        span {
            font-weight: normal;
            color: rgb(241, 53, 8);
        }

        .bottom {
            width: 400px;
            height: 50px;
            background-color: rgb(240, 240, 240);
        }

        .new {
            text-align: left;
            color: rgb(0, 0, 204);
            font-size: 18px;
            line-height: 50px;
            float: left;
        }

        button {
            width: 70px;
            height: 40px;
            background-color: rgb(227, 237, 250);
            float: left;
            margin-top: 5px;
            font-size: 18px;
            letter-spacing: 1px;
            border: solid 1px rgb(168, 179, 186);
        }

        .right {
            margin-left: 152px;
            width: 100px;
        }
    </style>