JavaScript实现流氓小广告效果

我们在浏览网页的时候,经常会遇到各种各样的垃圾弹窗,当你把它关闭之后,过一段时间他又弹出来,非常的让人心烦。这种流氓弹窗我们是可以通过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>

如需转载,请注明文章出处和来源网址:http://www.divcss5.com/html/h64299.shtml

张贴在3