如何防止 Jquery 倒计时时钟随着时间的推移而移动？答案

【问题标题】：How do I prevent a Jquery countdown clock from moving as the time goes down?如何防止 Jquery 倒计时时钟随着时间的推移而移动？
【发布时间】：2022-11-12 04:35:05
【问题描述】：

我在使用名为 loopcounter.js 的倒计时时钟时遇到了问题。它是中心对齐的。然而，随着时间的推移，文字会轻微移动。

我尝试为 p 标签设置最大宽度并设置边距：0 auto，但是我遇到了同样的问题。

    $(function(){
        loopcounter('myCountdown');
    });

body {
  background:#000000
}
.messaging {
  font-family:'Montserrat',sans-serif;
  text-align:center;
  color:#ffffff;
  font-weight:600;
  font-size:20px;
  line-height:25px;
}

.myCountdown {
  background:green;
  padding:10px;
  border-radius:10px;
}

<html>
  <head>
        <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    <style>



    </style>
  </head>
  <body>
    <p class="messaging">Album Drops in  <span class="countdown-wrap"><span class="myCountdown" data-date="2023-11-26 23:59:59">
                            <span class="counter-hours"></span> : <span class="counter-minutes"></span> : <span class="counter-seconds"></span>
                        </span></span></p>

    <script
  src="https://code.jquery.com/jquery-3.6.1.slim.min.js"
  integrity="sha256-w8CvhFs7iHNVUtnSP0YKEg00p9Ih13rlL9zGqvLdePA="
  crossorigin="anonymous"></script>
   <script src="https://www.jqueryscript.net/demo/countdown-date-loop-counter/js/loopcounter.js"></script>  
  </body>
 </html>

【问题讨论】：

标签： html jquery css

【解决方案1】：

您可能需要为.myCountdown 设置固定宽度，方法是将其设为inline-block 并使用min-width 而不是max-width。稍后如果您还想修复里面的文本柜台营业时间,反分钟和反秒，您也可以使用相同的解决方案将它们设为inline-block：

    $(function(){
        loopcounter('myCountdown');
    });

body {
  background:#000000
}
.messaging {
  font-family:'Montserrat',sans-serif;
  text-align:center;
  color:#ffffff;
  font-weight:600;
  font-size:20px;
  line-height:25px;
}

.myCountdown {
  display:inline-block;
  min-width:180px;
  background:green;
  padding:10px;
  border-radius:10px;
}

<html>
  <head>
        <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    <style>



    </style>
  </head>
  <body>
    <p class="messaging">Album Drops in  <span class="countdown-wrap"><span class="myCountdown" data-date="2023-11-26 23:59:59">
                            <span class="counter-hours"></span> : <span class="counter-minutes"></span> : <span class="counter-seconds"></span>
                        </span></span></p>

    <script
  src="https://code.jquery.com/jquery-3.6.1.slim.min.js"
  integrity="sha256-w8CvhFs7iHNVUtnSP0YKEg00p9Ih13rlL9zGqvLdePA="
  crossorigin="anonymous"></script>
   <script src="https://www.jqueryscript.net/demo/countdown-date-loop-counter/js/loopcounter.js"></script>  
  </body>
 </html>

【讨论】：