用javaScript超时调用制作一个垃圾小广告。

制作成功图片:如下
在这里插入图片描述

<style>
    *{
    
    
        margin:0;
        padding:0;
    }
    #box{
    
    
        width: 200px;
        height: 200px;
        background: url("./img/tubiao.jpg") no-repeat;
        background-size: cover;
        position: fixed;
        right:0;
        bottom:0;
        display: none;/*默认隐藏 超时调用之后显示  之后在点击关闭 5秒之后在弹出*/
    }
    span{
    
    
        display: inline-block;
        width:30px;
        height: 30px;
        text-align: center;
        background: #ccc;
        line-height: 30px;
    }
</style>
<div id="box">
    <span id="spa">X</span>
</div>
<script>
    //超时调用方法:1.setTimeout(function(){},1000) 2.setTimeout(fn1,5000)
    //先获取标签
    var box=document.getElementById("box");
    var spa=document.getElementById("spa");
    //超时调用时间
    setTimeout(fn1,5000);
    //点击事件
    spa.onclick=function() {
    
    
        box.style.display="none";//隐藏
        // location.href="http://www.baidu.com";//也可以关闭之后跳转另一个网页 百度....
        setTimeout(fn1,5000);//隐藏之后 5秒在超时调用
    };
    //封装函数 可以直接调用 多次使用
    function fn1() {
    
    
        box.style.display="block";
    }

猜你喜欢

转载自blog.csdn.net/weixin_46409887/article/details/104646015