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>

根据你的问题，我认为这是你试图达到的目标。

首先定义伪类根

: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用于延迟循环或与其他事件侦听器一起使用来跳过。

如果我误解了这个问题，我道歉。写得很匆忙，没有漂亮的形象化，如果你分解的原则，你可以定制它。

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中输出数学计算结果，而不是秒表。

• • upd：**在你的评论之后，我决定做我上面写的事情。你可以玩值和数学，我添加了另一个解决方案的片段，它在输入的范围内改变进度条。（当然，在react上比在纯js上更容易）

一个一个二个一个一个一个三个一个一个一个一个一个四个一个