Ir ao conteúdo
  • Cadastre-se
Regras do Clube do Hardware

CONTADOR countdown-timer.js

Alex Freitas_375871

Por Alex Freitas_375871
em Web e banco de dados

 Compartilhar
Ir à solução Resolvido por DiF,

Posts recomendados

Alex Freitas_375871
 

Alex Freitas_375871

Postado
Postado

:thumbsup: Olá amigo obrigado pela atenção! bom estou com um site de contagem regressiva countdown-timer.js  porém ele fica sempre marcando 165 dias 12 horas 43 minutos e os segundo, porém não sei como mudar para deixa uma outra data... poderiam me ajudar?? 
abaixo o código do arquivo "countdown-timer.js" no arquivo html já esta 00:00:00:00 como mostra no fim do post. 

como está no countdown-timer.js 

(function($) {
    $.fn.countdown = function(options, callback) {
        //custom 'this' selector
        thisEl = $(this);
        //array of custom settings
        var settings = { 
            'date': null,
            'format': null
        };
        //append the settings array to options
        if(options) {
            $.extend(settings, options);
        }
        
        //main countdown function
        function countdown_proc() {
            
            eventDate = Date.parse(settings['date']) / 1000;
            currentDate = Math.floor($.now() / 1000);
            
            if(eventDate <= currentDate) {
                callback.call(this);
                clearInterval(interval);
            }
            
            seconds = eventDate - currentDate;
            
            days = Math.floor(seconds / (60 * 60 * 24)); //calculate the number of days
            seconds -= days * 60 * 60 * 24; //update the seconds variable with no. of days removed
            
            hours = Math.floor(seconds / (60 * 60));
            seconds -= hours * 60 * 60; //update the seconds variable with no. of hours removed
            
            minutes = Math.floor(seconds / 60);
            seconds -= minutes * 60; //update the seconds variable with no. of minutes removed
            
            //conditional Ss
            if (days == 1) { thisEl.find(".timeRefDays").text("day"); } else { thisEl.find(".timeRefDays").text("days"); }
            if (hours == 1) { thisEl.find(".timeRefHours").text("hour"); } else { thisEl.find(".timeRefHours").text("hours"); }
            if (minutes == 1) { thisEl.find(".timeRefMinutes").text("minute"); } else { thisEl.find(".timeRefMinutes").text("minutes"); }
            if (seconds == 1) { thisEl.find(".timeRefSeconds").text("second"); } else { thisEl.find(".timeRefSeconds").text("seconds"); }
            
            //logic for the two_digits ON setting
            if(settings['format'] == "on") {
                days = (String(days).length >= 2) ? days : "0" + days;
                hours = (String(hours).length >= 2) ? hours : "0" + hours;
                minutes = (String(minutes).length >= 2) ? minutes : "0" + minutes;
                seconds = (String(seconds).length >= 2) ? seconds : "0" + seconds;
            }
            
            //update the countdown's html values.
            if(!isNaN(eventDate)) {
                thisEl.find(".days").text(days);
                thisEl.find(".hours").text(hours);
                thisEl.find(".minutes").text(minutes);
                thisEl.find(".seconds").text(seconds);
            } else { 
                alert("Invalid date. Here's an example: 12 Tuesday 2012 17:30:00");
                clearInterval(interval); 
            }
        }
        
        //run the function
        countdown_proc();
        
        //loop the function
        interval = setInterval(countdown_proc, 1000);
        
    }
}) (jQuery);





como está no HTML 
  

<div class="countdown-wrapper mb-30 white-text">
                        <ul class="countdown">
                            <li>                    
                                <span class="days white-text">00</span>
                                <p>dias</p>
                            </li>
                            <li>
                                <span class="hours white-text">00</span>
                                <p>horas </p>
                            </li>
                            <li>
                                <span class="minutes white-text">00</span>
                                <p>minutos</p>
                            </li>
                            <li>
                                <span class="seconds white-text">00</span>
                                <p>segundos</p>
                            </li>               
                        </ul><!-- /countdown -->
                    </div><!-- /.countdown-wrapper -->



Novamente desde já Obrigado pela ajuda de todos!! 

Link para o comentário
Compartilhar em outros sites
Alex Freitas_375871
 

Alex Freitas_375871

Postado
  • Autor
Postado

Então e que não entendo muito por isso achei que pegando um template pronto seria mais fácil. a fina e só iria mudar a contagem e o email. mais não estou conseguindo. esse tema paguei em tema gratuitos bootstrap. ai esta todo o html 

<!DOCTYPE html>
<html lang="pt-BR">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="description" content="Webgraphg">
        <meta name="keywords" content="Matrox pack includes complete websites not just homepages">
        <meta name="author" content="Matrox pack">

        <title>responsive</title>

        <!--  favicon -->
        <link rel="shortcut icon" href="assets/img/ico/favicon.png">
        <!--  apple-touch-icon -->
        <link rel="apple-touch-icon-precomposed" sizes="144x144" href="assets/img/ico/apple-touch-icon-144-precomposed.png">
        <link rel="apple-touch-icon-precomposed" sizes="114x114" href="assets/img/ico/apple-touch-icon-114-precomposed.png">
        <link rel="apple-touch-icon-precomposed" sizes="72x72" href="assets/img/ico/apple-touch-icon-72-precomposed.png">
        <link rel="apple-touch-icon-precomposed" href="assets/img/ico/apple-touch-icon-57-precomposed.png">

        <link href='https://fonts.googleapis.com/css?family=Raleway:400,300,500,700,900' rel='stylesheet' type='text/css'>
        <!-- FontAwesome CSS -->
        <link href="assets/fonts/font-awesome/css/font-awesome.min.css" rel="stylesheet">
        <!-- Material Icons CSS -->
        <link href="assets/fonts/iconfont/material-icons.css" rel="stylesheet">
        <!-- materialize -->
        <link href="assets/materialize/css/materialize.min.css" rel="stylesheet">
        <!-- Bootstrap -->
        <link href="assets/bootstrap/css/bootstrap.min.css" rel="stylesheet">
        <!-- Style CSS -->
        <link href="style.css" rel="stylesheet">
        <!-- Custom CSS -->
        <link href="assets/css/custom.css" rel="stylesheet">

        <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
        <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
        <!--[if lt IE 9]>
          <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
          <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
        <![endif]-->
    </head>

    <body id="top">
        
        <section class="banner-1 bg-fixed parallax-bg fullscreen-banner valign-wrapper" data-stellar-background-ratio="0.5">
            <div class="valign-cell">
              <div class="container">

              	<div class="comingsoon-wrapper text-center">
	                <div class="logo">
	                    <a href="#">
	                    	<img src="assets/img/icon-logo.png" alt="">
	                    </a>
	                </div><!-- /.logo -->
	                
	                <div class="mb-50">
	                    <h1 class="intro-title black-text text-uppercase">Coming soon</h1>
	                    <p class="sub-intro lead">An awesome new company for web resources is coming very soon. Enter your email to request an early invitation!</p>
	                </div>

	                <div class="countdown-wrapper mb-30 white-text">
	                    <ul class="countdown">
	                        <li>                    
	                            <span class="days white-text">00</span>
	                            <p>dias</p>
	                        </li>
	                        <li>
	                            <span class="hours white-text">00</span>
	                            <p>horas </p>
	                        </li>
	                        <li>
	                            <span class="minutes white-text">00</span>
	                            <p>minutos</p>
	                        </li>
	                        <li>
	                            <span class="seconds white-text">00</span>
	                            <p>segundos</p>
	                        </li>               
	                    </ul><!-- /countdown -->
	                </div><!-- /.countdown-wrapper -->

		            <div class="row">
		                <div class="col-md-6 col-md-offset-3">
		                  <div class="subscribe-wrapper text-center">
		                      <form class="subscribe-form mailchimp white-form" method="post">

		                          <div class="input-field">
		                          	<label class="sr-only" for="email">Email</label>
		                            <input id="subscribeEmail" type="email" name="subscribeEmail" class="validate" autocomplete="off" >

                                	<!-- to showing error message -->
		                            <label for="subscribeEmail" data-error="wrong" data-success="right">Type your email</label>
		                          </div>

		                          <button type="submit" class="btn btn-lg pink waves-effect waves-light mt-30 text-capitalize">Subscribe Now</button>

		                          <!-- to showing success messages -->
		                          <p class="subscription-success text-center"></p>
		                      </form>
		                  </div><!-- /.subscribe-wrapper -->
		                </div><!-- /.col-md-6 -->
		            </div><!-- /.row -->

	            </div><!-- /.comingsoon-wrapper -->

              </div><!-- /.container -->
            </div><!-- /.valign-cell -->

            <div class="mouse-icon hidden-sm hidden-xs">
                <div class="wheel"></div>
            </div>
        </section>


        <section class="section-padding">
            <div class="container">
                <div class="row">
                    <div class="col-md-6">
                    	<h2 class="font-25 text-bold text-uppercase mb-30">About startup</h2>
                    	<p>Matrox material design multi-purpose html template. It comes with huge content and background variants. <a target="_blank" href="https://themeforest.net/item/matrox-material-design-multipurpose-html-template/16917670?ref=TrendyTheme">Matrox</a> is coming very soon. We are nearly there..</p>

                      <div class="progress-section">
                          <span class="progress-title">UX Design</span>
                          <div class="progress">
                              <div class="progress-bar brand-bg six-sec-ease-in-out" role="progressbar" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100">
                                  <span>90%</span>
                              </div>
                          </div><!-- /.progress -->
                      </div> <!-- progress-section end -->

                      <div class="progress-section">
                          <span class="progress-title">Matrox complete websites homepages</span>
                          <div class="progress">
                              <div class="progress-bar brand-bg six-sec-ease-in-out" role="progressbar" aria-valuenow="86" aria-valuemin="0" aria-valuemax="100">
                                  <span>86%</span>
                              </div>
                          </div>
                      </div> <!-- progress-section end -->

                      <div class="progress-section">
                          <span class="progress-title">websites not just homepages</span>
                          <div class="progress">
                              <div class="progress-bar brand-bg six-sec-ease-in-out" role="progressbar" aria-valuenow="86" aria-valuemin="0" aria-valuemax="100">
                                  <span>86%</span>
                              </div>
                          </div>
                      </div> <!-- progress-section end -->

                    </div><!-- /.col-md-6 -->

                    <div class="col-md-5 col-md-offset-1">
                    	<h2 class="font-25 text-bold text-uppercase mb-30">Have any question?</h2>
                        <p>You can use contact form below or contact us via e-mail at: <a href="mailto:[email protected]?Subject=Hello%20TrendyTheme" target="_top">[email protected]</a> Contact form is fully working and very easy to customize.</p>

	                    <form class="comingsoon-contact" name="contact-form" id="contactForm" action="sendemail.php" method="POST">

	                      <div class="row">
	                        <div class="col-md-6">
	                          <div class="input-field">
	                            <input type="text" name="name" class="validate" id="name">
	                            <label for="name">Name</label>
	                          </div>

	                        </div><!-- /.col-md-6 -->

	                        <div class="col-md-6">
	                          <div class="input-field">
	                            <label class="sr-only" for="email">Email</label>
	                            <input id="email" type="email" name="email" class="validate" >
	                            <label for="email" data-error="wrong" data-success="right">Email</label>
	                          </div>
	                        </div><!-- /.col-md-6 -->
	                      </div><!-- /.row -->

	                      <div class="input-field">
	                        <textarea name="message" id="message" class="materialize-textarea" ></textarea>
	                        <label for="message">Message</label>
	                      </div>

	                      <button type="submit" name="submit" class="waves-effect waves-light btn submit-button pink mt-30 text-capitalize">Send Message</button>
	                    </form>

                    </div><!-- /.col-md-5 -->
                </div><!-- /.row -->
            </div><!-- /.container -->
        </section>


        <footer class="footer">
            <div class="primary-footer brand-bg text-center">
                <div class="container">

                  <a href="#top" class="page-scroll btn-floating btn-large pink back-top waves-effect waves-light tt-animate btt" data-section="#top">
                    <i class="material-icons"></i>
                  </a>

                  <ul class="social-link tt-animate ltr mt-20">
                    <li><a target="_blank" href="https://www.facebook.com/trendytheme/"><i class="fa fa-facebook"></i></a></li>
                    <li><a target="_blank" href="https://twitter.com/Trendy_Theme"><i class="fa fa-twitter"></i></a></li>
                    <li><a target="_blank" href="https://dribbble.com/trendytheme"><i class="fa fa-dribbble"></i></a></li>
                    <li><a target="_blank" href="#"><i class="fa fa-tumblr"></i></a></li>
                    <li><a target="_blank" href="#"><i class="fa fa-linkedin"></i></a></li>
                    <li><a target="_blank" href="#"><i class="fa fa-instagram"></i></a></li>
                    <li><a target="_blank" href="#"><i class="fa fa-rss"></i></a></li>
                  </ul>

                  <hr class="mt-15">

                  <div class="row">
                    <div class="col-md-12">
                          <div class="footer-logo">
                            <a target="_blank" href="https://themeforest.net/item/matrox-material-design-multipurpose-html-template/16917670?ref=TrendyTheme"><img src="assets/img/logo-white.png" alt=""></a>
                          </div>

                          <span class="copy-text">Shared by <i class="fa fa-love"></i><a href="https://bootstrapthemes.co">BootstrapThemes</a>
</span>
                          <div class="footer-intro">
                            <p>Matrox pack includes complete websites not just homepages, it comes with full website demos. Over 200+ ready html files only for 17$. Purchase <a target="_blank" href="https://themeforest.net/item/matrox-material-design-multipurpose-html-template/16917670?ref=TrendyTheme">Matrox</a> Now!</p>
                          </div>
                    </div><!-- /.col-md-12 -->
                  </div><!-- /.row -->

                </div><!-- /.container -->
            </div><!-- /.primary-footer -->
        </footer>

        
        <!-- Preloader -->
        <div id="preloader">
          <div class="preloader-position"> 
            <div class="progress">
              <div class="indeterminate"></div>
            </div>
          </div>
        </div>
        <!-- End Preloader -->


        <!-- jQuery -->
        <script src="assets/js/jquery-2.1.3.min.js"></script>
        <script src="assets/bootstrap/js/bootstrap.min.js"></script>
        <script src="assets/materialize/js/materialize.min.js"></script>
        <script src="assets/js/jquery.easing.min.js"></script>
        <script src="assets/js/coundown-timer.js"></script>
        <script src="assets/js/smoothscroll.min.js"></script>
        <script src="assets/js/jquery.stellar.min.js"></script>
        <script src="assets/js/imagesloaded.js"></script>
        <script src="assets/js/jquery.inview.min.js"></script>
        <script src="assets/js/ajaxchimp.js"></script>
        <script src="assets/js/ajaxchimp-config.js"></script>
        <script src="assets/js/scripts.js"></script>

    </body>
  
</html>

 

Link para o comentário
Compartilhar em outros sites
  • Moderador
  • Solução
DiF
 

DiF

Postado
  • Moderador
  • Solução
Postado

@Alex Freitas_375871 Olá,  

bem não é assim que funciona...  pegar algo da internet sem saber como aplicar.

Na verdade esse código HTML que postou, nem importa tanto.

O que importa é o plugin jQuery e seu uso.

 

Não tenho como te ensinar a usa-lo pois não sei a origem e nem a documentação desse tal plugin countdown.

 

Por isso recomendo que você procure outro plugin que tenha documentação.

Por exemplo o jQuery Final countdown

Documentação do plugin

 

Onde você define uma data e aplica na função do plugin: 

$(document).ready(function(){
   $('#sua_div').countdown('2017/07/25 12:34:56');

});

PS: isso é só um mero exemplo, não copie pois não vai funcionar, a menos que use o plugin do final countdown. mas eu só dei um exemplo, onde o plugin é aplicado.

 

e é isso que falta no seu código, aplicar a função do plugin. 

  • Curtir 1
Link para o comentário
Compartilhar em outros sites
Visitante
Este tópico está impedido de receber novas respostas.
 Compartilhar
Ir à lista de tópicos

Sobre o Clube do Hardware

No ar desde 1996, o Clube do Hardware é uma das maiores, mais antigas e mais respeitadas comunidades sobre tecnologia do Brasil. Leia mais

Direitos autorais

Não permitimos a cópia ou reprodução do conteúdo do nosso site, fórum, newsletters e redes sociais, mesmo citando-se a fonte. Leia mais

Mais

×
×
  • Criar novo...