├── img └── thumb.png ├── README.md ├── js ├── countdown.js └── simplyCountdown.min.js ├── css └── estilos.css └── index.html /img/thumb.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/falconmasters/cuenta-regresiva/HEAD/img/thumb.png -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Aprende a Crear una Cuenta Regresiva Fácil y Rapido con Javascript | SimplyCountdown.js 2 | ### [Tutorial: https://youtu.be/UMpqdZKJV7M](https://youtu.be/UMpqdZKJV7M) 3 | 4 | ![Aprende a Crear una Cuenta Regresiva Fácil y Rapido con Javascript | SimplyCountdown.js](https://raw.githubusercontent.com/falconmasters/cuenta-regresiva/master/img/thumb.png) 5 | 6 | Por: [FalconMasters](http://www.falconmasters.com) -------------------------------------------------------------------------------- /js/countdown.js: -------------------------------------------------------------------------------- 1 | simplyCountdown('#cuenta', { 2 | year: 2025, // required 3 | month: 2, // required 4 | day: 19, // required 5 | hours: 7, // Default is 0 [0-23] integer 6 | minutes: 31, // Default is 0 [0-59] integer 7 | seconds: 0, // Default is 0 [0-59] integer 8 | words: { //words displayed into the countdown 9 | days: 'Día', 10 | hours: 'Hora', 11 | minutes: 'Minuto', 12 | seconds: 'Segundo', 13 | pluralLetter: 's' 14 | }, 15 | plural: true, //use plurals 16 | inline: false, //set to true to get an inline basic countdown like : 24 days, 4 hours, 2 minutes, 5 seconds 17 | inlineClass: 'simply-countdown-inline', //inline css span class in case of inline = true 18 | // in case of inline set to false 19 | enableUtc: true, //Use UTC as default 20 | onEnd: function() { 21 | document.getElementById('portada').classList.add('oculta'); 22 | return; 23 | }, //Callback on countdown end, put your own function here 24 | refresh: 1000, // default refresh every 1s 25 | sectionClass: 'simply-section', //section css class 26 | amountClass: 'simply-amount', // amount css class 27 | wordClass: 'simply-word', // word css class 28 | zeroPad: false, 29 | countUp: false 30 | }); -------------------------------------------------------------------------------- /css/estilos.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | } 6 | 7 | body { 8 | background: #EFEFEF; 9 | color: #363639; 10 | font-family: 'Work Sans', sans-serif; 11 | } 12 | 13 | 14 | 15 | /* ? ----- PORTADA ----- */ 16 | .portada { 17 | width: 100%; 18 | background: #EFEFEF; 19 | 20 | min-height: 100vh; 21 | position: fixed; 22 | top: 0; 23 | left: 0; 24 | right: 0; 25 | 26 | display: flex; 27 | flex-direction: column; 28 | align-items: center; 29 | justify-content: center; 30 | text-align: center; 31 | transition: .5s ease-out all; 32 | } 33 | 34 | .portada.oculta { 35 | transform: translateY(100%); 36 | } 37 | 38 | .portada .header { 39 | margin-bottom: 100px; 40 | text-transform: uppercase; 41 | letter-spacing: 3px; 42 | } 43 | 44 | .portada .header .logotipo { 45 | font-size: 50px; 46 | font-size: 900; 47 | margin-bottom: 20px; 48 | } 49 | 50 | .portada .header .mensaje { 51 | font-size: 30px; 52 | font-weight: 600; 53 | } 54 | 55 | 56 | 57 | /* ? ----- MAIN ----- */ 58 | main { 59 | max-width: 1000px; 60 | margin: auto; 61 | width: 90%; 62 | padding: 60px 0; 63 | font-size: 18px; 64 | line-height: 28px; 65 | text-align: left; 66 | } 67 | 68 | 69 | 70 | /* ? ----- Cuenta Regresiva ----- */ 71 | #cuenta { 72 | display: flex; 73 | justify-content: center; 74 | margin-bottom: 100px; 75 | } 76 | 77 | .simply-section { 78 | background: #fff; 79 | width: 180px; 80 | height: 180px; 81 | margin: 0 20px; 82 | border-radius: 5px; 83 | display: flex; 84 | align-items: center; 85 | justify-content: center; 86 | } 87 | 88 | .simply-amount { 89 | display: block; 90 | font-size: 50px; 91 | font-weight: 700; 92 | } 93 | 94 | .simply-word { 95 | font-weight: 300; 96 | font-size: 30px; 97 | } 98 | 99 | 100 | /* ? ---------------------------- */ 101 | 102 | 103 | 104 | /* ? ----- REDES SOCIALES ----- */ 105 | .redes-sociales .btn-red-social { 106 | padding: 15px 0; 107 | display: inline-block; 108 | min-width: 120px; 109 | border-radius: 5px; 110 | background: #FF0000; 111 | color: #fff; 112 | font-size: 30px; 113 | margin: 0 20px; 114 | transition: .3s ease all; 115 | } 116 | 117 | .redes-sociales .btn-red-social:hover { 118 | box-shadow: 0px 0px 50px 10px rgba(0,0,0,.15); 119 | } -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Cuenta Regresiva - Simply Coundown JS 7 | 8 | 9 | 10 | 11 | 12 |
13 |
14 |

FalconMasters

15 |

sitio web en construcción

16 |
17 | 18 |
19 | 20 |
21 | 22 | 23 | 24 |
25 |
26 | 27 |
28 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Natus hic obcaecati fugit illo voluptatibus reiciendis tempora sequi, harum enim eaque fugiat est! Fugiat ipsam eaque qui facilis esse sed voluptatem? 29 | Quibusdam quasi voluptatum non fuga. Sit assumenda qui culpa nam vitae maiores, at enim minus eos soluta numquam asperiores ratione iusto perspiciatis cumque? Tenetur dicta voluptates, doloremque ipsa itaque cupiditate! 30 | Suscipit placeat, officia enim labore, mollitia corporis molestiae quam amet voluptates quaerat ipsum ut nostrum! Perferendis quidem sapiente, accusamus placeat voluptatem quae laboriosam animi earum nemo natus, culpa eum quam. 31 | Recusandae illo aliquam, animi fugit cupiditate blanditiis numquam! Laboriosam quos ullam optio distinctio maiores dolorem pariatur quaerat nulla adipisci cum ratione provident, ducimus delectus quod illum dicta nisi iusto mollitia? 32 | A iste eius necessitatibus porro eaque architecto eveniet culpa voluptatibus non! Eius deleniti amet, assumenda eveniet necessitatibus iste quasi facere laudantium dolores numquam commodi magnam ducimus dignissimos quis! Alias, fugit.

33 |
34 | 35 | 36 | 37 | 38 | 39 | -------------------------------------------------------------------------------- /js/simplyCountdown.min.js: -------------------------------------------------------------------------------- 1 | "use strict";function _typeof(t){return(_typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t})(t)}!function(t){ 2 | /*! 3 | * Project : simply-countdown 4 | * Date : 27/06/2015 5 | * License : MIT 6 | * Version : 1.5.0 7 | * Author : Vincent Loy 8 | * Contributors : 9 | * - Justin Beasley 10 | * - Nathan Smith 11 | */ 12 | var e=function(t,e,n){var o=document.createElement("div"),s=document.createElement("span"),r=document.createElement("span"),a=document.createElement("div");return a.appendChild(s),a.appendChild(r),o.appendChild(a),o.classList.add(e.sectionClass),o.classList.add(n),s.classList.add(e.amountClass),r.classList.add(e.wordClass),t.appendChild(o),{full:o,amount:s,word:r}};t.simplyCountdown=function(t,n){var o,s,r,a,d,c,i,l,u,m,p=function t(e){for(var n,o=e||{},s=1;s0?f():p.countUp?(c=(a.getTime()-s)/1e3,f()):(i=0,l=0,u=0,m=0,window.clearInterval(o),p.onEnd()),p.plural?(t=i>1?p.words.days+p.words.pluralLetter:p.words.days,e=l>1?p.words.hours+p.words.pluralLetter:p.words.hours,n=u>1?p.words.minutes+p.words.pluralLetter:p.words.minutes,w=m>1?p.words.seconds+p.words.pluralLetter:p.words.seconds):(t=p.words.days,e=p.words.hours,n=p.words.minutes,w=p.words.seconds),p.inline?r.innerHTML="".concat(i," ").concat(t,", ")+"".concat(l," ").concat(e,", ")+"".concat(u," ").concat(n,", ")+"".concat(m," ").concat(w,"."):(y.days.amount.textContent=(p.zeroPad&&i.toString().length<2?"0":"")+i,y.days.word.textContent=t,y.hours.amount.textContent=(p.zeroPad&&l.toString().length<2?"0":"")+l,y.hours.word.textContent=e,y.minutes.amount.textContent=(p.zeroPad&&u.toString().length<2?"0":"")+u,y.minutes.word.textContent=n,y.seconds.amount.textContent=(p.zeroPad&&m.toString().length<2?"0":"")+m,y.seconds.word.textContent=w)})(),o=window.setInterval(n,p.refresh)})}}(window),window.jQuery&&function(t,e){t.fn.simplyCountdown=function(t){return function(t,n){e(t,n)}(this.selector,t)}}(jQuery,simplyCountdown); --------------------------------------------------------------------------------