使用 JavaScript 更改内容后防止 HTML 元素移动
[英]Prevent HTML elements from moving after changing content with JavaScript
问题描述
'use strict'; const countdown = () => { // function to calcute time until launch in Days/Hours/Minutes/Seconds // time difference const countDate = new Date('May 25, 2024 00:00:00').getTime(); const now = new Date().getTime(); const gap = countDate - now; const second = 1000; const minute = second * 60; const hour = minute * 60; const day = hour * 24; const textDay = Math.floor(gap / day); const textHour = Math.floor((gap % day) / hour); const textMinute = Math.floor((gap % hour) / minute); const textSecond = Math.floor((gap % minute) / second); // update time in HTML document.querySelector('.day').innerText = textDay; document.querySelector('.hour').innerText = textHour; document.querySelector('.minute').innerText = textMinute; document.querySelector('.second').innerText = textSecond; }; // runs function every second setInterval(countdown, 1000);
* { padding: 0; margin: 0; box-sizing: border-box; } html { font-size: 62.5%; font-family: 'Rubik', sans-serif; color: #f8f9fa; } .countdown-container { color: #343a40; min-height: 100vh; display: flex; flex-direction: column; align-items: center; background-image: linear-gradient( rgba(34, 34, 34, 0.1), rgba(34, 34, 34, 0.1) ), url(./img/countdown.jpg); background-size: cover; } .countdown-container h2 { letter-spacing: 0.1rem; font-size: 10rem; font-weight: 700; padding: 5rem; padding-bottom: 8vh; } .countdown { display: flex; text-align: center; justify-content: space-around; } .day, .hour, .minute, .second { font-size: 5rem; }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="preconnect" href="https://fonts.googleapis.com" /> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /> <link href="https://fonts.googleapis.com/css2?family=Rubik:wght@400;600;700&display=swap" rel="stylesheet" /> <link rel="stylesheet" href="style.css"> <title>Test</title> </head> <body> <section class="countdown-container"> <div> <h2 class="countdown-header">Time until Launch</h2> <div class="countdown"> <div class="container-day"> <h3 class="day">Time</h3> <h3>Days</h3> </div> <div class="container-hour"> <h3 class="hour">Time</h3> <h3>Hours</h3> </div> <div class="container-minute"> <h3 class="minute">Time</h3> <h3>Minutes</h3> </div> <div class="container-second"> <h3 class="second">Time</h3> <h3>Seconds</h3> </div> </div> </div> </section> <script src="./app.js"></script> </body> </html>
Hi,
你好，
i built a countdown timer, but every time the numbers are updated the elements move a little bit.我构建了一个倒数计时器，但每次更新数字时，元素都会移动一点。 How can i prevent this?我怎样才能防止这种情况？ I added the code, in the code snippet you can see the problem...我添加了代码，在代码片段中您可以看到问题...
(Random text, i cannot post without adding more text... Lorem, ipsum dolor sit amet consectetur adipisicing elit. Porro qui inventore ad fugit ea non harum est quas deserunt quia!) （随机文本，我无法在不添加更多文本的情况下发布... Lorem，ipsum dolor 坐在 amet consectetur adipisicing elit。Porro quiinvente ad fugit ea non harum est quas deserunt quia！）
Thanks :)谢谢 ：）
1 个解决方案
解决方案1
1 已采纳 2021-10-15 17:38:40
What causes this is justify-content: space-around;导致这种情况的原因是justify-content: space-around; in .countdown .在.countdown 。 Since the div holding the seconds (and all others) don't have a defined width, the width of the containing div changes as the width of the text changes when using a variable-width font.由于保存秒（和所有其他）的 div 没有定义的宽度，当使用可变宽度字体时，包含 div 的宽度会随着文本宽度的变化而变化。 Then justify-content: space-around;然后justify-content: space-around; dutifully adjusts the row to make sure everything is evenly spaced.尽职地调整行以确保所有内容均等间隔。
You could also try a monospace font to help with this if your design goals will tolerate that.如果您的设计目标可以容忍，您也可以尝试使用等宽字体来帮助解决此问题。
I added a width to all of the time segments to prevent this.我为所有时间段添加了一个宽度以防止这种情况。
div.countdown>div {
width: 40px;
}
I used a fixed 40px width which may not be exactly what works for you.我使用了固定的 40px 宽度，这可能不适合您。 I tried it with 25% width as well which works but the seconds still move a bit.我也尝试了 25% 的宽度，这也有效，但秒数仍然移动了一点。
'use strict'; const countdown = () => { // function to calcute time until launch in Days/Hours/Minutes/Seconds // time difference const countDate = new Date('May 25, 2024 00:00:00').getTime(); const now = new Date().getTime(); const gap = countDate - now; const second = 1000; const minute = second * 60; const hour = minute * 60; const day = hour * 24; const textDay = Math.floor(gap / day); const textHour = Math.floor((gap % day) / hour); const textMinute = Math.floor((gap % hour) / minute); const textSecond = Math.floor((gap % minute) / second); // update time in HTML document.querySelector('.day').innerText = textDay; document.querySelector('.hour').innerText = textHour; document.querySelector('.minute').innerText = textMinute; document.querySelector('.second').innerText = textSecond; }; // runs function every second setInterval(countdown, 1000);
* { padding: 0; margin: 0; box-sizing: border-box; } html { font-size: 62.5%; font-family: 'Rubik', sans-serif; color: #f8f9fa; } .countdown-container { color: #343a40; min-height: 100vh; display: flex; flex-direction: column; align-items: center; background-image: linear-gradient( rgba(34, 34, 34, 0.1), rgba(34, 34, 34, 0.1) ), url(./img/countdown.jpg); background-size: cover; } .countdown-container h2 { letter-spacing: 0.1rem; font-size: 10rem; font-weight: 700; padding: 5rem; padding-bottom: 8vh; } .countdown { display: flex; text-align: center; justify-content: space-around; } .day, .hour, .minute, .second { font-size: 5rem; } div.countdown>div { width: 40px; }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="preconnect" href="https://fonts.googleapis.com" /> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /> <link href="https://fonts.googleapis.com/css2?family=Rubik:wght@400;600;700&display=swap" rel="stylesheet" /> <link rel="stylesheet" href="style.css"> <title>Test</title> </head> <body> <section class="countdown-container"> <div> <h2 class="countdown-header">Time until Launch</h2> <div class="countdown"> <div class="container-day"> <h3 class="day">Time</h3> <h3>Days</h3> </div> <div class="container-hour"> <h3 class="hour">Time</h3> <h3>Hours</h3> </div> <div class="container-minute"> <h3 class="minute">Time</h3> <h3>Minutes</h3> </div> <div class="container-second"> <h3 class="second">Time</h3> <h3>Seconds</h3> </div> </div> </div> </section> <script src="./app.js"></script> </body> </html>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.