Javascript 如何逆时针旋转并以相反的顺序开始倒计时

我有一个简单的示例代码，工作正常，但计时器是顺时针方向递增的。我想在逆时针方向做同样的事情，计时器应该减少。例如10、9、8……0秒

当前代码是1 2 3…10秒，圆圈也是顺时针方向填充的

/*
要修改总时间，只需输入变量totaltime
*/
var totaltime=60；
函数更新（百分比）{
var deg；
如果（百分比<（总时间/2））{
度数=90+（360*百分比/总时间）；
$（'.pie'）.css（'background-image'，
“线性梯度（“+deg+”deg，透明50%，白色50%），线性梯度（90度，白色50%，透明50%）”
);
}否则如果（百分比>=（总时间/2））{
度数=-90+（360*百分比/总时间）；
$（'.pie'）.css（'background-image'，
“线性梯度（“+deg+”deg，透明50%，#1FBA6 50%），线性梯度（90度，白色50%，透明50%）”
);
}
}
var count=parseInt（$（'#time'）.text（）；
myCounter=setInterval（函数（）{
计数+=1；
$（'#time'）.html（计数）；
更新（计数）；
如果（计数==总时间）clearInterval（myCounter）；
}, 1000);
@导入url(https://fonts.googleapis.com/css?family=Open+Sans:400300）；
身体{
字体系列：“开放式Sans”，无衬线；
字体大小：300；
背景#b4f2ea；
}
.馅饼{
宽度：250px；
高度：250px；
显示：块；
位置：相对位置；
边界半径：50%；
背景色：#1fbba6；
边框：2px实心#1fbba6；
浮动：左；
边缘：2米；
}
.派.块{
位置：绝对位置；
背景：#fff；
宽度：230px；
高度：230像素；
显示：块；
边界半径：50%；
顶部：10px；
左：10px；
}
#时间{
字号：3em；
位置：绝对位置；
最高：35%；
左：43%；
颜色：#999999；
}
.学位{
/*90 + ( 360 * .1 )*/
背景图像：线性梯度（90度，透明50%，白色50%），线性梯度（90度，白色50%，透明50%）；
}

0
您只需进行3项更改


在HTML中：使其从10开始，例如
10

在JavaScript中，您需要更新以下3个部分：

// update this
var totaltime = 10;
...
//Don't forget to decrement your counter
count -= 1;
...
// set the condition to === 0 (and not totalTime)
if (count === 0) clearInterval(myCounter); 


完整示例：


/*
要修改总时间，只需输入变量totaltime
*/
var totaltime=10；
函数更新（百分比）{
var deg；
如果（百分比<（总时间/2））{
度数=90+（360*百分比/总时间）；
$（'.pie'）.css（'background-image'，
“线性梯度（“+deg+”deg，透明50%，白色50%），线性梯度（90度，白色50%，透明50%）”
);
}否则如果（百分比>=（总时间/2））{
度数=-90+（360*百分比/总时间）；
$（'.pie'）.css（'background-image'，
“线性梯度（“+deg+”deg，透明50%，#1FBA6 50%），线性梯度（90度，白色50%，透明50%）”
);
}
}
var count=parseInt（$（'#time'）.text（）；
myCounter=setInterval（函数（）{
计数-=1；
$（'#time'）.html（计数）；
更新（计数）；
控制台日志（计数）；
如果（计数==0）{
clearInterval（myCounter）；
警报（“达到0秒”）；
}
}, 1000);
@导入url(https://fonts.googleapis.com/css?family=Open+Sans:400300）；
身体{
字体系列：“开放式Sans”，无衬线；
字体大小：300；
背景#b4f2ea；
}
.馅饼{
宽度：250px；
高度：250px；
显示：块；
位置：相对位置；
边界半径：50%；
背景色：#1fbba6；
边框：2px实心#1fbba6；
浮动：左；
边缘：2米；
}
.派.块{
位置：绝对位置；
背景：#fff；
宽度：230px；
高度：230像素；
显示：块；
边界半径：50%；
顶部：10px；
左：10px；
}
#时间{
字号：3em；
位置：绝对位置；
最高：35%；
左：43%；
颜色：#999999；
}
.学位{
/*90 + ( 360 * .1 )*/
背景图像：线性梯度（90度，透明50%，白色50%），线性梯度（90度，白色50%，透明50%）；
}

10
您只需进行3项更改


在HTML中：使其从10开始，例如
10

在JavaScript中，您需要更新以下3个部分：

// update this
var totaltime = 10;
...
//Don't forget to decrement your counter
count -= 1;
...
// set the condition to === 0 (and not totalTime)
if (count === 0) clearInterval(myCounter); 


完整示例：


/*
要修改总时间，只需输入变量totaltime
*/
var totaltime=10；
函数更新（百分比）{
var deg；
如果（百分比<（总时间/2））{
度数=90+（360*百分比/总时间）；
$（'.pie'）.css（'background-image'，
“线性梯度（“+deg+”deg，透明50%，白色50%），线性梯度（90度，白色50%，透明50%）”
);
}否则如果（百分比>=（总时间/2））{
度数=-90+（360*百分比/总时间）；
$（'.pie'）.css（'background-image'，
“线性梯度（“+deg+”deg，透明50%，#1FBA6 50%），线性梯度（90度，白色50%，透明50%）”
);
}
}
var count=parseInt（$（'#time'）.text（）；
myCounter=setInterval（函数（）{
计数-=1；
$（'#time'）.html（计数）；
更新（计数）；
控制台日志（计数）；
如果（计数==0）{
clearInterval（myCounter）；
警报（“达到0秒”）；
}
}, 1000);
@导入url(https://fonts.googleapis.com/css?family=Open+Sans:400300）；
身体{
字体系列：“开放式Sans”，无衬线；
字体大小：300；
背景#b4f2ea；
}
.馅饼{
宽度：250px；
高度：250px；
显示：块；
位置：相对位置；
边界半径：50%；
背景色：#1fbba6；
边框：2px实心#1fbba6；
浮动：左；
边缘：2米；
}
.派.块{
位置：绝对位置；
背景：#fff；
宽度：230px；
高度：230像素；
显示：块；
边界半径：50%；
顶部：10px；
左：10px；
}
#时间{
字号：3em；
位置：绝对位置；
最高：35%；
左：43%；
颜色：#999999；
}
.学位{
/*90 + ( 360 * .1 )*/
背景图像：线性梯度（90度，透明50%，白色50%），线性梯度（90度，白色50%，透明50%）；
}

10
那么您想在计数达到60后反转顺序？或者你想直接从60开始加载？所以加载时直接从60开始，