JavaScript-在固定间隔后连续减小div宽度

我是一个JavaScript noob，我正在努力完成以下任务：

一个div，其行为类似于一个按钮，其宽度（BG）随时间而增加 单击（想想一个进度条，它随着每次单击而增加）一定量，比如每次单击的进度增加10%

父div宽度满后，应该有一个 10秒延迟后，div再次以恒定速率开始收缩。（有点像反向进度条）

当宽度为 减少，用户应该能够单击div并开始 再次增加，直到达到全宽

请检查以下图片以供参考：

我已经完成了第1步，我认为一旦我能够实现第2步，第3步就会自行完成

请帮助我完成第二步（不断减小背景div的宽度）。

我的代码如下：

var-papperbtn=document.getElementById（'papperbtn'）；
var pallec=document.getElementById（'pallec'）；
如果（C）{
桨C.style.width=“0px”；
}
如果（BTN）{
pablebtn.style.cursor='pointer'；
pallebtn.onclick=函数（）{
if（（parseInt（pallec.style.width）+5）pallec.parentElement.offsetWidth）{
pallec.style.width=pallec.parentElement.offsetWidth；
}
}
if（parseInt（pableC.style.width）>=pableC.parentElement.offsetWidth-5）{
pallec.style.backgroundColor=“#B3DDE0”；
pallec.style.width=pallec.parentElement.offsetWidth-2；
}
};
}

.btn{
显示：内联块；
边框：1px纯黑；
高度：30px；
宽度：100px；
}
.冷却{
z指数：1；
位置：固定；
身高：继承；
背景色：#DCDC；
-webkit过渡：宽度为0.4s，易于进出；
-moz过渡：宽度0.4s，易于输入输出；
-o型过渡：宽度为0.4s，易于进出；
过渡：宽度0.4s，易于进出；
过渡：背景色0.2s；
}
拉贝尔特先生{
z指数：2；
位置：固定；
填充物：5px；
文本对齐：居中；
字号：18px；
字体系列：“Arial”，时代，衬线；
宽度：继承；
-webkit触摸标注：无；
-webkit用户选择：无；
-khtml用户选择：无；
-moz用户选择：无；
-ms用户选择：无；
用户选择：无；
}

桨

您可以使用setInterval完成此操作。请记住将其分配给一个可访问的变量（即：var interval=setInterval（…）；），以便您可以在每次需要时引用它并取消它（即：当用户单击->设置超时/setInterval 10s->设置间隔200ms将宽度更改为0时）

您可以使用setInterval完成此操作。请记住将其分配给一个可访问的变量（即：var interval=setInterval（…）；），这样您就可以在每次需要时引用它并取消它（即：当用户单击->设置超时/setInterval 10s->设置间隔200ms将宽度更改为0时）

您可以尝试此操作。你可以根据你的要求改变间隔时间，我现在放3秒。谢谢

var间隔；
var papperbtn=document.getElementById（'papperbtn'）；
var pallec=document.getElementById（'pallec'）；
函数DecreaseBaile（）{
var-widthC=parseInt（pallec.style.width）-20；
pallec.style.width=字符串（widthC.concat（'px'）；
pallec.style.backgroundColor=“#dcdc”；
if（parseInt（pableC.style.width）pableC.parentElement.offsetWidth）{
pallec.style.width=pallec.parentElement.offsetWidth；
}
}
if（parseInt（pableC.style.width）>=pableC.parentElement.offsetWidth-5）{
pallec.style.backgroundColor=“#B3DDE0”；
pallec.style.width=pallec.parentElement.offsetWidth-2；
桨叶间隔=设定间隔（减少桨叶，3000）；
}
};
}

.btn{
显示：内联块；
边框：1px纯黑；
高度：30px；
宽度：100px；
}
.冷却{
z指数：1；
位置：固定；
身高：继承；
背景色：#DCDC；
-webkit过渡：宽度为0.4s，易于进出；
-moz过渡：宽度0.4s，易于输入输出；
-o型过渡：宽度为0.4s，易于进出；
过渡：宽度0.4s，易于进出；
过渡：背景色0.2s；
}
拉贝尔特先生{
z指数：2；
位置：固定；
填充物：5px；
文本对齐：居中；
字号：18px；
字体系列：“Arial”，时代，衬线；
宽度：继承；
-webkit触摸标注：无；
-webkit用户选择：无；
-khtml用户选择：无；
-moz用户选择：无；
-ms用户选择：无；
用户选择：无；
}

桨

您可以试试这个。你可以根据你的要求改变间隔时间，我现在放3秒。谢谢

var间隔；
var papperbtn=document.getElementById（'papperbtn'）；
var pallec=document.getElementById（'pallec'）；
函数DecreaseBaile（）{
var-widthC=parseInt（pallec.style.width）-20；
pallec.style.width=字符串（widthC.concat（'px'）；
pallec.style.backgroundColor=“#dcdc”；
if（parseInt（pableC.style.width）pableC.parentElement.offsetWidth）{
pallec.style.width=pallec.parentElement.offsetWidth；
}
}
if（parseInt（pableC.style.width）>=pableC.parentElement.offsetWidth-5）{
pallec.style.backgroundColor=“#B3DDE0”；
pallec.style.width=pallec.parentElement.offsetWidth-2；
桨叶间隔=设定间隔（减少桨叶，3000）；
}
};
}

.btn{
显示：内联块；
边框：1px纯黑；
高度：30px；
宽度：100px；
}
.冷却{
z指数：1；
位置：固定；
身高：继承；
背景色：#DCDC；
-韦伯