Question

所以我必须创建一个倒数计时器（对于销售，比如，这个产品在折扣时还剩24小时）用圆形条。我有以下HTML和CSS 在我的主题中实现：

else if(theme == 'watch-and-circular-bar') {
    var countdown_text = '<div id="countdown"><div id="countdown-number"><svg class="svgCircle"><circle class="circle" r="18" cx="20" cy="20"></circle></svg></div><span class="theme-watch days">'
        + days
        + '+'
        + day_string
        + '</span><span class="theme-watch hours">'
        + dig(hours,2)
        + '</span>'
        + '<span class="theme-watch">'
        + dig(minutes,2)
        + '</span><span class="theme-watch">'
        + dig(seconds,2)
        + '</span>'
        + "<span id='countdown_miliseconds' class='theme-watch'>"
        + dig(miliseconds,3)
        + "</span></div>";
}

添加css

{if $module_settings.countdown.theme == 'watch-and-circular-bar'}
    #countdown-number {
        color: black;
        line-height:48px;
    }

    .svgCircle {
        width: 50px;
        height: 50px;
        transform: rotateY(-180deg) rotateZ(-90deg);
        margin-left:7%;
        margin-bottom:1%;
    }

    .svgCircle,.circle {
        stroke-dasharray: 113px;
        stroke-dashoffset: 0px;
        stroke-linecap: round;
        stroke-width: 2px;
        stroke: black;
        fill: none;
        animation: countdown 10s linear infinite forwards;
    }

    @keyframes countdown {
        from {
            stroke-dashoffset: 0px;
        } to {
            stroke-dashoffset: 113px;
        }
    }
{/if}

我已经有一个JS函数用于倒计时，看起来像这样

var x = setInterval(function() {
    var currentDate = $.now();

    var distance = countdownDate - currentDate;

    if (distance >= 0) {
        var days = Math.floor(distance / (1000 * 60 * 60 * 24));
        var hours = Math.floor((distance / (1000 * 60 * 60)) % 24);
        var minutes = Math.floor((distance / (1000 * 60)) %  60);
        var seconds = Math.floor((distance / 1000) % 60);           
        var miliseconds = distance % 1000;

        var day_string = '';

        if (days == 1) {
            day_string = ' day ';
        } else if (days > 1) {
            day_string = ' days ';                  
        } else {
            days = '';
        }

如果我设定了24小时的折扣并且计时器现在是12小时，那么实现酒吧目标的任何想法都可以说是一半吗？

如何让这个动画按照我想要的方式移动？

0 个答案: