Realizado

Contagem regressiva para página de vendas

Publicado em 28 de Novembro de 2019 dias na TI e Programação

Sobre este projeto

Menos de USD 50

Olá, possuo um código no meu site que gosto bastante (uma contagem regressiva), essa contagem é feita utilizando dias, horas, minutos e segundos, porém, nele é necessário que eu coloque uma data final para que a página faça essa contagem regressiva, e eu não gostaria de ter uma data final pois eu teria que alterar toda hora, gostaria que toda vez que o cliente carregasse a página essa contagem fosse diminuida começando por 30 minutos.. Ou seja, cliente entra na pagina e um contador regressivo começa de 30 minutos até chegar no 0 minutos (não quero que aconteça nada quando chegar no 0)... Eu vi vários scripts na internet porém eu gostaria de utilizar a estrutura do que já possuo (aproveitar css e tudo mais), pois se alterar a estrutura não vou conseguir configurar no meu site... Vou disponibilizar os códigos das estruturas abaixo para ser feito adaptação:
______________________________________________
no meu index.html consta:
  <div class="container countdown-cont align-center">
        <div class="daysCountdown" title="Dias"></div>
        <div class="hoursCountdown" title="Horas"></div>
        <div class="minutesCountdown" title="Minutos"></div>
        <div class="secondsCountdown" title="Segundos"></div>
        <div class="countdown pt-5 mt-2" data-due-date="2019/11/15">    <!-- é aqui q eu informei que tenho que ficar colocando uma data -->
        </div>
    </div>
______________________________________________
arquivo jquery.countdown.min.js

/*!
* The Final Countdown for jQuery v2.2.0 (http://hilios.github.io/jQuery.countdown/)
* Copyright (c) 2016 Edson Hilios
*
* Permission is hereby granted, free of charge, to any person obtaining a copy of
* this software and associated documentation files (the "Software"), to deal in
* the Software without restriction, including without limitation the rights to
* use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
* the Software, and to permit persons to whom the Software is furnished to do so,
* subject to the following conditions:
*
* The above copyright notice and this permission notice shall be included in all
* copies or substantial portions of the Software.
*
* The software is provided "as is", without warranty of any kind, express or
* implied, including but not limited to the warranties of merchantability, fitness
* for a particular purpose and noninfringement. In no event shall the authors or
* copyright holders be liable for any claim, damages or other liability, whether
* in an action of contract, tort or otherwise, arising from, out of or in
* connection with the software or the use or other dealings in the software.


*/
!Function(a){"use strict";"function"==typeof define&&define.amd?define(["jquery"],a):a(jQuery)}(function(a){"use strict";function b(a){if(a instanceof Date)return a;if(String(a).match(g))return String(a).match(/^[0-9]*$/)&&(a=Number(a)),String(a).match(/\-/)&&(a=String(a).replace(/\-/g,"/")),new Date(a);throw new Error("Couldn't cast `"+a+"` to a date object.")}Function c(a){var b=a.toString().replace(/([.?*+^$[\]\\(){}|-])/G,"\\$1");return new RegExp(b)}function d(a){return function(b){var d=b.match(/%(-|!)?[A-Z]{1}(:[^;]+;)?/gi);if(d)for(var f=0,g=d.length;f<g;++f){var h=d[f].match(/%(-|!)?([a-zA-Z]{1})(:[^;]+;)?/),j=c(h[0]),k=h[1]||"",l=h[3]||"",m=null;h=h[2],i.hasOwnProperty(h)&&(m=i[h],m=Number(a[m])),null!==m&&("!"===k&&(m=e(l,m)),""===k&&m<10&&(m="0"+m.toString()),b=b.replace(j,m.toString()))}return b=b.replace(/%%/,"%")}}function e(a,b){var c="s",d="";return a&&(a=a.replace(/(:|;|\s)/gi,"").split(/\,/),1===a.length?c=a[0]:(d=a[0],c=a[1])),Math.abs(b)>1?c:d}var f=[],g=[],h={precision:100,elapse:!1,defer:!1};g.push(/^[0-9]*$/.source),g.push(/([0-9]{1,2}\/){2}[0-9]{4}( [0-9]{1,2}(:[0-9]{2}){2})?/.source),g.push(/[0-9]{4}([\/\-][0-9]{1,2}){2}( [0-9]{1,2}(:[0-9]{2}){2})?/.source),g=new RegExp(g.join("|"));var i={Y:"years",m:"months",n:"daysToMonth",d:"daysToWeek",w:"weeks",W:"weeksToMonth",H:"hours",M:"minutes",S:"seconds",D:"totalDays",I:"totalHours",N:"totalMinutes",T:"totalSeconds"},j=function(b,c,d){this.el=b,this.$El=a(b),this.interval=null,this.offset={},this.options=a.extend({},h),this.instanceNumber=f.length,f.push(this),this.$El.data("countdown-instance",this.instanceNumber),d&&("function"==typeof d?(this.$El.on("update.countdown",d),this.$El.on("stoped.countdown",d),this.$El.on("finish.countdown",d)):this.options=a.extend({},h,d)),this.setFinalDate(c),this.options.defer===!1&&this.start()};a.extend(j.prototype,{start:function(){null!==this.interval&&clearInterval(this.interval);var a=this;this.update(),this.interval=setInterval(function(){a.update.call(a)},this.options.precision)},stop:function(){clearInterval(this.interval),this.interval=null,this.dispatchEvent("stoped")},toggle:function(){this.interval?this.stop():this.start()},pause:function(){this.stop()},resume:function(){this.start()},remove:function(){this.stop.call(this),f[this.instanceNumber]=null,delete this.$El.data().countdownInstance},setFinalDate:function(a){this.finalDate=b(a)},update:function(){if(0===this.$El.closest("html").length)return void this.remove();var b,c=void 0!==a._data(this.el,"events"),d=new Date;b=this.finalDate.getTime()-d.getTime(),b=Math.ceil(b/1e3),b=!this.options.elapse&&b<0?0:Math.abs(b),this.totalSecsLeft!==b&&c&&(this.totalSecsLeft=b,this.elapsed=d>=this.finalDate,this.offset={seconds:this.totalSecsLeft%60,minutes:Math.floor(this.totalSecsLeft/60)%60,hours:Math.floor(this.totalSecsLeft/60/60)%24,days:Math.floor(this.totalSecsLeft/60/60/24)%7,daysToWeek:Math.floor(this.totalSecsLeft/60/60/24)%7,daysToMonth:Math.floor(this.totalSecsLeft/60/60/24%30.4368),weeks:Math.floor(this.totalSecsLeft/60/60/24/7),weeksToMonth:Math.floor(this.totalSecsLeft/60/60/24/7)%4,months:Math.floor(this.totalSecsLeft/60/60/24/30.4368),years:Math.abs(this.finalDate.getFullYear()-d.getFullYear()),totalDays:Math.floor(this.totalSecsLeft/60/60/24),totalHours:Math.floor(this.totalSecsLeft/60/60),totalMinutes:Math.floor(this.totalSecsLeft/60),totalSeconds:this.totalSecsLeft},this.options.elapse||0!==this.totalSecsLeft?this.dispatchEvent("update"):(this.stop(),this.dispatchEvent("finish")))},dispatchEvent:function(b){var c=a.Event(b+".countdown");c.finalDate=this.finalDate,c.elapsed=this.elapsed,c.offset=a.extend({},this.offset),c.strftime=d(this.offset),this.$El.trigger(c)}}),a.fn.countdown=function(){var b=Array.prototype.slice.call(arguments,0);return this.each(function(){var c=a(this).data("countdown-instance");if(void 0!==c){var d=f[c],e=b[0];j.prototype.hasOwnProperty(e)?d[e].apply(d,b.slice(1)):null===String(e).match(/^[$A-Z_][0-9A-Z_$]*$/i)?(d.setFinalDate.call(d,e),d.start()):a.error("Method %s does not exist on jQuery.countdown".replace(/\%s/gi,e))}else new j(this,b[0],b[1])})}});

// Mobirise Initialization
var isBuilder = $('html').hasClass('is-builder');
function initCountdown() {
    $(".countdown:not(.countdown-inited)").each(function() {
        $(this).addClass('countdown-inited').countdown($(this).attr('data-due-date'), function(event) {
           
            var $days = $(event.target).closest('.countdown-cont').find('div.daysCountdown').attr('title');
            var $hours = $(event.target).closest('.countdown-cont').find('div.hoursCountdown').attr('title');
            var $minutes = $(event.target).closest('.countdown-cont').find('div.minutesCountdown').attr('title');
            var $seconds = $(event.target).closest('.countdown-cont').find('div.secondsCountdown').attr('title');           
            $(this).html(
                event.strftime([
                    '<div class="row">',
                    '<div class="col-xs-3 col-sm-3 col-md-3">',
                    '<span class="number-wrap">',
                    '<span class="number display-2">%D</span>',
                    '<span mbr-text class="period display-7">',$days,'</span>',
                    '<span class="dot">:</span>',
                    '</span>',
                    '</div>',
                    '<div class="col-xs-3 col-sm-3 col-md-3">',
                    '<span class="number-wrap">',
                    '<span class="number display-2">%H</span>',
                    '<span mbr-text class="period display-7">',$hours,'</span>',
                    '<span class="dot">:</span>',
                    '</span>',
                    '</div>',
                    '<div class="col-xs-3 col-sm-3 col-md-3">',
                    '<span class="number-wrap">',
                    '<span class="number display-2">%M</span>',
                    '<span mbr-text class="period display-7">',$minutes,'</span>',
                    '<span class="dot">:</span>',
                    '</span>',
                    '</div>',
                    '<div class="col-xs-3 col-sm-3 col-md-3">',
                    '<span class="number-wrap">',
                    '<span class="number display-2">%S</span>',
                    '<span mbr-text class="period display-7">',$seconds,'</span>',
                    '</span>',
                    '</div>',
                    '</div>'
                ].join(''))
            );
        });
    });

    $(".countdown:not(.countdown-inited)").each(function() {
        $(this).countdown($(this).attr('data-due-date'), function(event) {
            $(this).text(
                event.strftime('%D days %H:%M:%S')
            );
        });
    });
};

function changeCountdown(card, value) {
    var $reg = /\d\d\d\d\/\d\d\/\d\d/g,
        $target = $(card).find('.countdown');
    if (value.search($reg) > -1) {
        $target.removeClass('countdown-inited');
        initCountdown();
    }
}

if (isBuilder) {
    $(document).on('add.cards', function(event) {
        if ($('.countdown').length != 0) {
            initCountdown();
        }
    }).on('changeParameter.cards', function(event, paramName, value) {
        if (paramName === 'countdown') {
            changeCountdown(event.target, value);
        }
    });;
} else {
    if ($('.countdown').length != 0) {
        initCountdown();
    };
}

Categoria TI e Programação
Subcategoria Programação
Qual é o alcance do projeto? Bug ou alteração pequena
Isso é um projeto ou uma posição de trabalho? Um projeto
Tenho, atualmente Eu tenho especificações
Disponibilidade requerida Conforme necessário
Integrações de API Outros (Outras APIs)
Funções necessárias Desenvolvedor

Prazo de Entrega: 22 de Janeiro de 2020

Habilidades necessárias

JavaScript PHP

Voce gostaria de começar trabalhar neste projeto?

Entre com sua conta Workana ou faça o seu cadastro! Potencialize seu trabalho freelancer

Outro projetos publicados por Alaor R.

Freelancers que já se candidataram para este trabalho

  • Analista de TI

  • Desenvolvedor Web desde 2009. Profissional que leva muito a sério sua atividade.

  • Programador Desktop e Mobile IOT | Android | Delphi | C# | Desenhos de Placas PCI, SMD e 2 faces | C++ Microprocessador PIC ARM | Arduino | Raspberry

  • Estudante de programação buscando botar em pratica seus conhecimentos para projetos reais.

  • Desenvolvedor web Full Stack com laravel