Question

我有以下CSS动画模仿加载栏并持续59秒，然后重置。我也是从javascript的日期模块中实时提取的。

如何将动画链接到模块，以便例如第二个计数为48时，动画完成48/60。

所以我想联系第二个＆＃34;在JS to＆＃34; width＆＃34;在动画中。

CSS

    .square {
            width: 30px;
            height: 3px;
            background: red;
            position: relative;
            animation: colors 59s;
            -webkit-animation: colors 59s;
            animation-iteration-count: infinite;
            -webkit-animation-iteration-count: infinite;
            top: 0px;
            margin-left:-30px;
            }

        @keyframes colors {
            0% {width: 30px;}
            99% {width: 100%} 
        }

        @-webkit-keyframes colors {
            0% {width: 30px;}
            99% {width: 100%} 


}

JS

function currentTime() {
    var today = new Date();
    console.log(today);
    hour = today.getHours();
    minute = today.getMinutes();
    second = today.getSeconds();
    minute = formatTime(minute);
    second = formatTime(second);

    text.innerHTML = hour + "." + minute + "." + second;
    console.log(minute);

}

Answer 1

您可以使用Jquery UI创建一个进度条，并在重新启动之前运行一个延迟x miliseconds的循环。

链接：http://jqueryui.com/progressbar/

或者通过各种方式了解一下：how to use jquery ui progress bar?

我如何将CSS动画链接到javascript日期对象

1 个答案: