Contagem progressiva

[alysson122010 2]

To com um problema galeria. Eu queria que essa contagem parasse quando chegasse a um certo tempo sem reiniciar ou se fechasse a pagina ela ficasse onde parou, mas não consigo como faço isso?

Obs: só esta contando os segundo, proposital :). só quero trabalhar com ele.

codigo:

<SCRIPT language=JavaScript>

<!-- begin

var sHors = "0"+0;

var sMins = "0"+0;

var sSecs = -1;

function getSecs(){

sSecs++;

if(sSecs==101){sSecs=0;sMins++;

if(sMins<=9)sMins="0"+sMins;

}

if(sMins==101){sMins="0"+0;sHors++;

if(sHors<=9)sHors="0"+sHors;

}

if(sSecs<=9)sSecs="0"+sSecs;

clock1.innerHTML=sSecs;

setTimeout('getSecs()',1000);

}

//-->

</SCRIPT>

<script>setTimeout('getSecs()',1000);</script>

[Marcelo Lipienski 9]

O código está bem reduzido e claro que você precisa adaptar ele para sua necessidade.

/**
 * Contador incremental
 * 
 * @class Clocker
 */
(function(exports) {
    
    var stopAt = 0;
    var currentTime = 0;
    var timer = null;
    
    
    /**
     * @method current
     */
    exports.current = function() {
        return currentTime;
    };
    
    /**
     * Define depois de quanto tempo o contador deve parar
     * 
     * @method stopAt
     * @param {Integer} seconds Quando parar o contador
     */
    exports.stopAt = function(seconds) {
        stopAt = seconds;
        return this;
    };

    /**
     * Inicia o contador a partir do valor guardado no cookie 
     * ou 0 se não houver.
     * 
     * @method start
     * @param {Function} callback Função para manipular o DOM a cada segundo.
     */
    exports.start = function(callback) {
        var cookie = document.cookie.split(';');
        
        if (Array.isArray(cookie)) {
            currentTime = +cookie[0].split('=')[1]
        }
        
        if (isNaN(currentTime)) {
            currentTime = 0;
        }
        
        timer = setInterval(function() {
            tick(callback);
        }, 1000);
    };
    
    /**
     * @method stop
     */
    exports.stop = function() {
        clearInterval(timer);
    };
    
    /**
     * @private
     * @method tick
     */
    var tick = function(callback) {
        if (currentTime >= stopAt) {
            exports.stop();
            return;
        }
        
        currentTime++;
        createOrUpdateCookie();
        
        callback.call(this);
    };
    
    /**
     * Cria ou atualiza o cookie com o tempo do contador.
     * A duração do cookie é de 30 dias.
     * 
     * @private
     * @method createOrUpdateCookie
     */
    var createOrUpdateCookie = function() {
        var cookie30DayDuration = new Date();
        cookie30DayDuration.setTime(cookie30DayDuration.getTime() + 
                                    (30 * 24 * 60 * 60 * 1000));
        
        document.cookie = 'currentTime=' + currentTime + 
                        '; expires=' + cookie30DayDuration.toUTCString() + '"';
    };

})(this.Clocker = {});

Clocker.stopAt(3).start(function() {
    // Aqui vai seu código para atualizar o DOM
    console.log(Clocker.current());
});

[alysson122010 2]

Tinha como você me ajudar para por no meu código que não estou conseguindo :(

[Marcelo Lipienski 9]

Na pasta do seu projeto, crie um arquivo chamado clocker.js e coloque o código seguinte

/**
 * Contador incremental
 * 
 * @class Clocker
 */
(function(exports) {
    
    var stopAt = 0;
    var currentTime = 0;
    var timer = null;
    
    
    /**
     * @method current
     */
    exports.current = function() {
        return currentTime;
    };
    
    /**
     * Define depois de quanto tempo o contador deve parar
     * 
     * @method stopAt
     * @param {Integer} seconds Quando parar o contador
     */
    exports.stopAt = function(seconds) {
        stopAt = seconds;
        return this;
    };

    /**
     * Inicia o contador a partir do valor guardado no cookie 
     * ou 0 se não houver.
     * 
     * @method start
     * @param {Function} callback Função para manipular o DOM a cada segundo.
     */
    exports.start = function(callback) {
        var cookie = document.cookie.split(';');
        
        if (Array.isArray(cookie)) {
            currentTime = +cookie[0].split('=')[1]
        }
        
        if (isNaN(currentTime)) {
            currentTime = 0;
        }
        
        timer = setInterval(function() {
            tick(callback);
        }, 1000);
    };
    
    /**
     * @method stop
     */
    exports.stop = function() {
        clearInterval(timer);
    };
    
    /**
     * @private
     * @method tick
     */
    var tick = function(callback) {
        if (currentTime >= stopAt) {
            exports.stop();
            return;
        }
        
        currentTime++;
        createOrUpdateCookie();
        
        callback.call(this);
    };
    
    /**
     * Cria ou atualiza o cookie com o tempo do contador.
     * A duração do cookie é de 30 dias.
     * 
     * @private
     * @method createOrUpdateCookie
     */
    var createOrUpdateCookie = function() {
        var cookie30DayDuration = new Date();
        cookie30DayDuration.setTime(cookie30DayDuration.getTime() + 
                                    (30 * 24 * 60 * 60 * 1000));
        
        document.cookie = 'currentTime=' + currentTime + 
                        '; expires=' + cookie30DayDuration.toUTCString() + '"';
    };

})(this.Clocker = {});

em seguida, crie um arquivo chamado clocker.html com o seguinte conteúdo

<html>
    <head>
        <title>Clocker</title>
        <script type="text/javascript" src="clocker.js"></script>
    </head>
    
    <body>
        <h1>Se passaram <span id="clock"></span> segundos</h1>
    </body>

    <script type="text/javascript">
        Clocker.stopAt(10).start(function() {
            document.getElementById('clock').innerText = Clocker.current();
        });
    </script>
</html>

Você vai precisar modificar um pouco o código do arquivo clocker.js para atender suas necessidades, mas você já pode ter uma ideia de como funciona.

[angelorubin 142]

A parte de contar pode ser feita assim, agora só falta você implementar a parte de refresh da pagina.

(function(){
    
    // Contador de segundos

    var seconds = 0;
    
    var counter = document.getElementById('counter');

    function increment(){
        if(seconds < 60) {
            counter.innerHTML = ++seconds;
        }
    }
    
    var run = setInterval(increment, 1000);

})();

[alysson122010 2]

mais como faço para ele mostrar contando?

Esse para quando chega a o número que eu quero?

[angelorubin 142]

É só colocar um elemento html com um id nomeado como counter.

[alysson122010 2]

coloquei mas nada aconteceu

 

<font color="#FF0000">

<div id="counter"></div></font>

[angelorubin 142]

Olha ai funcionando - http://codepen.io/angelorubin/full/zGwJEL

[alysson122010 2]

ata agora sim vlw mesmo :D

[Marcelo Lipienski 9]

Pelo que entendi da sua pergunta, o código do colega não resolve seu problema.

 

Você explicou que a contagem deveria contar de onde parou, no código que você marcou como resolvendo seu problema isso não acontece, sempre que se reabre a página o contador reseta.

[alysson122010 2]

Então como posso resolver esse problema de reset?