Javascript: Czasowe wyświetlanie reklamy

Czasami chcemy, aby na pewnym elemencie naszej strony wyświetlała się reklama przez jakiś czas, a następnie zniknęła. W tym wpisie postaram się pokazać jak to zrobić.

Rozpocznę od pokazania fragmentu HTML


GeSHi Error: GeSHi could not find the language hmtl (using path /home/admin/domains/tobiasz.org/public_html/blog/wp-content/plugins/codecolorer/lib/geshi/) (code 2)

Z powyższego kodu można wywnioskować, że umieszczam reklamę na jakimś obrazku, który ma szerokość 630 pikseli. Reklama będzie wyświetlać się przez 30 sekund po czym zniknie. Użytkownik będzie wiedział dokładnie za jaki czas reklama zniknie. Podam jeszcze kod CSS dla poszczególnych elementów.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
#player {
    width: 630px;
    padding: 10px 0;
}
#cinema-player .ads {
    display: block;
    position: absolute;
    z-index: 1004;
    margin-left: 165px;
    margin-top: 50px;
    width: 300px;
}
#cinema-player div#counter-title {
    display: block;
    position: absolute;
    z-index: 1004;
    text-align: center;
    margin-top: 20px;
    width: 630px;
    color: #fff;
    font-weight: bold;
}

Teraz możemy przejść do najistotniejszej rzeczy, a mianowicie kodu Javascript, który będzie odpowiedzialny za odliczanie.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
function createCounter(elementId, start, end, totalTime, callback){
    var jTarget=jQuery("#"+elementId);
    var interval=totalTime;
    var intervalId;
    var current=start;
    var f=function(){
        jTarget.text(end-current);
        if(current==end) {
            clearInterval(intervalId);
            if(callback) {
                callback();
            }
        }
        ++current;
    }
    intervalId=setInterval(f, interval);
    f();
}


$(document).ready(function() {
    createCounter("counter",0,30,1000,function(){
        $('#player .ads').hide();
        $('#counter-title').hide();
    });

});

I to by było na tyle. Po upływie 30 sekund reklama zniknie z naszego obrazka. Działanie możecie zobaczyć tutaj.

Leave a Comment

18 − sixteen =