2

Estou desenvolvendo um site com uma contagem regressiva.

O código funciona bem no desktop e o temporizador começa a contagem perfeitamente no Firefox e no Chrome, mas no mobile, especificadamente no iphone, navegador Safari, o número mostra NaN: NaN: NaN

Alguém já teve este problema?

Estou utilizando o Countdown JS: http://countdownjs.org/

Segue o código abaixo:

Diretiva:

.directive('tempoPercorrido', function($interval){
            return {
                link: function(scope, element, attrs){
                    var timeNow = new Date(attrs.tempoPercorrido);
                    var units = countdown.DAYS | countdown.HOURS | countdown.MINUTES | countdown.SECONDS;
                    var timespan = countdown(timeNow, null, units, 0, 0);                    
                    function updateTme(){
                        var timespan = countdown(timeNow, null, units, 0, 0);
                        var dias = timespan.days <= 9 ? '0' + timespan.days.toString() : timespan.days.toString();
                        var horas = timespan.hours <= 9 ? '0' + timespan.hours.toString() : timespan.hours.toString();
                        var minutos = timespan.minutes <= 9 ? '0' + timespan.minutes.toString() : timespan.minutes.toString();
                        var segundos = timespan.seconds <= 9 ? '0' + timespan.seconds.toString() : timespan.seconds.toString();

                        var contador = 
                               '<div class="dias circulo">'+ dias + '</div>'+
                               '<div class="horas circulo">'+ horas + '</div>'+
                               '<div class="minutos circulo">'+ minutos + '</div>'+
                               '<div class="segundos circulo">'+ segundos + '</div>';
                        //console.log(timespan);
                        $(element).html(contador);       
                    }

                    updateTme();

                    $interval(function(){
                        updateTme();
                    }, 1000);
                }
            }
        })

Html:

<div class="horario_banner" tempo-percorrido="2017-09-15 10:00:00"></div>

1 Resposta 1

1

Você não precisa de usar uma lib externa do angular caso opte por usar uma lib externa te aconselho a usar a moment.js

//Variável limit caso o seu contador tenha limite
var limitsegundos = 10
function meuContador(){
        if (limitsegundos <= 0) {
            stop();
            vm.title = "Alerta contador terminou";
            limitsegundos = null;
            //Aqui você pode chamar um evento se quiser


        } else {

            limitsegundos--;
            /*Aqui você pode subtrair a sua variável em 1 segundo em 
            javaScript ou  usando a lib moment.js exemplo:
             dateTime.subtract(1, 'seconds').format('m:ss'); */


            mytimeout = $timeout(meuContador(), 1000);

        } 
var mytimeout = $timeout(meuContador(), 1000);

//Function responsável por parar o contador caso seja necessário:
function stop() {
        $timeout.cancel(mytimeout);
    }

Na View te aconselho usar o filter para a apresentar a data de acordo com a documentação de data do angularjs

 <div class="horario_banner" tempo-percorrido="{{seuTempo | date:'yyyy-MM-dd HH:mm:ss' }}"></div>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .