如何创建一个方形框，其中框的边框将根据框上给定的值填充颜色？

Question

就像上面的图片或实现此设计的想法或参考，我感谢社区提供的帮助或建议谢谢

我得到了进度条的参考，它是圆形的但找不到解决它的方法。

Answer 1

 const boxes = document.querySelectorAll(".box"); const colors = ['red', 'blue', 'green', 'yellow', 'orange', 'violet'] boxes.forEach((box) => { const insideContent = box.innerText; box.style.border = `6px solid ${colors[insideContent]}` })

 #app { display: flex; }.box { width: 50px; height: 50px; margin: 10px; background-color: cyan; display: flex; justify-content: center; align-items: center; }

 <div id="app"> <div class="box">1</div> <div class="box">2</div> <div class="box">3</div> </div>

根据您的问题，我认为这就是您要实现的目标。

Answer 2

首先定义一个伪类根

:root {
  --color-val: blue;
}

注意：为了使用--color-val你需要在 CSS 中将它写成color: var(--color-var)

---

其次使用 JavaScript 更新变量--color-val

let colors = 
    
var root = document.querySelector(':root');

const delay = ms => new Promise(res => setTimeout(res, ms));

const colorChange = async () => {
  await delay(1000);
  color = colors[Math.floor(Math.random() * colors.length)]
  console.log(color)
  root.style.setProperty('--color-val', color);
};

colorChange()

笔记：

• 添加您要从中选择的颜色列表或转到CodePen以获取 1000 多个十六进制代码的列表。
• Promise 用于异步函数，可以通过将 setTimeOut 用于延迟循环或与另一个事件侦听器一起使用来跳过。

Answer 3

如果我误解了这个问题，我深表歉意。 写的匆忙，没有精美的可视化，如果拆解原理，可以自定义。

 h1 { display: block; margin:0 auto; text-align: center; padding-top:20%; }.container { display:flex; width: 150px; height: 150px; border: 1px solid black; z-index: 110; margin:0; margin: -10px; }.top { display:block; background-color: green; height: 24px; width: 150px; /* gorizontal top */ animation: top 1s linear; animation-fill-mode: forwards; } @keyframes top { 0% { width: 0px; } 100% { width: 150px; } }.right { background-color: green; height: 0%;/* right */ width: 32px; animation: right 1s linear; animation-fill-mode: forwards; animation-delay: 1s; z-index: 10; } @keyframes right { 0% { height: 0%; } 100% { height: 100%; } }.box { position: fixed; top: 32.5px; left: 32.5px; width: 100px; height: 100px; border: 1px solid black; margin: auto; z-index: 120; margin: -10px -10px; }.bottom { position: absolute; top: 123px; left: 150px; background-color: green; width: 0px; height: 27px; z-index: 10; animation: bottom 1s linear; animation-fill-mode: forwards; animation-delay: 2s; /* animation-direction: reverse; */ } @keyframes bottom { 0% { transform: translate(0,0); } 100% { transform: translate(-250px,0); -webkit-transform: translate(-250px,0); /** Safari & Chrome **/ -o-transform: translate(-250px,0); /** Opera **/ -moz-transform: translate(-250px,0); /** Firefox **/ width: 250px; } }.left { position: absolute; top: 122px; background-color: green; width: 25px; height: 0px; animation: left 1s linear; animation-fill-mode: forwards; animation-delay: 3s; } @keyframes left { 0% { transform: translate(0,0); } 100% { transform: translate(0,-250px); -webkit-transform: translate(0,-250px); /** Safari & Chrome **/ -o-transform: translate(0,-250px); /** Opera **/ -moz-transform: translate(0,-250px); /** Firefox **/ height: 277px; } }

 <div class='head'> <div class='container'> <div class='top'></div> <div class='box'> <h1 id='timer'> 1 </h1> </div> <div class='right'></div> <div class='bottom'></div> <div class='left'></div> </div> </div> <script type="text/javascript"> init() function init() { sec = 0; setInterval(tick, 1000); } function tick() { if (sec<3) { sec++ document.getElementById("timer"). childNodes[0].nodeValue = sec; } else { clearInterval(0); } } </script>

此外，除了 SetInterval 脚本之外，您还可以从块的宽度和高度样式中获取值，并在 h1 中输出数学计算而不是秒表。