Auf Thema antworten 2026

Beitrag

<blockquote data-quote="ovbb" data-source="post: 2391612" data-attributes="member: 73698">halloich nehme mal an, dass der ursprung des scrips dieser <a href="http://tutorialzine.com/2011/12/countdown-jquery/" target="_blank">http://tutorialzine.com/2011/12/countdown-jquery/</a> 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 &quot; ts = new Date(2014, 7, 19),&quot; 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 <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" class="smilie smilie--sprite smilie--sprite1" alt=":-)" title="Smile&nbsp; &nbsp; :-)" loading="lazy" data-shortname=":-)" />index.html[CODE]&lt;html&gt;&lt;head&gt;&lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;jquery.countdown.css&quot; /&gt;&lt;/head&gt;&lt;body style=&quot;background-color: gray&quot;&gt;&lt;div id=&quot;countdown&quot; class=&quot;countdownHolder&quot;&gt;&nbsp; &lt;span class=&quot;countDays&quot;&gt;&nbsp; &lt;span class=&quot;position&quot;&gt;&nbsp; &lt;span class=&quot;digit static&quot;&gt;&lt;/span&gt;&nbsp; &lt;/span&gt;&nbsp; &lt;span class=&quot;position&quot;&gt;&nbsp; &lt;span class=&quot;digit static&quot;&gt;&lt;/span&gt;&nbsp; &lt;/span&gt;&nbsp; &lt;/span&gt;&nbsp; &lt;span class=&quot;countDiv countDiv0&quot;&gt;&lt;/span&gt;&nbsp; &lt;span class=&quot;countHours&quot;&gt;&nbsp; &lt;span class=&quot;position&quot;&gt;&nbsp; &lt;span class=&quot;digit static&quot;&gt;&lt;/span&gt;&nbsp; &lt;/span&gt;&nbsp; &lt;span class=&quot;position&quot;&gt;&nbsp; &lt;span class=&quot;digit static&quot;&gt;&lt;/span&gt;&nbsp; &lt;/span&gt;&nbsp; &lt;/span&gt;&nbsp; &lt;span class=&quot;countDiv countDiv1&quot;&gt;&lt;/span&gt;&nbsp; &lt;span class=&quot;countMinutes&quot;&gt;&nbsp; &lt;span class=&quot;position&quot;&gt;&nbsp; &lt;span class=&quot;digit static&quot;&gt;&lt;/span&gt;&nbsp; &lt;/span&gt;&nbsp; &lt;span class=&quot;position&quot;&gt;&nbsp; &lt;span class=&quot;digit static&quot;&gt;&lt;/span&gt;&nbsp; &lt;/span&gt;&nbsp; &lt;/span&gt;&nbsp; &lt;span class=&quot;countDiv countDiv2&quot;&gt;&lt;/span&gt;&nbsp; &lt;span class=&quot;countSeconds&quot;&gt;&nbsp; &lt;span class=&quot;position&quot;&gt;&nbsp; &lt;span class=&quot;digit static&quot;&gt;&lt;/span&gt;&nbsp; &lt;/span&gt;&nbsp; &lt;span class=&quot;position&quot;&gt;&nbsp; &lt;span class=&quot;digit static&quot;&gt;&lt;/span&gt;&nbsp; &lt;/span&gt;&nbsp; &lt;/span&gt;&nbsp; &lt;span class=&quot;countDiv countDiv3&quot;&gt;&lt;/span&gt;&nbsp;&nbsp; &nbsp;&nbsp; &lt;div id=&quot;note&quot;&gt;&lt;/div&gt;&lt;/div&gt;&lt;script src=&quot;http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js&quot;&gt;&lt;/script&gt;&lt;script src=&quot;jquery.countdown.js&quot;&gt;&lt;/script&gt;&lt;/body&lt;/html&gt;[/CODE]jquery.countdown.js[CODE]/**&nbsp;* @name&nbsp; &nbsp;&nbsp; jQuery Countdown Plugin&nbsp;* @author&nbsp; &nbsp;&nbsp; Martin Angelov&nbsp;* @version&nbsp; &nbsp; 1.0&nbsp;* @url&nbsp; &nbsp; &nbsp;&nbsp; http://tutorialzine.com/2011/12/countdown-jquery/&nbsp;* @license&nbsp; &nbsp;&nbsp; MIT License&nbsp;*/(function($){&nbsp;&nbsp; &nbsp;&nbsp; // Number of seconds in every time division&nbsp;&nbsp; var days&nbsp;&nbsp; = 24*60*60,&nbsp; &nbsp;&nbsp; hours&nbsp;&nbsp; = 60*60,&nbsp; &nbsp;&nbsp; minutes&nbsp;&nbsp; = 60;&nbsp;&nbsp; &nbsp;&nbsp; // Creating the plugin&nbsp;&nbsp; $.fn.countdown = function(prop){&nbsp; &nbsp;&nbsp; &nbsp; &nbsp;&nbsp; var options = $.extend({&nbsp; &nbsp; &nbsp;&nbsp; callback&nbsp;&nbsp; : function(){},&nbsp; &nbsp; &nbsp;&nbsp; timestamp&nbsp;&nbsp; : 0&nbsp; &nbsp;&nbsp; },prop);&nbsp; &nbsp;&nbsp; &nbsp; &nbsp;&nbsp; var left, d, h, m, s, positions;&nbsp; &nbsp;&nbsp; // Initialize the plugin&nbsp; &nbsp;&nbsp; init(this, options);&nbsp; &nbsp;&nbsp; &nbsp; &nbsp;&nbsp; positions = this.find(&#039;.position&#039;);&nbsp; &nbsp;&nbsp; &nbsp; &nbsp;&nbsp; (function tick(){&nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp;&nbsp; // Time left&nbsp; &nbsp; &nbsp;&nbsp; left = Math.floor((options.timestamp - (new Date())) / 1000);&nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp;&nbsp; if(left &lt; 0){&nbsp; &nbsp; &nbsp; &nbsp;&nbsp; left = 0;&nbsp; &nbsp; &nbsp;&nbsp; }&nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp;&nbsp; // Number of days left&nbsp; &nbsp; &nbsp;&nbsp; d = Math.floor(left / days);&nbsp; &nbsp; &nbsp;&nbsp; updateDuo(0, 1, d);&nbsp; &nbsp; &nbsp;&nbsp; left -= d*days;&nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp;&nbsp; // Number of hours left&nbsp; &nbsp; &nbsp;&nbsp; h = Math.floor(left / hours);&nbsp; &nbsp; &nbsp;&nbsp; updateDuo(2, 3, h);&nbsp; &nbsp; &nbsp;&nbsp; left -= h*hours;&nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp;&nbsp; // Number of minutes left&nbsp; &nbsp; &nbsp;&nbsp; m = Math.floor(left / minutes);&nbsp; &nbsp; &nbsp;&nbsp; updateDuo(4, 5, m);&nbsp; &nbsp; &nbsp;&nbsp; left -= m*minutes;&nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp;&nbsp; // Number of seconds left&nbsp; &nbsp; &nbsp;&nbsp; s = left;&nbsp; &nbsp; &nbsp;&nbsp; updateDuo(6, 7, s);&nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp;&nbsp; // Calling an optional user supplied callback&nbsp; &nbsp; &nbsp;&nbsp; options.callback(d, h, m, s);&nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp;&nbsp; // Scheduling another call of this function in 1s&nbsp; &nbsp; &nbsp;&nbsp; setTimeout(tick, 1000);&nbsp; &nbsp;&nbsp; })();&nbsp; &nbsp;&nbsp; &nbsp; &nbsp;&nbsp; // This function updates two digit positions at once&nbsp; &nbsp;&nbsp; function updateDuo(minor,major,value){&nbsp; &nbsp; &nbsp;&nbsp; switchDigit(positions.eq(minor),Math.floor(value/10)%10);&nbsp; &nbsp; &nbsp;&nbsp; switchDigit(positions.eq(major),value%10);&nbsp; &nbsp;&nbsp; }&nbsp; &nbsp;&nbsp; &nbsp; &nbsp;&nbsp; return this;&nbsp;&nbsp; };&nbsp;&nbsp; function init(elem, options){&nbsp; &nbsp;&nbsp; elem.addClass(&#039;countdownHolder&#039;);&nbsp; &nbsp;&nbsp; // Creating the markup inside the container&nbsp; &nbsp;&nbsp; $.each([&#039;Days&#039;,&#039;Hours&#039;,&#039;Minutes&#039;,&#039;Seconds&#039;],function(i){&nbsp; &nbsp; &nbsp;&nbsp; $(&#039;&lt;span class=&quot;count&#039;+this+&#039;&quot;&gt;&#039;).html(&nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &#039;&lt;span class=&quot;position&quot;&gt;\&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &lt;span class=&quot;digit static&quot;&gt;0&lt;/span&gt;\&nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &lt;/span&gt;\&nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &lt;span class=&quot;position&quot;&gt;\&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &lt;span class=&quot;digit static&quot;&gt;0&lt;/span&gt;\&nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &lt;/span&gt;&#039;&nbsp; &nbsp; &nbsp;&nbsp; ).appendTo(elem);&nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp;&nbsp; if(this!=&quot;Seconds&quot;){&nbsp; &nbsp; &nbsp; &nbsp;&nbsp; elem.append(&#039;&lt;span class=&quot;countDiv countDiv&#039;+i+&#039;&quot;&gt;&lt;/span&gt;&#039;);&nbsp; &nbsp; &nbsp;&nbsp; }&nbsp; &nbsp;&nbsp; });&nbsp;&nbsp; }&nbsp;&nbsp; // Creates an animated transition between the two numbers&nbsp;&nbsp; function switchDigit(position,number){&nbsp; &nbsp;&nbsp; &nbsp; &nbsp;&nbsp; var digit = position.find(&#039;.digit&#039;)&nbsp; &nbsp;&nbsp; &nbsp; &nbsp;&nbsp; if(digit.is(&#039;:animated&#039;)){&nbsp; &nbsp; &nbsp;&nbsp; return false;&nbsp; &nbsp;&nbsp; }&nbsp; &nbsp;&nbsp; &nbsp; &nbsp;&nbsp; if(position.data(&#039;digit&#039;) == number){&nbsp; &nbsp; &nbsp;&nbsp; // We are already showing this number&nbsp; &nbsp; &nbsp;&nbsp; return false;&nbsp; &nbsp;&nbsp; }&nbsp; &nbsp;&nbsp; &nbsp; &nbsp;&nbsp; position.data(&#039;digit&#039;, number);&nbsp; &nbsp;&nbsp; &nbsp; &nbsp;&nbsp; var replacement = $(&#039;&lt;span&gt;&#039;,{&nbsp; &nbsp; &nbsp;&nbsp; &#039;class&#039;:&#039;digit&#039;,&nbsp; &nbsp; &nbsp;&nbsp; css:{&nbsp; &nbsp; &nbsp; &nbsp;&nbsp; top:&#039;-2.1em&#039;,&nbsp; &nbsp; &nbsp; &nbsp;&nbsp; opacity:0&nbsp; &nbsp; &nbsp;&nbsp; },&nbsp; &nbsp; &nbsp;&nbsp; html:number&nbsp; &nbsp;&nbsp; });&nbsp; &nbsp;&nbsp; &nbsp; &nbsp;&nbsp; // The .static class is added when the animation&nbsp; &nbsp;&nbsp; // completes. This makes it run smoother.&nbsp; &nbsp;&nbsp; &nbsp; &nbsp;&nbsp; digit&nbsp; &nbsp; &nbsp;&nbsp; .before(replacement)&nbsp; &nbsp; &nbsp;&nbsp; .removeClass(&#039;static&#039;)&nbsp; &nbsp; &nbsp;&nbsp; .animate({top:&#039;2.5em&#039;,opacity:0},&#039;fast&#039;,function(){&nbsp; &nbsp; &nbsp; &nbsp;&nbsp; digit.remove();&nbsp; &nbsp; &nbsp;&nbsp; })&nbsp; &nbsp;&nbsp; replacement&nbsp; &nbsp; &nbsp;&nbsp; .delay(100)&nbsp; &nbsp; &nbsp;&nbsp; .animate({top:0,opacity:1},&#039;fast&#039;,function(){&nbsp; &nbsp; &nbsp; &nbsp;&nbsp; replacement.addClass(&#039;static&#039;);&nbsp; &nbsp; &nbsp;&nbsp; });&nbsp;&nbsp; }})(jQuery);$(function(){&nbsp; var note = $(&#039;#note&#039;),&nbsp; ts = new Date(2014, 7, 19),&nbsp; newYear = false;&nbsp; if((new Date()) &gt; ts){&nbsp; // The new year is here! Count towards something else.&nbsp; // Notice the *1000 at the end - time must be in milliseconds&nbsp; ts = (new Date()).getTime() + 10*24*60*60*1000;&nbsp; newYear = false;&nbsp; }&nbsp; $(&#039;#countdown&#039;).countdown({&nbsp; timestamp&nbsp;&nbsp; : ts,&nbsp; callback&nbsp;&nbsp; : function(days, hours, minutes, seconds){&nbsp; var message = &quot;&quot;;&nbsp; message += days + &quot; day&quot; + ( days==1 ? &#039;&#039;:&#039;s&#039; ) + &quot;, &quot;;&nbsp; message += hours + &quot; hour&quot; + ( hours==1 ? &#039;&#039;:&#039;s&#039; ) + &quot;, &quot;;&nbsp; message += minutes + &quot; minute&quot; + ( minutes==1 ? &#039;&#039;:&#039;s&#039; ) + &quot; and &quot;;&nbsp; message += seconds + &quot; second&quot; + ( seconds==1 ? &#039;&#039;:&#039;s&#039; ) + &quot; &lt;br /&gt;&quot;;&nbsp; if(newYear){&nbsp; message += &quot;left until the new year!&quot;;&nbsp; }&nbsp; else {&nbsp; message += &quot;left to 10 days from now!&quot;;&nbsp; }&nbsp; note.html(message);&nbsp; }&nbsp; });});[/CODE]</blockquote>

[QUOTE="ovbb, post: 2391612, member: 73698"] hallo ich nehme mal an, dass der ursprung des scrips dieser [url]http://tutorialzine.com/2011/12/countdown-jquery/[/url] 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"> <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> [/CODE] 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){ $('').html( '\ 0\ \ \ 0\ ' ).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:'-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' ) + " "; if(newYear){ message += "left until the new year!"; } else { message += "left to 10 days from now!"; } note.html(message); } }); }); [/CODE] [/QUOTE]

Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.

Authentifizierung

Wenn ★ = 12, ◇ = 4 und die Hälfte von ★ zu ◇ addiert wird, was ist das Ergebnis?