{"id":641,"date":"2019-12-22T09:02:31","date_gmt":"2019-12-22T08:02:31","guid":{"rendered":"https:\/\/ekiwi.de\/?p=641"},"modified":"2020-07-07T20:04:47","modified_gmt":"2020-07-07T18:04:47","slug":"javascript-countdown","status":"publish","type":"post","link":"https:\/\/ekiwi.de\/index.php\/641\/javascript-countdown\/","title":{"rendered":"JavaScript Countdown"},"content":{"rendered":"<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_82_2 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Inhalt<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/ekiwi.de\/index.php\/641\/javascript-countdown\/#Countdown_fuer_die_Webseite\" >Countdown f\u00fcr die Webseite<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/ekiwi.de\/index.php\/641\/javascript-countdown\/#HTML-Code_fuer_JavaScript_Countdown\" >HTML-Code f\u00fcr JavaScript Countdown<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/ekiwi.de\/index.php\/641\/javascript-countdown\/#JavaScript-Code_fuer_Countdown\" >JavaScript-Code f\u00fcr Countdown<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/ekiwi.de\/index.php\/641\/javascript-countdown\/#CSS-Code_fuer_Countdown\" >CSS-Code f\u00fcr Countdown<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/ekiwi.de\/index.php\/641\/javascript-countdown\/#iframe-Code_fuer_den_Countdown\" >iframe-Code f\u00fcr den Countdown<\/a><\/li><\/ul><\/nav><\/div>\n<p>Es gibt verschiedene Anl\u00e4sse und Anwendungsf\u00e4lle einen <a title=\"Wiki-Erl\u00e4uterung was ein Countdown ist.\" href=\"https:\/\/de.wikipedia.org\/wiki\/Countdown\" target=\"_blank\" rel=\"noopener noreferrer\">Countdown<\/a> auf seiner Webseite einzubinden:<\/p>\n<ul>\n<li>ganz typischer Answendungsfall ist der Countdown zu <strong>Silvester<\/strong><\/li>\n<li>das <strong>Ende eines Sonderangebot<\/strong> oder einer <strong>Rabattaktion<\/strong> im Online-Handel<\/li>\n<li>die <strong>verbleibende Zeit<\/strong> f\u00fcr ein Event, wie ein <strong>Marathonlauf<\/strong> oder ein <strong>Konzert<\/strong><\/li>\n<li>der 100ste Geburtstag von Opa Wilhelm.<\/li>\n<\/ul>\n<h3><span class=\"ez-toc-section\" id=\"Countdown_fuer_die_Webseite\"><\/span>Countdown f\u00fcr die Webseite<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>In den meisten F\u00e4llen, ist es so, dass nach Ablauf des Countdown ein bestimmtes Ereignis beginnt und f\u00fcr eine konkrete Zeit andauert. Deswegen sind in dem hier dargestellten <strong>JavaScript Countdown<\/strong> zwei verschiedene Textausgaben eingerichtet, die nach Ablauf der jeweiligen Zeit ausgegeben werden. So k\u00f6nnten die beiden Textausgaben f\u00fcr Silvester zum Beispiel wie folgt lauten:<\/p>\n<ul>\n<li><em>&#8222;Neujahr: Feuerwerk!!!&#8220;<\/em> (zu punkt 0:00Uhr)<\/li>\n<li><em>&#8222;Frohes Neues Jahr!&#8220;<\/em> (nach weiteren 4 Std.)<\/li>\n<\/ul>\n<p><small><em>(Im nachfolgenden Beispiel wird bereits eine Minute nach Ablauf des Countdowns umgeschaltet auf &#8222;Frohes Neues Jahr!&#8220;.)<\/em><\/small><\/p>\n<div style=\"text-align: center;\">\n<figure><iframe style=\"overflow: visible;\" title=\"Beispiel eines JavaScript Countdown f\u00fcr Silvester.\" src=\"\/wp-custom\/javascript-countdown\/countdown-ekiwide-1.html\" height=\"110\" name=\"Countdown Silvester\"><\/iframe><figcaption>Beipiel Countdown Silvester.<br \/>\n<small>Seite aktualisieren, um Countdown neu zu starten.<\/small><\/figcaption><\/figure>\n<\/div>\n<p>Oder bei einem Laufwettbewerb, wie einem Marathonlauf:<\/p>\n<ul>\n<li><em>&#8222;Startschuss!!! Wir laufen!&#8220;<\/em> (nach Ablauf des JavaScript Countdown)<\/li>\n<li><em>&#8222;Lauf beendet&#8220;<\/em> (nach weiteren 8 Std.)<\/li>\n<\/ul>\n<p><small><em>(Im nachfolgenden Beispiel wird bereits eine Minute nach Ablauf des Countdowns umgeschaltet auf &#8222;Lauf beendet!&#8220;.)<\/em><\/small><\/p>\n<div style=\"text-align: center;\">\n<figure><iframe style=\"overflow: visible;\" title=\"Beispiel eines JavaScript Countdown f\u00fcr einen Laufwettbewerb.\" src=\"\/wp-custom\/javascript-countdown\/countdown-ekiwide-2.html\" height=\"110\" name=\"Countdown Laufwettbewerb\"><span style=\"display: inline-block; width: 0px; overflow: hidden; line-height: 0;\" data-mce-type=\"bookmark\" class=\"mce_SELRES_start\">\ufeff<\/span><\/iframe><figcaption>Beipiel Countdown Laufwettbewerb.<br \/>\n<small>Seite aktualisieren, um Countdown neu zu starten.<\/small><\/figcaption><\/figure>\n<\/div>\n\n<div class=\"aawp\">\n\n            \n            \n<div class=\"aawp-product aawp-product--horizontal aawp-product--bestseller aawp-product--ribbon\"  data-aawp-product-asin=\"3367109169\" data-aawp-product-id=\"5289\" data-aawp-tracking-id=\"ekiwide0b-21\" data-aawp-product-title=\"JavaScript  Das umfassende Handbuch JavaScript lernen und verstehen Von der ersten Zeile Code zu modernen Web- Mobile- und KI-Anwendungen\">\n\n    <span class=\"aawp-product__ribbon aawp-product__ribbon--bestseller\">Bestseller Nr. 1<\/span>\n    <div class=\"aawp-product__thumb\">\n        <a class=\"aawp-product__image-link\"\n           href=\"https:\/\/www.amazon.de\/dp\/3367109169?tag=ekiwide0b-21&linkCode=ogi&th=1&psc=1&keywords=buch%20javascript\" title=\"JavaScript: Das umfassende Handbuch. JavaScript...\" rel=\"nofollow noopener sponsored\" target=\"_blank\">\n            <img decoding=\"async\" class=\"aawp-product__image\" src=\"https:\/\/m.media-amazon.com\/images\/I\/51LU88KCOFL._SL160_.jpg\" alt=\"JavaScript: Das umfassende Handbuch. JavaScript...\"  \/>\n        <\/a>\n\n            <\/div>\n\n    <div class=\"aawp-product__content\">\n        <a class=\"aawp-product__title\" href=\"https:\/\/www.amazon.de\/dp\/3367109169?tag=ekiwide0b-21&linkCode=ogi&th=1&psc=1&keywords=buch%20javascript\" title=\"JavaScript: Das umfassende Handbuch. JavaScript...\" rel=\"nofollow noopener sponsored\" target=\"_blank\">\n            JavaScript: Das umfassende Handbuch. JavaScript...        <\/a>\n        <div class=\"aawp-product__description\">\n            <ul><li>Ackermann, Philip(Autor)<\/li><\/ul>        <\/div>\n    <\/div>\n\n    <div class=\"aawp-product__footer\">\n\n        <div class=\"aawp-product__pricing\">\n            \n                            <span class=\"aawp-product__price aawp-product__price--current\"><\/span>\n            \n                    <\/div>\n\n                <a class=\"aawp-button aawp-button--buy aawp-button--icon aawp-button--icon-black\" href=\"https:\/\/www.amazon.de\/dp\/3367109169?tag=ekiwide0b-21&#038;linkCode=ogi&#038;th=1&#038;psc=1&#038;keywords=buch%20javascript\" title=\"Bei Amazon kaufen\" target=\"_blank\" rel=\"nofollow noopener sponsored\">Bei Amazon kaufen<\/a>\n            <\/div>\n\n<\/div>\n\n    \n<\/div>\n\n<h3><span class=\"ez-toc-section\" id=\"HTML-Code_fuer_JavaScript_Countdown\"><\/span>HTML-Code f\u00fcr JavaScript Countdown<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Der hier dargestellte JavaScript-Countdown ist so aufgebaut, dass er in einer separate HTML-Datei angelegt wird. Diese HMTL-Datei kann dann als iFrame in der jeweiligen Seite eingebunden werden. Der nachfolgende HTML-Code wird innerhalb des <em>&lt;body&gt;<\/em>-Tags eingef\u00fcgt und enth\u00e4lt die div-Elemente zur Darstellung des Countdowns. Damit jedes Element durch das JavaScript ansprechbar ist, bekommen diese alle eine <em><strong>ID<\/strong><\/em>. So lassen sich nicht nur die Z\u00e4hlwerte dynamisch anpassen, sondern auch die Texte f\u00fcr die Einheiten, wie <em>Tage<\/em>, <em>Std<\/em>., <em>Min<\/em>. und <em>Sek<\/em>.<\/p>\n<pre class=\"brush: xml; title: ; notranslate\" title=\"\">\r\n&lt;div class=&quot;wrapper_countdown&quot;&gt;\r\n  &lt;div class=&quot;row_countdown&quot;&gt;\r\n    &lt;div class=&quot;column_countdown&quot;&gt;\r\n      &lt;div class=&quot;value_countdown&quot; id=&quot;ctn_days&quot;&gt;&lt;\/div&gt;\r\n      &lt;div class=&quot;unit_countdown&quot; id=&quot;unit_days&quot;&gt;&lt;\/div&gt;\r\n    &lt;\/div&gt;\r\n      &lt;div class=&quot;column_countdown&quot;&gt;\r\n      &lt;div class=&quot;value_countdown&quot; id=&quot;mark_countdown1&quot;&gt;&lt;\/div&gt;    \r\n    &lt;\/div&gt;\r\n    &lt;div class=&quot;column_countdown&quot;&gt;    \r\n      &lt;div class=&quot;value_countdown&quot; id=&quot;ctn_hours&quot;&gt;&lt;\/div&gt;\r\n      &lt;div class=&quot;unit_countdown&quot; id=&quot;unit_hours&quot;&gt;&lt;\/div&gt;\r\n    &lt;\/div&gt;\r\n      &lt;div class=&quot;column_countdown&quot;&gt;\r\n      &lt;div class=&quot;value_countdown&quot; id=&quot;mark_countdown2&quot;&gt;&lt;\/div&gt;\r\n    &lt;\/div&gt;\r\n    &lt;div class=&quot;column_countdown&quot;&gt;    \r\n      &lt;div class=&quot;value_countdown&quot; id=&quot;ctn_minutes&quot;&gt;&lt;\/div&gt;\r\n      &lt;div class=&quot;unit_countdown&quot; id=&quot;unit_minutes&quot;&gt;&lt;\/div&gt;\r\n    &lt;\/div&gt;\r\n      &lt;div class=&quot;column_countdown&quot;&gt;\r\n      &lt;div class=&quot;value_countdown&quot; id=&quot;mark_countdown3&quot;&gt;&lt;\/div&gt;\r\n    &lt;\/div&gt;  \r\n    &lt;div class=&quot;column_countdown&quot;&gt;    \r\n      &lt;div style=&quot;color: #e84747&quot; class=&quot;value_countdown&quot; id=&quot;ctn_seconds&quot;&gt;&lt;\/div&gt;\r\n      &lt;div class=&quot;unit_countdown&quot; id=&quot;unit_seconds&quot;&gt;&lt;\/div&gt;\r\n    &lt;\/div&gt;\r\n  &lt;\/div&gt;\r\n&lt;\/div&gt;\r\n<\/pre>\n<h3><span class=\"ez-toc-section\" id=\"JavaScript-Code_fuer_Countdown\"><\/span>JavaScript-Code f\u00fcr Countdown<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Das eigentliche JavaScript f\u00fcr den Countdown f\u00fcgt man vorzugsweise in den <em>&lt;head&gt;<\/em>-Bereich der HTML-Datei ein. In der Variablen <em>countDownDate<\/em> tr\u00e4gt man ein Datum aus der Zukunft ein, zu welchem heruntergez\u00e4hlt werden soll. Die Variable <em>limit<\/em> enth\u00e4lt einen Grenzwert in Millisekunden, der ausgel\u00f6st wird nach einer bestimmten Zeit nachdem der Countdown abgelaufen ist. So lassen sich zwei verschiedene Texte nach Ablauf des Countdowns ausgeben, wie oben beschrieben.<\/p>\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\r\n&lt;script&gt;\r\n    \/\/ hier das Countdown-Datum festlegen, zu welchem runtergez\u00e4hlt werden soll\r\n    var countDownDate = new Date(&quot;Jun 21, 2020 10:00:00&quot;).getTime();\r\n\r\n    \/\/ den Countdown jede Sekunde aktualisieren\r\n    var x = setInterval(function() {\r\n\r\n      \/\/ Aktuelle Zeit ermitteln\r\n      var now = new Date().getTime();\r\n\r\n      \/\/ Differenz ermitteln zwischen Jetz und dem Countdown-Datum; Ergebnis ist in Millisekunden\r\n      var distance = countDownDate - now;\r\n\r\n      \/\/ Zeitberechnung f\u00fcr Tage, Stunden, Minuten und Sekunden\r\n      var days = Math.floor(distance \/ (1000 * 60 * 60 * 24));\r\n      var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) \/ (1000 * 60 * 60));\r\n      var minutes = Math.floor((distance % (1000 * 60 * 60)) \/ (1000 * 60));\r\n      var seconds = Math.floor((distance % (1000 * 60)) \/ 1000);\r\n      var limit = -4*60*60*1000 \/\/ein Grenzwert von 4 Stunden\r\n\r\n      \/\/ Innerhalb einer bestimmten Zeit (4 Stunden) nach Ablauf des Countdown einen bestimmten Text ausgeben\r\n      if (distance &lt;= 0 &amp;&amp;  distance &gt; limit) {\r\n        document.getElementById(&quot;ctn_days&quot;).innerHTML = &quot;&lt;div style=\\&quot;color: #e84747;\\&quot;&gt;Start: Wir laufen!&lt;\/div&gt;&quot;;\r\n        document.getElementById(&quot;ctn_hours&quot;).style.display = 'none';\r\n        document.getElementById(&quot;ctn_minutes&quot;).style.display = 'none';\r\n        document.getElementById(&quot;ctn_seconds&quot;).style.display = 'none';\r\n        document.getElementById(&quot;mark_countdown1&quot;).style.display = 'none';\r\n        document.getElementById(&quot;mark_countdown2&quot;).style.display = 'none';\r\n        document.getElementById(&quot;mark_countdown3&quot;).style.display = 'none';\r\n        document.getElementById(&quot;unit_days&quot;).style.display = 'none';\r\n        document.getElementById(&quot;unit_hours&quot;).style.display = 'none';\r\n        document.getElementById(&quot;unit_minutes&quot;).style.display = 'none';\r\n        document.getElementById(&quot;unit_seconds&quot;).style.display = 'none';\r\n      }\r\n      \/\/ Nach einer bestimmten Zeit nach Ablauf des Countdown (4 Stunden) einen bestimmten Text ausgeben\r\n      else if (distance &lt;= 0 &amp;&amp; distance &lt;= limit) {\r\n        document.getElementById(&quot;ctn_days&quot;).innerHTML = &quot;&lt;div style=\\&quot;color: #e84747;\\&quot;&gt;Lauf beendet!&lt;\/div&gt;&quot;;\r\n        document.getElementById(&quot;ctn_hours&quot;).style.display = 'none';\r\n        document.getElementById(&quot;ctn_minutes&quot;).style.display = 'none';\r\n        document.getElementById(&quot;ctn_seconds&quot;).style.display = 'none';\r\n        document.getElementById(&quot;mark_countdown1&quot;).style.display = 'none';\r\n        document.getElementById(&quot;mark_countdown2&quot;).style.display = 'none';\r\n        document.getElementById(&quot;mark_countdown3&quot;).style.display = 'none';\r\n        document.getElementById(&quot;unit_days&quot;).style.display = 'none';\r\n        document.getElementById(&quot;unit_hours&quot;).style.display = 'none';\r\n        document.getElementById(&quot;unit_minutes&quot;).style.display = 'none';\r\n        document.getElementById(&quot;unit_seconds&quot;).style.display = 'none';\r\n      }\r\n      else{\r\n        \/\/Bl\u00f6cke einblenden\r\n        document.getElementById(&quot;ctn_hours&quot;).style.display = 'block';\r\n        document.getElementById(&quot;ctn_minutes&quot;).style.display = 'block';\r\n        document.getElementById(&quot;ctn_seconds&quot;).style.display = 'block';\r\n        document.getElementById(&quot;mark_countdown1&quot;).style.display = 'block';\r\n        document.getElementById(&quot;mark_countdown2&quot;).style.display = 'block';\r\n        document.getElementById(&quot;mark_countdown3&quot;).style.display = 'block';\r\n        document.getElementById(&quot;unit_days&quot;).style.display = 'block';\r\n        document.getElementById(&quot;unit_hours&quot;).style.display = 'block';\r\n        document.getElementById(&quot;unit_minutes&quot;).style.display = 'block';\r\n        document.getElementById(&quot;unit_seconds&quot;).style.display = 'block';\r\n        \/\/Werte des Countdown anzeigen\r\n        document.getElementById(&quot;ctn_days&quot;).innerHTML = days;\r\n        if (hours &lt; 10 &amp;&amp; hours &gt; -10) {\r\n          \/\/bei einstelligen Zahlen eine null davor setzen\r\n          document.getElementById(&quot;ctn_hours&quot;).innerHTML = &quot;0&quot; + hours;\r\n        } else{\r\n          document.getElementById(&quot;ctn_hours&quot;).innerHTML = hours;\r\n        }\r\n\r\n        if (minutes &lt; 10 &amp;&amp; minutes &gt; -10) {\r\n          \/\/bei einstelligen Zahlen eine null davor setzen\r\n          document.getElementById(&quot;ctn_minutes&quot;).innerHTML = &quot;0&quot; + minutes;\r\n        } else{\r\n          document.getElementById(&quot;ctn_minutes&quot;).innerHTML = minutes;\r\n        }\r\n\r\n        if (seconds &lt; 10 &amp;&amp; seconds &gt; -10) {\r\n          \/\/bei einstelligen Zahlen eine null davor setzen\r\n          document.getElementById(&quot;ctn_seconds&quot;).innerHTML = &quot;0&quot; + seconds;\r\n        } else{\r\n          document.getElementById(&quot;ctn_seconds&quot;).innerHTML = seconds;\r\n        }\r\n        document.getElementById(&quot;mark_countdown1&quot;).innerHTML = ':';\r\n        document.getElementById(&quot;mark_countdown2&quot;).innerHTML = ':';\r\n        document.getElementById(&quot;mark_countdown3&quot;).innerHTML = ':';\r\n        document.getElementById(&quot;unit_days&quot;).innerHTML = 'Tage';\r\n        document.getElementById(&quot;unit_hours&quot;).innerHTML = 'Std.';\r\n        document.getElementById(&quot;unit_minutes&quot;).innerHTML = 'Min.';\r\n        document.getElementById(&quot;unit_seconds&quot;).innerHTML = 'Sek.';\r\n\r\n      }\r\n    }, 1000);\r\n&lt;\/script&gt;\r\n<\/pre>\n<h3><span class=\"ez-toc-section\" id=\"CSS-Code_fuer_Countdown\"><\/span>CSS-Code f\u00fcr Countdown<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>F\u00fcr die Darstellung und Anpassung des Designs der einzelnen <em>&lt;div&gt;<\/em>-Elemente kann der folgende CSS-Code verwendet werden. Insbesondere sollte man hier auf die Verwendung des Attributs <em>&#8222;justify-content: center;&#8220;<\/em> achten, wenn man den Countdown zentrieren m\u00f6chte, da das<a title=\"Zentrieren div-Tag funktioniert nicht\" href=\"https:\/\/ekiwi.de\/index.php\/640\/div-tag-zentrieren\/\"> Zentrieren des div-Elements nicht funktioniert<\/a> mit dem Attribut <em>&#8222;text-align&#8220;<\/em> wenn man <a title=\"Tutorial zur Verwendung von CSS display mit Flex-Boxen\" href=\"https:\/\/www.mediaevent.de\/css\/display-flex.html\" target=\"_blank\" rel=\"noopener noreferrer\">Flex-Boxen f\u00fcr &#8222;<em>display<\/em>&#8222;<\/a> verwendet.<\/p>\n<pre class=\"brush: css; title: ; notranslate\" title=\"\">\r\n&lt;style type=&quot;text\/css&quot;&gt;\r\n  body{\r\n    font-family: 'Francois One', Tahoma, Arial;\r\n    color: #333;\r\n    -ms-word-wrap: break-word;\r\n    word-wrap: break-word;\r\n    text-transform: uppercase;\r\n    padding: 0.1em 0;\r\n  }\r\n  .wrapper_countdown{    \r\n    max-width: 350px;\r\n    margin: 0 auto;\r\n    display: flex;\r\n    justify-content: center;\r\n  }\r\n  .row_countdown:after {\r\n    display: table;\r\n  }\r\n  .column_countdown {\r\n    float: left;      \r\n  }\r\n  .unit_countdown{\r\n    text-align: center;\r\n    font-size: small;\r\n    font-weight: bold;\r\n  }\r\n  .value_countdown{\r\n    text-align: center;\r\n    font-size: xx-large;\r\n    font-weight: bolder;\t\r\n  }\r\n&lt;\/style&gt;\r\n<\/pre>\n<h3><span class=\"ez-toc-section\" id=\"iframe-Code_fuer_den_Countdown\"><\/span>iframe-Code f\u00fcr den Countdown<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Der nachfolgende HTML-Code zeigt beispielhaft die Einbinung des JavaScript-Countdowns mittels eines iFrames. Das <a title=\"Inlineframe\" href=\"https:\/\/de.ryte.com\/wiki\/iframe\" target=\"_blank\" rel=\"noopener noreferrer\">iFrame<\/a> kann nat\u00fcrlich unterschiedlich konfiguriert werden oder man kann den Countdown auch direkt in die gew\u00fcnschte Webseite einbauen.<\/p>\n<pre class=\"brush: xml; title: ; notranslate\" title=\"\">\r\n&lt;iframe style=&quot;width: 100%;&quot; src=&quot;https:\/\/mydomain.de\/my-folder\/my-countdown.html&quot; name=&quot;Countdown&quot;&gt;&lt;\/iframe&gt;\r\n<\/pre>\n\n<div class=\"aawp\">\n\n            \n            \n<div class=\"aawp-product aawp-product--horizontal aawp-product--bestseller aawp-product--ribbon\"  data-aawp-product-asin=\"3989350218\" data-aawp-product-id=\"5290\" data-aawp-tracking-id=\"ekiwide0b-21\" data-aawp-product-title=\"JavaScript f\u00fcr Einsteiger - In einfachen Schritten zum Programmier-Experten  Der leicht verst\u00e4ndliche und praxisnahe Leitfaden zum professionellen Programmieren im Handumdrehen\">\n\n    <span class=\"aawp-product__ribbon aawp-product__ribbon--bestseller\">Bestseller Nr. 1<\/span>\n    <div class=\"aawp-product__thumb\">\n        <a class=\"aawp-product__image-link\"\n           href=\"https:\/\/www.amazon.de\/dp\/3989350218?tag=ekiwide0b-21&linkCode=ogi&th=1&psc=1&keywords=java%20html\" title=\"JavaScript f\u00fcr Einsteiger - In einfachen...\" rel=\"nofollow noopener sponsored\" target=\"_blank\">\n            <img decoding=\"async\" class=\"aawp-product__image\" src=\"https:\/\/m.media-amazon.com\/images\/I\/51fiL4dhEnL._SL160_.jpg\" alt=\"JavaScript f\u00fcr Einsteiger - In einfachen...\"  \/>\n        <\/a>\n\n            <\/div>\n\n    <div class=\"aawp-product__content\">\n        <a class=\"aawp-product__title\" href=\"https:\/\/www.amazon.de\/dp\/3989350218?tag=ekiwide0b-21&linkCode=ogi&th=1&psc=1&keywords=java%20html\" title=\"JavaScript f\u00fcr Einsteiger - In einfachen...\" rel=\"nofollow noopener sponsored\" target=\"_blank\">\n            JavaScript f\u00fcr Einsteiger - In einfachen...        <\/a>\n        <div class=\"aawp-product__description\">\n            <ul><li>Campus, Code(Autor)<\/li><\/ul>        <\/div>\n    <\/div>\n\n    <div class=\"aawp-product__footer\">\n\n        <div class=\"aawp-product__pricing\">\n            \n                            <span class=\"aawp-product__price aawp-product__price--current\"><\/span>\n            \n                    <\/div>\n\n                <a class=\"aawp-button aawp-button--buy aawp-button--icon aawp-button--icon-black\" href=\"https:\/\/www.amazon.de\/dp\/3989350218?tag=ekiwide0b-21&#038;linkCode=ogi&#038;th=1&#038;psc=1&#038;keywords=java%20html\" title=\"Bei Amazon kaufen\" target=\"_blank\" rel=\"nofollow noopener sponsored\">Bei Amazon kaufen<\/a>\n            <\/div>\n\n<\/div>\n\n            \n            \n<div class=\"aawp-product aawp-product--horizontal aawp-product--bestseller aawp-product--ribbon\"  data-aawp-product-asin=\"1999256719\" data-aawp-product-id=\"5291\" data-aawp-tracking-id=\"ekiwide0b-21\" data-aawp-product-title=\"Computer Programming Languages for Beginners  A Complete Breakdown of Java SQL C++ HTML and Python\">\n\n    <span class=\"aawp-product__ribbon aawp-product__ribbon--bestseller\">Bestseller Nr. 2<\/span>\n    <div class=\"aawp-product__thumb\">\n        <a class=\"aawp-product__image-link\"\n           href=\"https:\/\/www.amazon.de\/dp\/1999256719?tag=ekiwide0b-21&linkCode=ogi&th=1&psc=1&keywords=java%20html\" title=\"Computer Programming Languages for Beginners: A...\" rel=\"nofollow noopener sponsored\" target=\"_blank\">\n            <img decoding=\"async\" class=\"aawp-product__image\" src=\"https:\/\/m.media-amazon.com\/images\/I\/51T15kK3NIL._SL160_.jpg\" alt=\"Computer Programming Languages for Beginners: A...\"  \/>\n        <\/a>\n\n            <\/div>\n\n    <div class=\"aawp-product__content\">\n        <a class=\"aawp-product__title\" href=\"https:\/\/www.amazon.de\/dp\/1999256719?tag=ekiwide0b-21&linkCode=ogi&th=1&psc=1&keywords=java%20html\" title=\"Computer Programming Languages for Beginners: A...\" rel=\"nofollow noopener sponsored\" target=\"_blank\">\n            Computer Programming Languages for Beginners: A...        <\/a>\n        <div class=\"aawp-product__description\">\n            <ul><li>Silva, Adesh(Autor)<\/li><\/ul>        <\/div>\n    <\/div>\n\n    <div class=\"aawp-product__footer\">\n\n        <div class=\"aawp-product__pricing\">\n            \n                            <span class=\"aawp-product__price aawp-product__price--current\"><\/span>\n            \n                    <\/div>\n\n                <a class=\"aawp-button aawp-button--buy aawp-button--icon aawp-button--icon-black\" href=\"https:\/\/www.amazon.de\/dp\/1999256719?tag=ekiwide0b-21&#038;linkCode=ogi&#038;th=1&#038;psc=1&#038;keywords=java%20html\" title=\"Bei Amazon kaufen\" target=\"_blank\" rel=\"nofollow noopener sponsored\">Bei Amazon kaufen<\/a>\n            <\/div>\n\n<\/div>\n\n            \n            \n<div class=\"aawp-product aawp-product--horizontal aawp-product--bestseller aawp-product--ribbon\"  data-aawp-product-asin=\"3959821328\" data-aawp-product-id=\"5292\" data-aawp-tracking-id=\"ekiwide0b-21\" data-aawp-product-title=\"HTML5 und CSS3 - Start ohne Vorwissen - mit umfangeichen Download Material  Perfekter Einstieg in HTML und CSS3 ohne Vorkenntnisse Praxisnahe .. - mit umfangeichen Download Material\">\n\n    <span class=\"aawp-product__ribbon aawp-product__ribbon--bestseller\">Bestseller Nr. 3<\/span>\n    <div class=\"aawp-product__thumb\">\n        <a class=\"aawp-product__image-link\"\n           href=\"https:\/\/www.amazon.de\/dp\/3959821328?tag=ekiwide0b-21&linkCode=ogi&th=1&psc=1&keywords=java%20html\" title=\"HTML5 und CSS3 - Start ohne Vorwissen - mit...\" rel=\"nofollow noopener sponsored\" target=\"_blank\">\n            <img decoding=\"async\" class=\"aawp-product__image\" src=\"https:\/\/m.media-amazon.com\/images\/I\/51dNqJXGcrL._SL160_.jpg\" alt=\"HTML5 und CSS3 - Start ohne Vorwissen - mit...\"  \/>\n        <\/a>\n\n            <\/div>\n\n    <div class=\"aawp-product__content\">\n        <a class=\"aawp-product__title\" href=\"https:\/\/www.amazon.de\/dp\/3959821328?tag=ekiwide0b-21&linkCode=ogi&th=1&psc=1&keywords=java%20html\" title=\"HTML5 und CSS3 - Start ohne Vorwissen - mit...\" rel=\"nofollow noopener sponsored\" target=\"_blank\">\n            HTML5 und CSS3 - Start ohne Vorwissen - mit...        <\/a>\n        <div class=\"aawp-product__description\">\n            <ul><li>Wenz, Christian(Autor)<\/li><\/ul>        <\/div>\n    <\/div>\n\n    <div class=\"aawp-product__footer\">\n\n        <div class=\"aawp-product__pricing\">\n            \n                            <span class=\"aawp-product__price aawp-product__price--current\"><\/span>\n            \n                    <\/div>\n\n                <a class=\"aawp-button aawp-button--buy aawp-button--icon aawp-button--icon-black\" href=\"https:\/\/www.amazon.de\/dp\/3959821328?tag=ekiwide0b-21&#038;linkCode=ogi&#038;th=1&#038;psc=1&#038;keywords=java%20html\" title=\"Bei Amazon kaufen\" target=\"_blank\" rel=\"nofollow noopener sponsored\">Bei Amazon kaufen<\/a>\n            <\/div>\n\n<\/div>\n\n    \n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Dieser Artikel zeigt, wie man einen Countdown mittels JavaScript erstellt und in seine Webseite einbindet und nach Ablauf des Counters einen bestimmten Text ausgibt.<\/p>\n","protected":false},"author":2,"featured_media":642,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_links_to":"","_links_to_target":""},"categories":[5],"tags":[118,22,19,4,119,50,44,120],"class_list":["post-641","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-hmtl","tag-countdown","tag-css","tag-grafik","tag-html","tag-java","tag-java-script","tag-javascript","tag-silvester"],"_links":{"self":[{"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/posts\/641","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/comments?post=641"}],"version-history":[{"count":0,"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/posts\/641\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/media\/642"}],"wp:attachment":[{"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/media?parent=641"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/categories?post=641"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/tags?post=641"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}