JavaScript实现流氓小广告效果

admin • • 前端

我们在浏览网页的时候，经常会遇到各种各样的垃圾弹窗，当你把它关闭之后，过一段时间他又弹出来，非常的让人心烦。这种流氓弹窗我们是可以通过JavaScript的 setTimeout() 方法来实现的。

    <style>
        #ad{
            width: 400px;
            height: 300px;
            display: none;
            background-color: #ddd;
            position: fixed;
            right: 0;
            bottom: 0;
        }
        #close{
            float: right;
            width: 24px;
            height: 24px;
            line-height: 24px;
            text-align: center;
            cursor: pointer;
            color: #fff;
        }
    </style>
</head>
<body>
    <div id="ad">
        <p id="close">X</p>
        <p>
            <span id="time">10</span>
            <span>s之后自动关闭广告</span>
        </p>
    </div>
    
    
    <script>
        //获取对象
        function get(id){
            return document.getElementById(id) ;
        }

        //调用函数获取对象
        var oAd = get('ad') ;
        var oTime = get('time') ;
        var oClose = get('close') ;
        

        showAd() ;

        //封装函数弹窗广告
        //分析：这时候有两种方法关闭倒计时 1.广告结束 ； 2.点击关闭
        function showAd(){
            setTimeout(function (){
                //显示弹窗广告
                oAd.style.display = 'block' ;
                //设置一个倒计时
                var t = setInterval(function (){
                    //如果倒计时结束，弹窗广告关闭
                    oTime.innerHTML--;
                    //判断倒计时是否结束
                    if(oTime.innerHTML < 0){
                        //关闭弹窗
                        oAd.style.display = 'none' ;
                        //清除倒计时
                        clearInterval(t) ;
                        //广告关闭以后，下次还是10s
                        oTime.innerHTML = 10 ;
                        //3s之后弹出小广告
                        showAd() ;
                    }
                },1000)
                //点击X关闭
                oClose.onclick = function() {
                    //关闭弹窗广告
                    oAd.style.display = 'none' ;
                    //清除计时器
                    clearInterval(t);
                    //广告关闭后，下次还是10s
                    oTime.innerHTML = 10 ;
                    showAd()

                }

            },3000)
        }
        
    </script>

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
THE END
分享
二维码
< <上一篇

)">
下一篇>>