如何在CSS中建立一個圓形邊框，其中x%是紅色，其餘部分是白色，其中x是一個在JavaScript檔案中的狀態變數？
P粉482108310
2023-07-24 18:47:03
<p>我正在製作一個計時器應用程序，初始時有一個白色的環繞在計時器剩餘時間周圍。我希望將環繞計時器剩餘時間的環逐漸變為紅色，當計時器用盡時完全變為紅色。 </p>
<pre class="brush:php;toolbar:false;"><div className="countdown-timer">
<span>{remainingTime.hours}</span>
<span>:</span>
<span>{remainingTime.minutes}</span>
<span>:</span>
<span>{remainingTime.seconds}</span>
</div></pre>
<pre class="brush:php;toolbar:false;">.countdown-timer {
width: 400px;
height: 400px;
border: 6px solid white;
border-radius: 50%;
box-shadow: black;
font-family: "DM Sans";
font-size: 72px;
display: flex;
justify-content: center;
align-items: center;
margin-top: 10px;
margin-left: auto;
margin-right: auto;
}</pre>
<p>我嘗試了一個以同心圓的方式，但沒有得到我想要的效果。 </p><p>我想要的效果是：https://i.stack.imgur.com/AVOz3.png</p><p><br /></p>
<div> {remaining.Time.seconds > X.time?( <div className="countdown-timer"> <span>{remainingTime.hours}</span> <span>:</span> <span>{remainingTime.minutes}</span> <span>:</span> <span>{remainingTime.seconds}</span> </div>):( <div className="countdown-timer2"> <span>{remainingTime.hours}</span> <span>:</span> <span>{remainingTime.minutes}</span> <span>:</span> <span>{remainingTime.seconds}</span> </div> ) } </div>---------------------------CSS File------------------ ----------------------
.countdown-timer { width: 400px; height: 400px; border: 6px solid white; border-radius: 50%; box-shadow: black; font-family: "DM Sans"; font-size: 72px; display: flex; justify-content: center; align-items: center; margin-top: 10px; margin-left: auto; margin-right: auto; } .countdown-timer2 { width: 400px; height: 400px; border: 6px solid white; border-radius: 50%; box-shadow: black; border-color: red; font-family: "DM Sans"; font-size: 72px; display: flex; justify-content: center; align-items: center; margin-top: 10px; margin-left: auto; margin-right: auto; }其中，X.time是一個時間閾值，超過這個時間，環繞的環應該保持白色，而在小於這個時間時，它將變為紅色。