如何动态更改 CSS 秒值答案

【问题标题】：How to dynamically change a CSS seconds value如何动态更改 CSS 秒值
【发布时间】：2022-11-21 15:15:16
【问题描述】：

var timerSeconds = 10;
// Here is where I want to set the CSS --timer-seconds variable to the JS timerSeconds variable in the line above this will be based on a value from a database

var timerStart = new Date();
timerStart.setSeconds(timerStart.getSeconds() + timerSeconds);
timerStart = timerStart.getTime();

var x = setInterval(function() {
  var now = new Date().getTime();
  var distance = timerStart - now;
  var seconds = Math.round(distance / 1000, 1000);
  document.getElementById("seconds-remaining").innerHTML = seconds;
  if (seconds < 1) {
    clearInterval(x);
    document.getElementById("seconds-remaining").innerHTML = "";
  }
}, 1000);

* {
margin: 0;
padding: 0;
box-sizing: border-box;

  --timer-seconds: 10s;  /* I want to be able to set this variable dynamically from Javascript */
  --box-size: 150px;
  --border-width: 8px;
}

body {
  margin: 3em;  
}

.std-border {
  border: var(--border-width) solid #c05b20;
  border-radius: calc(var(--border-width)*2);
  box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
}

p {
  color: #365a2a;
  font-size: 72px;
  font-weight: bold;
  text-shadow: 3px 3px 3px rgba(0, 0, 0, 0.5);
}

.count-down-timer{
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  justify-content: center;
  width: var(--box-size);
  height: var(--box-size);
  background: linear-gradient(#599646, #bfe2c3);
}

.progress-border {
  position: absolute;
  top: calc(var(--border-width)*-1);
  left: calc(var(--border-width)*-1);
  width: var(--box-size);
  height: var(--box-size);
  border: var(--border-width) solid #365a2a;
  border-radius: calc(var(--border-width)*2);
  animation: fill forwards linear var(--timer-seconds);
}

@keyframes fill {
  0% {
clip-path: polygon(50% -20.71%, 50% 50%, 50% 0%, 50% 0%, 50% 0%, 50% 0%, 50% 0%);
  }
  12.5% {
clip-path: polygon(50% -20.71%, 50% 50%, 100% 0%, 100% 0%, 100% 0%, 100% 0%, 100% 0%);
  }
  25% {
clip-path: polygon(50% -20.71%, 50% 50%, 120.71% 50%, 120.71% 50%, 120.71% 50%, 120.71% 50%, 100% 0%);
  }
  37.5% {
clip-path: polygon(50% -20.71%, 50% 50%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 0%);
  }
  50% {
clip-path: polygon(50% -20.71%, 50% 50%, 50% 120.71%, 50% 120.71%, 50% 120.71%, 100% 100%, 100% 0%);
  }
  62.5% {
clip-path: polygon(50% -20.71%, 50% 50%, 0% 100%, 0% 100%, 0% 100%, 100% 100%, 100% 0%);
  }
  75% {
clip-path: polygon(50% -20.71%, 50% 50%, -20.71% 50%, -20.71% 50%, 0% 100%, 100% 100%, 100% 0%);
  }
  87.5% {
clip-path: polygon(50% -20.71%, 50% 50%, 0% 0%, 0% 0%, 0% 100%, 100% 100%, 100% 0%);
  }
  100% {
clip-path: polygon(50% -20.71%, 50% 50%, 50% -20.71%, 0% 0%, 0% 100%, 100% 100%, 100% 0%);
visibility: hidden;
  }
}

<!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">
    <title>Progress Bar</title>
  </head>
  <body>
    <div class="count-down-timer std-border">
      <p id="seconds-remaining"></p>
      <div class="progress-border"></div>
    </div>  
  </body>
</html>

试图找出如何动态更改 CSS 动画持续时间的秒值。我把类中的值静态设置为20s。从 JavaScript 我希望能够将 20s 更改为某个动态值，例如60 年代。我正在使用 JS 中的值进行其他迭代，所以我需要它是 JS 中的整数。我认为我遇到的问题是使用不同的数据类型整数与秒，但我不确定。

我尝试了几种不同的方法，但都没有奏效：

从 JS 更改 CSS 整型变量 --sec: 20，然后使用 calc(0s + var(--sec)) 计算动画持续时间。
通过连接 (60 + 's') 并使用 var(--sec) 作为动画持续时间，从 JS 更改 CSS 秒变量 --sec: 20s。
通过连接 (60 + 's') 从 JS 修改 document.getElementsByClassName('class')[0].style.animationDuration 值
我们欢迎所有的建议...

【问题讨论】：

请发布实际 CSS 和实际代码的 sn-ps。什么没有发生，持续时间没有改变，或者持续时间正在消失，或者下一次动画预期它根本没有发生？
我从我的文件中提取了代码，并尽可能地使它成为基本的。我在代码中添加了两个 cmet，一个在 JS 中，一个在 CSS 中，记录了我要完成的任务。

标签： javascript html css css-animations

【解决方案1】：

您还可以在 CSS 中将 ms 设置为 animation-duration 的值。

More about animation-duration

这是一个过于简化的示例，它通过更改动画元素上的变量--duration将ms中的值设置为animation-duration。

还有很多其他方法，但这似乎是直截了当的。

希望这会有所帮助。

const figure = document.querySelector("figure");
const btns = document.querySelectorAll("button");

btns.forEach((btn) =>
  btn.addEventListener("click", (e) =>
    figure.style.setProperty("--duration", e.target.dataset.duration)
  )
)

*,
*::after,
*::before {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

section {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
  align-items: center;
  width: 500px;
  padding: 6px;
}

.control {
  display: flex;
  width: 100%;
  justify-content: center;
  align-items: center;
  gap: 3px;
}

button {
  flex: 1;
  padding: 3px;
}

.animation {
  display: flex;
  align-items: center;
  width: 500px;
  height: 150px;
  background-color: #fdf5e6;
}

figure {
  width: 100px;
  height: 100px;
  background-color: #1e90ff;
  border-radius: 50%;
  animation: move alternate infinite linear;
  animation-duration: var(--duration, 1200ms);
}

@keyframes move {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(400px);
  }
}

<section>
  <div class="control">
    <button data-duration="1200ms">Defalut</button>
    <button data-duration="700ms">Fast</button>
    <button data-duration="300ms">Faster</button>
  </div>
  <div class="animation">
    <figure></figure>
  </div>
</section>

【讨论】：

感谢约翰的快速回复。我想做的是以你的例子为例，并有一个输入字段，你可以在其中输入秒数。然后将该数字添加到当前动画持续时间。您的示例有三个静态选项可供选择。我遇到的问题是将整数添加到具有 sec 或 ms 后缀的值。我试过了 --- animation-duration: calc(val(--input-ms)+ "ms") --- 但这似乎对我不起作用？