Solo usuarios registrados pueden comentar y agradecer, Logueate o Registrate

Autor Topic: Colocar conteo regresivo a un intro  (Visto 1329 veces)

0 Miembros and 1 Guest are viewing this topic.

Offline punkxista Posteado: September 11, 2018, 10:17:43 PM | Modificado: September 12, 2018, 12:24:21 AM by Cloud

  • 0 puntos por ventas
  • *
  • Rank: Dedicado
  • Posts: 54
  • Gracias recibida: 12
  • pe
Amigos buen dia disculpen, me gustaria que me ayuden , quiero  bomba bombacolocarle un conteo regresivo a mi intro y no se como hacerlo porfavor alguien me puede ayudar se lo agradeceria mucho por favor


Offline Hessen #1 Posteado: September 11, 2018, 11:23:52 PM | Modificado: September 11, 2018, 11:27:49 PM by Hessen

  • Diseñador
  • +1 puntos por ventas
  • *
  • Rank: Puto amo
  • Posts: 332
  • Gracias recibida: 5947
  • pe
Amigos buen dia disculpen, me gustaria que me ayuden , quiero  bomba bombacolocarle un conteo regresivo a mi intro y no se como hacerlo porfavor alguien me puede ayudar se lo agradeceria mucho por favor

Aqui te dejo 1 esta bonito jeje




Index.html
Code: [Select]
<div id="countdown">
  <div id='tiles'></div>
  <div class="labels">
    <li>Days</li>
    <li>Hours</li>
    <li>Mins</li>
    <li>Secs</li>
  </div>
</div>


CSS:
Code: [Select]
#countdown{
width: 465px;
height: 112px;
text-align: center;
background: #222;
background-image: -webkit-linear-gradient(top, #222, #333, #333, #222);
background-image:    -moz-linear-gradient(top, #222, #333, #333, #222);
background-image:     -ms-linear-gradient(top, #222, #333, #333, #222);
background-image:      -o-linear-gradient(top, #222, #333, #333, #222);
border: 1px solid #111;
border-radius: 5px;
box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.6);
margin: auto;
padding: 24px 0;
position: absolute;
  top: 0; bottom: 0; left: 0; right: 0;
}

#countdown:before{
content:"";
width: 8px;
height: 65px;
background: #444;
background-image: -webkit-linear-gradient(top, #555, #444, #444, #555);
background-image:    -moz-linear-gradient(top, #555, #444, #444, #555);
background-image:     -ms-linear-gradient(top, #555, #444, #444, #555);
background-image:      -o-linear-gradient(top, #555, #444, #444, #555);
border: 1px solid #111;
border-top-left-radius: 6px;
border-bottom-left-radius: 6px;
display: block;
position: absolute;
top: 48px; left: -10px;
}

#countdown:after{
content:"";
width: 8px;
height: 65px;
background: #444;
background-image: -webkit-linear-gradient(top, #555, #444, #444, #555);
background-image:    -moz-linear-gradient(top, #555, #444, #444, #555);
background-image:     -ms-linear-gradient(top, #555, #444, #444, #555);
background-image:      -o-linear-gradient(top, #555, #444, #444, #555);
border: 1px solid #111;
border-top-right-radius: 6px;
border-bottom-right-radius: 6px;
display: block;
position: absolute;
top: 48px; right: -10px;
}

#countdown #tiles{
position: relative;
z-index: 1;
}

#countdown #tiles > span{
width: 92px;
max-width: 92px;
font: bold 48px 'Droid Sans', Arial, sans-serif;
text-align: center;
color: #111;
background-color: #ddd;
background-image: -webkit-linear-gradient(top, #bbb, #eee);
background-image:    -moz-linear-gradient(top, #bbb, #eee);
background-image:     -ms-linear-gradient(top, #bbb, #eee);
background-image:      -o-linear-gradient(top, #bbb, #eee);
border-top: 1px solid #fff;
border-radius: 3px;
box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.7);
margin: 0 7px;
padding: 18px 0;
display: inline-block;
position: relative;
}

#countdown #tiles > span:before{
content:"";
width: 100%;
height: 13px;
background: #111;
display: block;
padding: 0 3px;
position: absolute;
top: 41%; left: -3px;
z-index: -1;
}

#countdown #tiles > span:after{
content:"";
width: 100%;
height: 1px;
background: #eee;
border-top: 1px solid #333;
display: block;
position: absolute;
top: 48%; left: 0;
}

#countdown .labels{
width: 100%;
height: 25px;
text-align: center;
position: absolute;
bottom: 8px;
}

#countdown .labels li{
width: 102px;
font: bold 15px 'Droid Sans', Arial, sans-serif;
color: #f47321;
text-shadow: 1px 1px 0px #000;
text-align: center;
text-transform: uppercase;
display: inline-block;
}


JS:
Code: [Select]
var target_date = new Date().getTime() + 1000 * 3600 * 48; // set the countdown date
var days, hours, minutes, seconds; // variables for time units

var countdown = document.getElementById("tiles"); // get tag element

getCountdown();

setInterval(function() {
  getCountdown();
}, 1000);

function getCountdown() {
  // find the amount of "seconds" between now and target
  var current_date = new Date().getTime();
  var seconds_left = (target_date - current_date) / 1000;

  days = pad(parseInt(seconds_left / 86400));
  seconds_left = seconds_left % 86400;

  hours = pad(parseInt(seconds_left / 3600));
  seconds_left = seconds_left % 3600;

  minutes = pad(parseInt(seconds_left / 60));
  seconds = pad(parseInt(seconds_left % 60));

  // format countdown string + set tag value
  countdown.innerHTML =
    "<span>" +
    days +
    "</span><span>" +
    hours +
    "</span><span>" +
    minutes +
    "</span><span>" +
    seconds +
    "</span>";
}

function pad(n) {
  return (n < 10 ? "0" : "") + n;
}

Gracias:


Offline punkxista #2 Posteado: September 11, 2018, 11:38:20 PM

  • 0 puntos por ventas
  • *
  • Rank: Dedicado
  • Posts: 54
  • Gracias recibida: 12
  • pe
wao gracias amigo pero no se como colocarlo en mi intro me puedes dar algo mas detallado porfavor yo lo publicaria en el foro para las personas que no sepan gracias amigo te corazón gracias
tengo que pegar los 3 ? en las diferentes archivos?


Offline Hessen #3 Posteado: September 11, 2018, 11:42:06 PM

  • Diseñador
  • +1 puntos por ventas
  • *
  • Rank: Puto amo
  • Posts: 332
  • Gracias recibida: 5947
  • pe
para ayudarte mejor mandame un mensaje privado MP tu teamviewer :)


Offline punkxista #4 Posteado: September 12, 2018, 12:23:18 AM

  • 0 puntos por ventas
  • *
  • Rank: Dedicado
  • Posts: 54
  • Gracias recibida: 12
  • pe
solucionado Gracias amigo Hessen


Solo usuarios registrados pueden comentar y agradecer, Logueate o Registrate


 

Related Topics

  Subject / Started by Replies Last post
9 Replies
6459 Views
Last post August 19, 2019, 09:20:06 PM
by DEPREDADOR
4 Replies
4710 Views
Last post September 10, 2019, 06:54:20 AM
by Dkdexter
6 Replies
1594 Views
Last post May 13, 2017, 01:23:13 PM
by jigokush
4 Replies
3305 Views
Last post August 07, 2018, 07:04:58 PM
by muarcontes
0 Replies
816 Views
Last post September 09, 2018, 10:53:10 PM
by punkxista