Javascript 更改递归函数变量'；onchange'；用纯js

我有一个这样的页面（body标签有

onload=“doInit（）；”

）：

函数doInit（）{
var end=新日期（）；
var tday=新日期（）；
var full=540；
结束设定时间（18,0,0）；
函数updateTime（）{
var now=新日期（），
time=now.getHours（）+'：'+now.getMinutes（）+'：'+now.getSeconds（），
剩余=结束-现在，
_秒=1000，
_分钟=_秒*60，
_小时=_分钟*60，
_日=_小时*24，
lwidth=document.getElementById（'rng'）。值，
小时=数学楼层（剩余天数%/（小时））；
分钟=数学楼层（（剩余的%\u小时）/\u分钟）；
秒=数学楼层（（剩余的%\u分钟）/\u秒）；
document.getElementById（'remaine'）。innerHTML=''；
document.getElementById（'remain'）.innerHTML+=hours+'h'；
document.getElementById（'remaine'）.innerHTML+=minutes+'m'；
document.getElementById（'remain'）.innerHTML++=（秒+1）+'s'；
无功电流=（满-（小时*60）-分钟）/满*100；
document.getElementById（'progress'）。style.height=lwidth；
document.getElementById（'progress'）.innerHTML=current.toFixed（1）+'%'；
document.getElementById（'progress'）.style.width=current+“%”；
setTimeout（updateTime，1000）；
}
updateTime（）；
}
doInit（）
正文{
保证金：0；
填充：0；
字体系列：无衬线；
}
#进展{
高度：14px；
背景颜色：橙色；
字体大小：12px；
文本对齐：居中；
边缘顶部：5px；
颜色：黑色；
字体大小：粗体；
}
#留{
宽度：100px；
高度：14px；
颜色：黑色；
边缘顶部：10px；
字体大小：12px；
背景色：青色；
}
#rng{
边缘顶部：50px；
}


我希望在更改输入范围值时更改高度

递归中不使用或不需要在
onchange
侦听器中更改的值。因此，您可以只使用事件侦听器并在
updateTime
函数之外处理更改

我清理了您的代码并添加了侦听器：


函数doInit（）{
var progress=document.getElementById（'progress'）；
var remaine=document.getElementById（'remaine'）；
var range=document.getElementById（'rng'）；
var end=新日期（）；
var full=540；
var_秒=1000；
var _minute=_second*60；
变量(小时)=(分钟)*60 ;；
var _日=_小时*24；
结束设定时间（18,0,0）；
函数updateTime（）{
var now=新日期（）；
var time=now.getHours（）+'：'+now.getMinutes（）+'：'+now.getSeconds（）；
var剩余=结束-现在；
var小时数=数学下限（（剩余天数%/）；
var分钟数=数学地板（剩余的%\u小时）/\u分钟）；
var秒=数学地板（剩余的%\u分钟）/\u秒）；
remaine.innerHTML=''；
remaine.innerHTML+=hours+'h'；
remaine.innerHTML+=minutes+'m'；
remaine.innerHTML+=（秒+1）+“s”；
无功电流=（满-（小时*60）-分钟）/满*100；
progress.innerHTML=current.toFixed（1）+'%'；
progress.style.width=当前+“%”；
setTimeout（updateTime，1000）；
}
range.addEventListener（'input'，function（）{
var lwidth=范围.value；
progress.style.height=lwidth+“px”；
});
updateTime（）；
}
doInit（）
正文{
保证金：0；
填充：0；
字体系列：无衬线；
}
#进展{
高度：14px；
背景颜色：橙色；
字体大小：12px；
文本对齐：居中；
边缘顶部：5px；
颜色：黑色；
字体大小：粗体；
}
#留{
宽度：100px；
高度：14px；
颜色：黑色；
边缘顶部：10px；
字体大小：12px；
背景色：青色；
}
#rng{
边缘顶部：50px；
}

您的格式设置有点疯狂，如果这更易于阅读，您可能会做得更好。如果可能的话，我不想使用jQuery