

{"id":772,"date":"2020-03-05T18:59:28","date_gmt":"2020-03-05T17:59:28","guid":{"rendered":"https:\/\/dornisoft.es\/dorniblog\/?p=772"},"modified":"2021-08-12T23:15:40","modified_gmt":"2021-08-12T21:15:40","slug":"cuenta-atras-java-script","status":"publish","type":"post","link":"https:\/\/dornisoft.es\/dorniblog\/cuenta-atras-java-script\/","title":{"rendered":"Cuenta Atras Java Script"},"content":{"rendered":"\n<p>Hoy te explicamos como crear una cuenta atras en Java Script utilizando PHP para que el usuario introduzca los segundos que va a durar la cuenta atras, primero realizamos el formulario HTML con los segundos que durara la cuenta atras<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;div id=\"reloj\">\n    \n\t\t&lt;form action =\"index.php\" method=\"POST\">\n\t\t\tSegundos:&lt;input type=\"number\" name=\"tiempo\"\/>&lt;br>&lt;br\/>\n\t\t\t&lt;input type=\"submit\" value=\"Enviar\">&lt;br>&lt;br\/>\n\t\t&lt;\/form> \n\t&lt;\/div>\t\n\t&lt;?php\n\t\tif($_POST){\n\t\t\t$segundos=$_POST[\"tiempo\"];\n        ?><\/pre>\n\n\n\n<p>Luego creamos el script de manera que creamos una variable con la fecha actual y le sumamos los segundos que nos pas\u00f3 el usuario para la cuenta atr\u00e1s para calcular el final de la cuenta atras y luego restamos el final(end) del ahora(now) y nos da los milisegundos que quedan para la cuenta atras los descomponemos en dias, horas, minutos y segundos y obtenemos los datasw para mostrar<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;?php\necho\"&lt;div id=\\\"countdown\\\">&lt;\/div>\";\necho \"&lt;script>\nvar end1 = new Date();\nvar seg =end1.getSeconds();\nvar end = end1.setSeconds(seg+\".$segundos.\");\n    var _second = 1000;\n    var _minute = _second * 60;\n    var _hour = _minute * 60;\n    var _day = _hour * 24;\n    var timer;\n\n    function showRemaining() {\n        var now = new Date();\n        var distance = end - now;\n        console.log(distance);\n        if (distance &amp;lt; 0) {\n\n            clearInterval(timer);\n            document.getElementById('countdown').innerHTML = 'EXPIRED!';\n\n            return;\n        }\n        var days = Math.floor(distance \/ _day);\n        var hours = Math.floor((distance % _day) \/ _hour);\n        var minutes = Math.floor((distance % _hour) \/ _minute);\n        var seconds = Math.floor((distance % _minute) \/ _second);\n\n\t\tdocument.getElementById('countdown').innerHTML =  'Tiempo para que finalice la cuenta atras:   ';\n        document.getElementById('countdown').innerHTML += days + ' dias, ';\n        document.getElementById('countdown').innerHTML += hours + ' horas, ';\n        document.getElementById('countdown').innerHTML += minutes + ' minutos y ';\n        document.getElementById('countdown').innerHTML += seconds + ' segundos';\n    }\n\n    timer = setInterval(showRemaining, 1000);\n&lt;\/script>\";\n?><\/pre>\n\n\n\n<p>Se puede probar en el siguiente enlace <a rel=\"noreferrer noopener\" aria-label=\"temporizador (abre en una nueva pesta\u00f1a)\" href=\"https:\/\/dornisoft.es\/temporizador\" target=\"_blank\">temporizador<\/a> donde aparte del JavaScript hay algun otro cambio pero de poca importancia.<br>Espero que te haya gustado \ud83d\ude09<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Hoy te explicamos como crear una cuenta atras en Java Script utilizando PHP para que el usuario introduzca los segundos que va a durar la cuenta atras, primero realizamos el formulario HTML con los segundos que durara la cuenta atras Luego creamos el script de manera que creamos una variable con la fecha actual y &hellip; <a href=\"https:\/\/dornisoft.es\/dorniblog\/cuenta-atras-java-script\/\" class=\"more-link\">Continuar leyendo<span class=\"screen-reader-text\"> \u00abCuenta Atras Java Script\u00bb<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[29],"tags":[],"class_list":["post-772","post","type-post","status-publish","format-standard","hentry","category-programacion"],"_links":{"self":[{"href":"https:\/\/dornisoft.es\/dorniblog\/wp-json\/wp\/v2\/posts\/772","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/dornisoft.es\/dorniblog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/dornisoft.es\/dorniblog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/dornisoft.es\/dorniblog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/dornisoft.es\/dorniblog\/wp-json\/wp\/v2\/comments?post=772"}],"version-history":[{"count":17,"href":"https:\/\/dornisoft.es\/dorniblog\/wp-json\/wp\/v2\/posts\/772\/revisions"}],"predecessor-version":[{"id":1289,"href":"https:\/\/dornisoft.es\/dorniblog\/wp-json\/wp\/v2\/posts\/772\/revisions\/1289"}],"wp:attachment":[{"href":"https:\/\/dornisoft.es\/dorniblog\/wp-json\/wp\/v2\/media?parent=772"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/dornisoft.es\/dorniblog\/wp-json\/wp\/v2\/categories?post=772"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/dornisoft.es\/dorniblog\/wp-json\/wp\/v2\/tags?post=772"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}