0
182
ViewsFormato visual CSS de cuenta regresiva
Estoy tratando de hacer coincidir el formato en la imagen de abajo. 
Aquí está el código que tengo ahora: https://codepen.io/Brite1/pen/wvPrggj (parece que solo necesito agregar espacios y centrar todos los números/texto). No estoy seguro de cómo agregar espacios y cómo centrar todo el texto y los números correctamente. ¡Por favor ayuda, gracias!
body { align-items: center; background-color: transparent; display: flex; } .container { color: transparent; margin: 0 auto; text-align: center; } .circle-time{ color: #FE7030; font-size: 60px; font-family: "Roboto Slab", Helvetica, Arial, sans-serif; font-weight: bold; text-align: center; } .timer-font{ font-family: "Roboto Slab", Helvetica, Arial, sans-serif; font-weight: bold; color: #027B46; font-size: 25px; }
·
Juan Pablo Isaza
2 answers
Answer question0
Puede usar un contenedor flexible y configurar los elementos para que tengan el mismo tamaño con flex: 1 0 150px , que dice flex-grow: 1 , flex-shrink: 0 , flex-basis: 150px . Puedes usar el ancho de tu gusto, pero te harás una idea.
function getNextDayOfWeek(date, dayOfWeek, hour) { var resultDate = new Date(date.getTime()); resultDate.setDate(date.getDate() + (7 + dayOfWeek - date.getDay()) % 7); resultDate.setHours(hour, 0, 0, 0); return resultDate; } var countDownDate = getNextDayOfWeek(new Date(), 5, 15); // Update the count down every 1 second var x = setInterval(function() { // Get todays date and time var now = new Date().getTime(); // Find the distance between now an the count down date var distance = countDownDate - now; // Time calculations for days, hours, minutes and seconds var days = Math.floor(distance / (1000 * 60 * 60 * 24)).toString(); var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)).toString(); var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60)).toString(); var seconds = Math.floor((distance % (1000 * 60)) / 1000).toString(); // Display the result in the element with id="timer" document.getElementById("circle-days").innerHTML = days + "<div class='timer-font'>Days</div>"; document.getElementById("circle-hours").innerHTML = hours + "<div class='timer-font'>Hours</div>"; document.getElementById("circle-minutes").innerHTML = minutes + "<div class='timer-font'>Minutes</div>"; document.getElementById("circle-seconds").innerHTML = seconds + "<div class='timer-font'>Seconds</div>"; // If the count down is finished, write some text if (distance < 0) { clearInterval(x); document.getElementById("timer").innerHTML = "Drawing Winners..."; } }, 1000); body { align-items: center; background-color: transparent; display: flex; } .flex-wrapper { display: flex; min-width: 600px; } .flex-wrapper>span { flex: 1 0 150px; } .container { color: transparent; margin: 0 auto; text-align: center; } .circle-time { color: #FE7030; font-size: 60px; font-family: "Roboto Slab", Helvetica, Arial, sans-serif; font-weight: bold; text-align: center; } .timer-font { font-family: "Roboto Slab", Helvetica, Arial, sans-serif; font-weight: bold; color: #027B46; font-size: 25px; } <div class="flex-wrapper"> <span id="circle-days" class="circle-time">00</span> <span id="circle-hours" class="circle-time">00</span> <span id="circle-minutes" class="circle-time">00</span> <span id="circle-seconds" class="circle-time">00</span> <span id="timer"></span> </div>Ver ejemplo en vivo aquí .
·
Juan Pablo Isaza
Report
0
Use un envoltorio y retire la flexión del cuerpo. Después de eliminar la propiedad flex del cuerpo, agréguela en el envoltorio y luego use la alineación de texto para centrar el texto.
function getNextDayOfWeek(date, dayOfWeek, hour) { var resultDate = new Date(date.getTime()); resultDate.setDate(date.getDate() + (7 + dayOfWeek - date.getDay()) % 7); resultDate.setHours(hour, 0, 0, 0); return resultDate; } var countDownDate = getNextDayOfWeek(new Date(), 5, 15); // Update the count down every 1 second var x = setInterval(function() { // Get todays date and time var now = new Date().getTime(); // Find the distance between now an the count down date var distance = countDownDate - now; // Time calculations for days, hours, minutes and seconds var days = Math.floor(distance / (1000 * 60 * 60 * 24)).toString(); var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)).toString(); var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60)).toString(); var seconds = Math.floor((distance % (1000 * 60)) / 1000).toString(); // Display the result in the element with id="timer" document.getElementById("circle-days").innerHTML = days + "<div class='timer-font'>Days</div>"; document.getElementById("circle-hours").innerHTML = hours + "<div class='timer-font'>Hours</div>"; document.getElementById("circle-minutes").innerHTML = minutes + "<div class='timer-font'>Minutes</div>"; document.getElementById("circle-seconds").innerHTML = seconds + "<div class='timer-font'>Seconds</div>"; // If the count down is finished, write some text if (distance < 0) { clearInterval(x); document.getElementById("timer").innerHTML = "Drawing Winners..."; } }, 1000); * { margin: 0; padding: 0; width: 100%; } body { background-color: transparent; } .wrapper { display: flex; gap: 10%; align-items: center; justify-content: center; } .container { color: transparent; margin: 0 auto; text-align: center; } .circle-time { color: #FE7030; font-size: 60px; font-family: "Roboto Slab", Helvetica, Arial, sans-serif; font-weight: bold; text-align: center; } .timer-font { font-family: "Roboto Slab", Helvetica, Arial, sans-serif; font-weight: bold; color: #027B46; font-size: 25px; } span { text-align: center; } <div class="wrapper"> <span style="margin-right: 20px;"> <span id="circle-days" class="circle-time"></span> </span> <span style="margin-right: 20px;"> <span id="circle-hours" class="circle-time"></span> </span> <span style="margin-right: 20px;"> <span id="circle-minutes" class="circle-time"></span> </span> <span id="circle-seconds" class="circle-time"></span> <span id="timer"></span> </div>
·
Juan Pablo Isaza
Report
Answer question