let timerSeconds = 10; // This value will be retrieved from a database
function StartCountDownTimer() {
let timerStart = new Date();
let css_seconds = `${timerSeconds}s`;
const css_root = document.querySelector(':root');
let cssVarBefore = '--timer-seconds BEFORE being set by JS: ' + getComputedStyle(css_root).getPropertyValue('--timer-seconds');
css_root.style.setProperty('--timer-seconds', css_seconds);
let cssVarAfter = '--timer-seconds AFTER being set by JS: ' + getComputedStyle(css_root).getPropertyValue('--timer-seconds');
document.querySelector('.progress-border').classList.add('progress-border-animation');
timerStart.setSeconds(timerStart.getSeconds() + timerSeconds);
timerStart = timerStart.getTime();
// Update the countdown every second
let x = setInterval(function() {
let now = new Date().getTime();
let distance = timerStart - now;
let seconds = Math.round(distance / 1000, 1000);
document.getElementById("seconds-remaining").innerHTML = seconds;
if (seconds < 1) {
clearInterval(x);
document.getElementById("seconds-remaining").innerHTML = "";
document.querySelector('.progress-border').classList.remove('progress-border-animation');
alert("This shows that the CSS variable has been changed but it doesn't affect the animation duration.\n\n" + cssVarBefore + '\n' + cssVarAfter);
}
}, 1000);
}* {
margin: 0;
padding: 0;
box-sizing: border-box;
/* The CSS variable is being tried to set dynamically from JavaScript */
--timer-seconds: 5s;
--box-size: 150px;
--border-width: 8px;
}
body {
margin: 3em;
}
container {
display: flex;
flex-direction: columns;
gap: 1em;
}
.secs {
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);
border: var(--border-width) solid #c05b20;
border-radius: calc(var(--border-width)*2);
box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
background: linear-gradient(#599646, #bfe2c3);
cursor: pointer;
}
.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-radius: calc(var(--border-width)*2);
}
.progress-border-animation {
border: var(--border-width) solid #365a2a;
animation: fill forwards linear;
animation-duration: var(--timer-seconds);
/* animation-duration: 10s; */ /* this line works */
}
@keyframes fill {
/* keyframes styling goes here */
}<!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>
<container>
<div>
<p><b>Click on the box to start the timer</b></p><br>
<div onclick="StartCountDownTimer()" class="count-down-timer">
<p class="secs" id="seconds-remaining"></p>
<div class="progress-border"></div>
</div>
</div>
<div>
<p><b>Need help:</b></p>
<p>The goal is to dynamically change the seconds value for the CSS animation duration. Although the CSS variable is set to 10 seconds, I want to alter it through JavaScript to a dynamic value like 60 seconds. However, my attempts have not been successful so far.
</p>
</div>
</container>
</body>
</html>I am exploring ways to modify the seconds value for a CSS animation duration dynamically. Currently, the value is statically assigned as 20s in the CSS class. From JavaScript, I aim to change this value to something dynamic, e.g., 60s. As I need an integer type in JavaScript for other computations, there might be conflicts with using different data types between integers and seconds. Suggestions are welcome to address this challenge...
- Tried changing the CSS integer variable --sec: 20 from JS, then utilizing calc(0s + var(--sec)) for the animation duration.
- Attempted to modify the CSS seconds variable --sec: 20s from JS by concatenating (60 + 's') and using var(--sec) for the animation duration.
- Tested modifying the animationDuration value of document.getElementsByClassName('class')[0].style from JS by concatenating (60 + 's')
Any insights or advice would be greatly appreciated...