jQuery Countdown

rider1984 · 17.07.2014

Hallo an Alle,

ich benötige etwas Hilfe bei meinen jQuery Skript. Ich möchte diesen jetzt so einstellen, das dieser als Beispiel am 01.01.2015 | 00:00:00 Uhr anfängt und am 31.01.2015 | 00:00:00 Uhr aufhört und für den kommenden Monat ( 01.02.2015 | 00:00:00 Uhr ) wieder von vorne anfängt. Wie und Was müsste ich jetzt als nächstes anpassen. Kann mir eventuell Jemand von euch helfen. Im Anhang habe ich euch den Skript mal angehangen.

(function($){

// Number of seconds in every time division
var days = 24*60*60,
hours = 60*60,
minutes = 60;

// Creating the plugin
$.fn.countdown = function(prop){

var options = $.extend({
callback : function(){},
timestamp : 0
},prop);

var left, d, h, m, s, positions;

// Initialize the plugin
init(this, options);

positions = this.find('.position');

(function tick(){

// Time left
left = Math.floor((options.timestamp - (new Date())) / 1000);

if(left < 0){
left = 0;
}

// Number of days left
d = Math.floor(left / days);
updateDuo(0, 1, d);
left -= d*days;

// Number of hours left
h = Math.floor(left / hours);
updateDuo(2, 3, h);
left -= h*hours;

// Number of minutes left
m = Math.floor(left / minutes);
updateDuo(4, 5, m);
left -= m*minutes;

// Number of seconds left
s = left;
updateDuo(6, 7, s);

// Calling an optional user supplied callback
options.callback(d, h, m, s);

// Scheduling another call of this function in 1s
setTimeout(tick, 1000);
})();

// This function updates two digit positions at once
function updateDuo(minor,major,value){
switchDigit(positions.eq(minor),Math.floor(value/10)%10);
switchDigit(positions.eq(major),value%10);
}

return this;
};

function init(elem, options){
elem.addClass('countdownHolder');

// Creating the markup inside the container
$.each(['Days','Hours','Minutes','Seconds'],function(i){
var boxName;
if(this=="Days") {
boxName = "";
}
else if(this=="Hours") {
boxName = "";
}
else if(this=="Minutes") {
boxName = "";
}
else {
boxName = "";
}
$('<div class="count'+this+'">' +
'' +
'0' +
'' +
'' +
'0' +
'' +
'' +
'' + boxName + '' +
''
).appendTo(elem);

if(this!="Seconds"){
elem.append(':');
}
});

}

// Creates an animated transition between the two numbers
function switchDigit(position,number){

var digit = position.find('.digit')

if(digit.is(':animated')){
return false;
}

if(position.data('digit') == number){
// We are already showing this number
return false;
}

position.data('digit', number);

var replacement = $('',{
'class':'digit',
css:{
top:0,
opacity:0
},
html:number
});

// The .static class is added when the animation
// completes. This makes it run smoother.

digit
.before(replacement)
.removeClass('static')
.animate({top:0,opacity:0},'fast',function(){
digit.remove();
})

replacement
.delay(100)
.animate({top:0,opacity:1},'fast',function(){
replacement.addClass('static');
});
}
})(jQuery);

Myhar · 17.07.2014

Da muss man mehr anpassen als dir wahrscheinlich bewusst ist.
Was hast du denn schon versucht und was hat dabei genau nicht geklappt? Wenn du jemand suchst, der dir das schreibt, dann gib Bescheid, wie viel du dafür zahlen kannst/willst.

rider1984 · 17.07.2014

Hallo Myhar, vielen Dank für dein feedback. Ich beschäftige mich erst seit ein par Monaten mit JQuery und dessen Einbindung. Nun bin ich an ein Beispiel aus google hierbei hängen geblieben. Ich finde den Skrip soweit ja ganz gut, nur dabei sind mir jetzt die letzten Fragen aufgekommen, wobei ich keine Antwort oder auch finde,wie das funktionieren würde. Gerne belese ich mich auch weiter, falls du da ein Tip hast. Ich brauche keinen der mir das schreibt, sondern nur Jemanden der mir einen Tip geben kann,wonach bzw. was dafür hier müsste. Momentan fängt der Countdown immer bei 19|23|59|59 an.

ovbb · 18.07.2014

hallo

ich nehme mal an, dass der ursprung des scrips dieser http://tutorialzine.com/2011/12/countdown-jquery/ ist.

Hab das mal eben ausprobiert.

die 2 Dateien die du brauchst ist eine index.html und eine jquery.countdown.js imgleichen verzeichnis.

grundsätzlich läuft das ding aber hat noch ein paar macken.
mit der zeile " ts = new Date(2014, 7, 19)," solltest du das datum einstellen können bis zu welchem er countdown läuft. das mit den 10 tagen ist unnötig (link oben lesen).

hierbei kannst du dann auch eine funktino schreiben, welche dir immer den letzten Tag vom aktuellen monat errechnet und fertig

index.html

Code:

<html>
<head>
<link rel="stylesheet" type="text/css" href="jquery.countdown.css" />
</head>
<body style="background-color: gray">
<div id="countdown" class="countdownHolder">
  <span class="countDays">
  <span class="position">
  <span class="digit static"></span>
  </span>
  <span class="position">
  <span class="digit static"></span>
  </span>
  </span>

  <span class="countDiv countDiv0"></span>

  <span class="countHours">
  <span class="position">
  <span class="digit static"></span>
  </span>
  <span class="position">
  <span class="digit static"></span>
  </span>
  </span>

  <span class="countDiv countDiv1"></span>

  <span class="countMinutes">
  <span class="position">
  <span class="digit static"></span>
  </span>
  <span class="position">
  <span class="digit static"></span>
  </span>
  </span>

  <span class="countDiv countDiv2"></span>

  <span class="countSeconds">
  <span class="position">
  <span class="digit static"></span>
  </span>
  <span class="position">
  <span class="digit static"></span>
  </span>
  </span>

  <span class="countDiv countDiv3"></span>
   
   <div id="note"></div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="jquery.countdown.js"></script>
</body
</html>

jquery.countdown.js

Code:

/**
 * @name     jQuery Countdown Plugin
 * @author     Martin Angelov
 * @version    1.0
 * @url       http://tutorialzine.com/2011/12/countdown-jquery/
 * @license     MIT License
 */

(function($){
   
   // Number of seconds in every time division
   var days   = 24*60*60,
     hours   = 60*60,
     minutes   = 60;
   
   // Creating the plugin
   $.fn.countdown = function(prop){
     
     var options = $.extend({
       callback   : function(){},
       timestamp   : 0
     },prop);
     
     var left, d, h, m, s, positions;

     // Initialize the plugin
     init(this, options);
     
     positions = this.find('.position');
     
     (function tick(){
       
       // Time left
       left = Math.floor((options.timestamp - (new Date())) / 1000);
       
       if(left < 0){
         left = 0;
       }
       
       // Number of days left
       d = Math.floor(left / days);
       updateDuo(0, 1, d);
       left -= d*days;
       
       // Number of hours left
       h = Math.floor(left / hours);
       updateDuo(2, 3, h);
       left -= h*hours;
       
       // Number of minutes left
       m = Math.floor(left / minutes);
       updateDuo(4, 5, m);
       left -= m*minutes;
       
       // Number of seconds left
       s = left;
       updateDuo(6, 7, s);
       
       // Calling an optional user supplied callback
       options.callback(d, h, m, s);
       
       // Scheduling another call of this function in 1s
       setTimeout(tick, 1000);
     })();
     
     // This function updates two digit positions at once
     function updateDuo(minor,major,value){
       switchDigit(positions.eq(minor),Math.floor(value/10)%10);
       switchDigit(positions.eq(major),value%10);
     }
     
     return this;
   };


   function init(elem, options){
     elem.addClass('countdownHolder');

     // Creating the markup inside the container
     $.each(['Days','Hours','Minutes','Seconds'],function(i){
       $('<span class="count'+this+'">').html(
         '<span class="position">\
           <span class="digit static">0</span>\
         </span>\
         <span class="position">\
           <span class="digit static">0</span>\
         </span>'
       ).appendTo(elem);
       
       if(this!="Seconds"){
         elem.append('<span class="countDiv countDiv'+i+'"></span>');
       }
     });

   }

   // Creates an animated transition between the two numbers
   function switchDigit(position,number){
     
     var digit = position.find('.digit')
     
     if(digit.is(':animated')){
       return false;
     }
     
     if(position.data('digit') == number){
       // We are already showing this number
       return false;
     }
     
     position.data('digit', number);
     
     var replacement = $('<span>',{
       'class':'digit',
       css:{
         top:'-2.1em',
         opacity:0
       },
       html:number
     });
     
     // The .static class is added when the animation
     // completes. This makes it run smoother.
     
     digit
       .before(replacement)
       .removeClass('static')
       .animate({top:'2.5em',opacity:0},'fast',function(){
         digit.remove();
       })

     replacement
       .delay(100)
       .animate({top:0,opacity:1},'fast',function(){
         replacement.addClass('static');
       });
   }
})(jQuery);

$(function(){

  var note = $('#note'),
  ts = new Date(2014, 7, 19),
  newYear = false;

  if((new Date()) > ts){
  // The new year is here! Count towards something else.
  // Notice the *1000 at the end - time must be in milliseconds
  ts = (new Date()).getTime() + 10*24*60*60*1000;
  newYear = false;
  }

  $('#countdown').countdown({
  timestamp   : ts,
  callback   : function(days, hours, minutes, seconds){

  var message = "";

  message += days + " day" + ( days==1 ? '':'s' ) + ", ";
  message += hours + " hour" + ( hours==1 ? '':'s' ) + ", ";
  message += minutes + " minute" + ( minutes==1 ? '':'s' ) + " and ";
  message += seconds + " second" + ( seconds==1 ? '':'s' ) + " <br />";

  if(newYear){
  message += "left until the new year!";
  }
  else {
  message += "left to 10 days from now!";
  }

  note.html(message);
  }
  });

});