Javascript动画倒计时_Javascript_Css_Animation_Setinterval_Countdown

Javascript动画倒计时

javascript css animation

Javascript动画倒计时,javascript,css,animation,setinterval,countdown,Javascript,Css,Animation,Setinterval,Countdown,我一直在尝试创建一个倒计时，每当计数器改变时，它就会为文本设置动画。我可以在开始时执行更改，但不确定如何清除更改并重复它 HTML和CSS <!DOCTYPE html> <html> <head>  <style type="text/css"> p {

我一直在尝试创建一个倒计时，每当计数器改变时，它就会为文本设置动画。我可以在开始时执行更改，但不确定如何清除更改并重复它

HTML和CSS

<!DOCTYPE html>
<html>
<head>
    <!--meta http-equiv="refresh" content="4; url=index.php"-->
    <style type="text/css">
        p
        {
            transition: 1s;
            font-size: 100%;
        }
    </style>
</head>
<body>

<p>A script on this page starts this clock:</p>
<p id="demo">Login in....</p>

<script>

    //various javascript here

</script>
</body>
</html>

下一个脚本不会每次计数器都重置样式，而是在样式之间切换，这不是我想做的，但至少它会重复，不像第一个脚本。它只会影响样式，如果它起作用，我会添加计时器

    var myVar = setInterval(setStyle, 1000);

    function setStyle() {
      var x = document.getElementById("demo");
      x.style.fontSize = x.style.fontSize == "100%" ? "500%" : "100%";
    }

    function stopStyle() {
      clearInterval(myVar);
    }

我曾想过尝试使用“for”循环计数器的值，在值更改时更改样式，然后在更改后重置值，但我无法使其工作。从视觉上看，效果应该是这样的，但以相反的方式播放，而不是在acid->上播放。我从w3schools的网页上大量借用了关于setInterval和clearInterval的内容

不需要两个单独的间隔来使文本变大变小

相反，您可以使用CSS转换将

字体大小从小到大设置动画，并使用两个嵌套调用来正确计时，如下所示：

const counter=document.getElementById（'counter'）；
设值=11；
const intervalID=setInterval（（）=>{
const nextValue=--值；
如果（下一个值==-1）{
clearInterval（intervalID）；
返回；
}
requestAnimationFrame（（）=>{
//更新值并在下一帧中删除'big'类，以便
//文本再次变小：
counter.textContent=nextValue；
counter.classList.remove（'big'）；
requestAnimationFrame（（）=>{
//之后再多一帧（以便元素有时间重新渲染）
//使用较小的字体大小，再次添加'big'类：
counter.classList.add（'big'）；
});
});
}，1000）；
正文{
保证金：0；
显示器：flex；
高度：100vh；
证明内容：中心；
对齐项目：居中；
字体系列：monospace；
}
#柜台，大的{
字体大小：500%；
不透明度：0；
过渡：所有线性1；
}
10
不需要两个单独的间隔来使文本变大变小
相反，您可以使用CSS转换将字体大小从小到大设置动画，并使用两个嵌套调用来正确计时，如下所示：

const counter=document.getElementById（'counter'）；
设值=11；
const intervalID=setInterval（（）=>{
const nextValue=--值；
如果（下一个值==-1）{
clearInterval（intervalID）；
返回；
}
requestAnimationFrame（（）=>{
//更新值并在下一帧中删除'big'类，以便
//文本再次变小：
counter.textContent=nextValue；
counter.classList.remove（'big'）；
requestAnimationFrame（（）=>{
//之后再多一帧（以便元素有时间重新渲染）
//使用较小的字体大小，再次添加'big'类：
counter.classList.add（'big'）；
});
});
}，1000）；
正文{
保证金：0；
显示器：flex；
高度：100vh；
证明内容：中心；
对齐项目：居中；
字体系列：monospace；
}
#柜台，大的{
字体大小：500%；
不透明度：0；
过渡：所有线性1；
}
10
这是一个使用@keyframes实现相同目标的版本

。正在运行{
动画：growthandshow 1s线性无限；
}
@关键帧growthandshow{
0%,
100% {
字体大小：100%；
不透明度：1；
}
50% {
字体大小：500%；
不透明度：0；
}
}
此页面上的脚本启动此时钟：
登录
var计数器=4；
var元素=document.getElementById（“演示”）
var text=element.innerText；
element.innerText=文本+计数器；
var myVar=setInterval（运行计时器，1000）；
element.classList.toggle（'running'）；
函数runTimer（）{
element.innerText=文本+--计数器；
如果（counter这里有一个版本使用@keyframes来实现相同的目标

。正在运行{
动画：growthandshow 1s线性无限；
}
@关键帧growthandshow{
0%,
100% {
字体大小：100%；
不透明度：1；
}
50% {
字体大小：500%；
不透明度：0；
}
}
此页面上的脚本启动此时钟：
登录
var计数器=4；
var元素=document.getElementById（“演示”）
var text=element.innerText；
element.innerText=文本+计数器；
var myVar=setInterval（运行计时器，1000）；
element.classList.toggle（'running'）；
函数runTimer（）{
element.innerText=文本+--计数器；
如果（counter您可以使用另一个setInterval来执行此操作，它将每100ms减少10px的字体大小
我希望这会有所帮助



//ele is same as your demo element
var ele=document.getElementById('demo');
//function that reduces the size of text of ele by 10px every 100ms
function redSize(){
    var size=100;
    var small=setInterval(()=>{
    ele.style.fontSize=size+"px";size-=10;if(size==10) clearInterval(small); 
    },100)
}
function timer(count){
    var counter=count;
    var timer = setInterval(function(){
        if(counter== 0) 
        {
            clearInterval(timer);
        } 
        else 
        {
            ele.innerHTML=counter;
            redSize();
        }
        counter--;
    }, 1000);
}

timer(10);
您可以通过另一个设置间隔来实现这一点，该设置间隔将每100ms减少10px的字体大小
我希望这会有所帮助



//ele is same as your demo element
var ele=document.getElementById('demo');
//function that reduces the size of text of ele by 10px every 100ms
function redSize(){
    var size=100;
    var small=setInterval(()=>{
    ele.style.fontSize=size+"px";size-=10;if(size==10) clearInterval(small); 
    },100)
}
function timer(count){
    var counter=count;
    var timer = setInterval(function(){
        if(counter== 0) 
        {
            clearInterval(timer);
        } 
        else 
        {
            ele.innerHTML=counter;
            redSize();
        }
        counter--;
    }, 1000);
}

timer(10);
请将相关HTML和CSS添加到您的问题中，以便我们可以复制您的问题并提供工作结果。更新，对此表示抱歉。请将相关HTML和CSS添加到您的问题中，以便我们可以复制您的问题并提供工作结果。更新，对此表示抱歉。SD@123samueld很乐意帮忙！如果你能接受这个答案，那就太好了。你认为在添加“大”类的同时添加具有正常大小和不透明度的“小”类并删除它是否有效？因为atm向“大”类添加不透明度样式类几乎立即使文本不透明。此外，文本开始时非常大，在加载时应该正常开始。是的，您可以将其添加到CSS转换中。刚刚更新了示例。太棒了，非常感谢，您为我省去了文字上的麻烦。我已接受您的答案。SD:D@123samueld很乐意帮忙！如果你能接受，那就太好了答案是这样的。你认为在添加“大”类的同时添加具有正常大小和不透明度的“小”类并将其删除是否可行？因为atm向“大”类添加不透明度样式会使文本几乎立即不透明。此外，文本在加载时开始时应该是超大的