Question

我一直在尝试将本演示中的倒计时从10倒数为零，而没有运气。

我尝试通过执行以下操作来倒计时：

(1*(initialOffset/time))-initialOffset )

它确实颠倒了动画圈，但没有倒计时。

有什么想法吗？

谢谢

var time = 10;
var initialOffset = '440';
var i = 1

/* Need initial run as interval hasn't yet occured... */
$('.circle_animation').css('stroke-dashoffset', initialOffset-(1*(initialOffset/time)));

var interval = setInterval(function() {
    $('h2').text(i);
    if (i == time) {  	
        clearInterval(interval);
        return;
    }
    $('.circle_animation').css('stroke-dashoffset', initialOffset-((i+1)*(initialOffset/time)));
    i++;  
}, 1000);

.item {
    position: relative;
    float: left;
}

.item h2 {
    text-align:center;
    position: absolute;
    line-height: 125px;
    width: 100%;
}

svg {
    transform: rotate(-90deg);
}

.circle_animation {
    stroke-dasharray: 440; /* this value is the pixel circumference of the circle */
    stroke-dashoffset: 440;
    transition: all 1s linear;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="item">
    <h2>0</h2>
    <svg width="160" height="160" xmlns="http://www.w3.org/2000/svg">
        <circle id="circle" class="circle_animation" r="69.85699" cy="81" cx="81" stroke-width="8" stroke="#6fdb6f" fill="none"/>
    </svg>
</div>

这也是codepen副本：

https://codepen.io/kaolay/pen/LRVxKd

Answer 1

如果您更新此行$('h2').text(time - i);，则将获得数字倒计时。我也将i = 0初始化为起始编号为10：

var time = 10;
var initialOffset = '440';
var i = 0

/* Need initial run as interval hasn't yet occured... */
$('.circle_animation').css('stroke-dashoffset', initialOffset-(1*(initialOffset/time)));

var interval = setInterval(function() {
		$('h2').text(time - i);
		if (i == time) {  	
      clearInterval(interval);
			return;
    }
    $('.circle_animation').css('stroke-dashoffset', initialOffset-((i+1)*(initialOffset/time)));
    i++;  
}, 1000);

.item {
    position: relative;
    float: left;
}

.item h2 {
    text-align:center;
    position: absolute;
    line-height: 125px;
    width: 100%;
}

svg {
    transform: rotate(-90deg);
}

.circle_animation {
  stroke-dasharray: 440; /* this value is the pixel circumference of the circle */
  stroke-dashoffset: 440;
  transition: all 1s linear;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="item">
    <h2>0</h2>
    <svg width="160" height="160" xmlns="http://www.w3.org/2000/svg">
      <circle id="circle" class="circle_animation" r="69.85699" cy="81" cx="81" stroke-width="8" stroke="#6fdb6f" fill="none"/>
    </svg>
</div>

Answer 2

尝试用$('h2').text(time - i);代替$('h2').text(i);

我还添加了$('h2').text(time);作为第四行，以便在开始处绘制10

此外，圆圈的第一部分未在您的代码中显示为动画，因此我更改了这一行：

$('.circle_animation').css('stroke-dashoffset', initialOffset-(1*(initialOffset/time)));

此块：

$('.circle_animation').css('stroke-dashoffset', initialOffset);
setTimeout(() => {
    $('.circle_animation').css('stroke-dashoffset', initialOffset-(1*(initialOffset/time)));
})

var time = 10;
var initialOffset = '440';
var i = 1;
$('h2').text(time); // adding 10 at the beginning if needed

/* Need initial run as interval hasn't yet occured... */
$('.circle_animation').css('stroke-dashoffset', initialOffset);
setTimeout(() => {
    $('.circle_animation').css('stroke-dashoffset', initialOffset-(1*(initialOffset/time)));
})


var interval = setInterval(function() {
    $('h2').text(time - i); // here is the clue
    if (i == time) {  	
        clearInterval(interval);
        return;
    }
    $('.circle_animation').css('stroke-dashoffset', initialOffset-((i+1)*(initialOffset/time)));
    i++;  
}, 1000);

.item {
    position: relative;
    float: left;
}

.item h2 {
    text-align:center;
    position: absolute;
    line-height: 125px;
    width: 100%;
}

svg {
    transform: rotate(-90deg);
}

.circle_animation {
    stroke-dasharray: 440; /* this value is the pixel circumference of the circle */
    stroke-dashoffset: 440;
    transition: all 1s linear;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="item">
    <h2>0</h2>
    <svg width="160" height="160" xmlns="http://www.w3.org/2000/svg">
        <circle id="circle" class="circle_animation" r="69.85699" cy="81" cx="81" stroke-width="8" stroke="#6fdb6f" fill="none"/>
    </svg>
</div>

Answer 3

您到底在问什么？ “它确实颠倒了动画圈，但没有倒计时。”

您只是想倒计时？

为什么不设置i = 10，然后再设置i-

Answer 4

如果要反转动画，只需反转初始值的所有状态并将i更改为（time-i）。就像这样：

<div class="item">
    <h2>10</h2>
    <svg width="160" height="160" xmlns="http://www.w3.org/2000/svg">
      <circle id="circle" class="circle_animation" r="69.85699" cy="81" cx="81" stroke-width="8" stroke="#6fdb6f" fill="none"/>
    </svg>
</div>

.item {
    position: relative;
    float: left;
}

.item h2 {
    text-align:center;
    position: absolute;
    line-height: 125px;
    width: 100%;
}

svg {
    transform: rotate(-90deg);
}

.circle_animation {
  stroke-dasharray: 440; /* this value is the pixel circumference of the circle */
  stroke-dashoffset: 0;
  transition: all 1s linear;
}

var time = 10;
var initialOffset = 440;
var i = 0

/* Need initial run as interval hasn't yet occured... */
$('.circle_animation').css('stroke-dashoffset', 0);

var interval = setInterval(function() {
        $('h2').text(time-i);
        if (i == time) {    
      clearInterval(interval);
            return;
    }
    $('.circle_animation').css('stroke-dashoffset', initialOffset*i/time);
    i++;  

}, 1000);

密码笔： https://codepen.io/anon/pen/Xybpge

循环倒数JavaScript从10到零

4 个答案: