Использование Javascript для преобразования значения в значение CSS ключевого кадра [закрыто] ⇐ CSS

[Anonymous]

Редактировать: вставил весь код, он есть в боте mixitup. Не обращайте внимания на гибкую коробку, потому что я испортил выравнивание. Пытаемся сместить другие ключевые кадры, и, возможно, мы сможем использовать их в качестве родительской ссылки? Извините, я новичок в JS, поэтому запутался.
labelDisplay должно отображать 42/50 подписчиков. Нам нужно взять это значение и сократить его до 42, а затем использовать его для вычисления процента в виде десятичной дроби, чтобы определить значение для установки Stroke-Dashoffset для моих ключевых кадров. анимация.
Я разбираюсь в HTML и CSS, но JS меня смущает.
var labels = document.getElementById("labels");

var displaySettings = "{DisplaySetting}";
var displayRotationSeconds = {DisplayRotationSeconds};
var displayRotationIndex = 0;

function addLabelDisplay(type, format)
{
let labelDisplayTemplate = document.getElementById("labeldisplay");
const labelDisplay = labelDisplayTemplate.content.cloneNode(true);
const labelText = labelDisplay.querySelector(".text");
labelText.id = type;
labelText.innerHTML = format;
labelText.style.visibility = 'hidden';
labels.appendChild(labelDisplay);
}

function rotateLabelDisplay()
{
if (displayRotationIndex >= labels.children.length)
{
displayRotationIndex = 0;
}

for (const labelDisplay of labels.children) {
labelDisplay.style.visibility = 'hidden';
}

let label = labels.children[displayRotationIndex];
label.style.visibility = 'visible';

displayRotationIndex++;

setTimeout(() => { rotateLabelDisplay(); }, (displayRotationSeconds * 1000));
}

function update(data)
{
let typeElement = document.getElementById(data.Type);
if (typeElement != null) {
typeElement.innerHTML = data.Format;

if (displaySettings == "NewestOnly")
{
for (const labelDisplay of labels.children) {
labelDisplay.style.visibility = 'hidden';
}
typeElement.style.visibility = 'visible';
}
}
}

{LabelAdds}

if (displaySettings == "RotatingDisplays")
{
rotateLabelDisplay();
}
else
{
labels.children[0].style.visibility = "visible";
}

document.getElementById('labelDisplay')
then(response => response.text())
.then(data => {
const SubGoal = 50; // Example goal amount
const SubCount = data.replace(/\/50/g, ''); // Replace with your fetch request value
const SubCountNo = parseFloat(SubCount);
const SubPercent = (SubCountNo / SubGoal);
const SubPercentStroke = (450 - 450) * SubPercent;
document.getElementById('circle').style.strokeDashoffset= SubPercentStroke;
})



.maindiv {
height: 200px;
width: 200px;
margin: 0px;
padding 0;
z-index: {Layer};

}

.contentdiv {
position: absolute;
margin: 0px;
padding: 0px;
left: {XPosition}{PositionTypeUnit};
top: {YPosition}{PositionTypeUnit};
transform: translate({XTranslation}%, {YTranslation}%);
width: 300px;
height: 300px;
display: flex;
box-sizing: border-box;
align-self: center;
justify-content: center;

}

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

body{
background-color: white;
height: 300px;
width: 300px;
align-items: center;
justify-content: center;
display: flex;

}

.title {
position: relative;
display: flex;
font-family: Montserrat;
font-size: 24px;
font-weight: 800;
color: white;
background-color: #d594e8;
border-radius: 35px;
text-align: center;
width: 140px;
align-self: center;
justify-content: center;
flex-direction: column;
}

.skill {
width: 160px;
height: 160px;
position: absolute;

}

.outer{
height: 160px;
width: 160px;
padding: 20px;

border-radius: 50%;
border-width: 10px;
border-color: #FFFFFF;
}

.inner {
height: 120px;
width: 120px;

border-radius: 50%;
align-items: center;
justify-content: center;
border-color: #FFFFFF;
border-width: 10px;
display: flex;
align-items: center;
justify-content: center;
}
.labelDisplay
{

font-weight: 800;
color: #FFFFFF;
font-size: 24px;
font-family: Montserrat;
position: relative;
align-items: center;
justify-self: center;
display: flex;
}

.text {

font-weight: 800;
color: #FFFFFF;
font-size: 24px;
font-family: Montserrat;
text-align: center;
background-color: #d594e8;
border-radius: 25px;
width: 120%;
align-items: center;
justify-content: center;
display: flex;

}

#number {
font-weight: 800;
color: #FFFFFF;
font-size: 24px;
font-family: Montserrat;
text-align: center;
background-color: #d594e8;
border-radius: 25px;
width: 80%;

}

circle {
fill: none;
stroke: #f4c2c2;
stroke-width: 20px;
stroke-dasharray: 450;
stroke-dashoffset: 450;
animation: anim 2s linear forwards;
}

@keyframes anim{
100%{
stroke-dashoffset: 72.5;
}
}'

svg {
position: absolute;
top: 0;
left: 0;

}



Подробнее здесь: https://stackoverflow.com/questions/790 ... -css-value