Javascript 倒计时状态栏
我试图建立一个干净的倒计时计时器与进度条，我想出了这个代码，我不知道似乎是什么问题。我很确定CSS工作正常，JavaScript肯定有问题。倒计时没有开始，我只剩下这个条Javascript 倒计时状态栏,javascript,html,jquery,css,Javascript,Html,Jquery,Css,我试图建立一个干净的倒计时计时器与进度条，我想出了这个代码，我不知道似乎是什么问题。我很确定CSS工作正常，JavaScript肯定有问题。倒计时没有开始，我只剩下这个条 #进度条{ 宽度：90%； 利润率：10px自动； 高度：22px； 背景色：#0A5F44； } #进步酒吧部{ 身高：100%； 文本对齐：右对齐； 填充：0 10px； 线高：22px； /*如果希望文本中间对齐，则与#进度条高度相同*/ 宽度：0； 背景色：#CBEA00； 框大小：边框框； } /*不考虑*/ h
#进度条{
宽度：90%；
利润率：10px自动；
高度：22px；
背景色：#0A5F44；
}
#进步酒吧部{
身高：100%；
文本对齐：右对齐；
填充：0 10px；
线高：22px；
/*如果希望文本中间对齐，则与#进度条高度相同*/
宽度：0；
背景色：#CBEA00；
框大小：边框框；
}
/*不考虑*/
html{
填充顶部：30px
}
a、 索林克{
位置：固定；
排名：0；
宽度：100%；
文本对齐：居中；
背景#f3f5f6；
颜色：#cfd6d9；
边框：1px实心#cfd6d9；
线高：30px；
文字装饰：无；
过渡：全部3秒；
z指数：999
}
a、 第一个字母{
文本转换：大写
}
a、 悬停{
颜色：#428bca
}
功能进度（timeleft，timetotal，$element）{
var progressBarWidth=timeleft*$element.width（）/timetotal；
$element.find（'div'）。动画({
宽度：progressBarWidth
}html（Math.floor（timeleft/60）+“：”+timeleft%60）；
如果（时间间隔>0）{
setTimeout（函数（）{
进度（timeleft-1，timetotal$元素）；
}, 1000);
}
};
进度（600,600，$）；
<!DOCTYPE html>
<html>
<head>
<style>
#progressBar {
width: 90%;
margin: 10px auto;
height: 22px;
background-color: #0A5F44;
}
#progressBar div {
height: 100%;
text-align: right;
padding: 0 10px;
line-height: 22px; /* same as #progressBar height if we want text middle aligned */
width: 0;
background-color: #CBEA00;
box-sizing: border-box;
}
/* Do not take in account */
html{padding-top:30px}a.solink{position:fixed;top:0;width:100%;text-align:center;background:#f3f5f6;color:#cfd6d9;border:1px solid #cfd6d9;line-height:30px;text-decoration:none;transition:all .3s;z-index:999}a.solink::first-letter{text-transform:capitalize}a.solink:hover{color:#428bca}
</style>
</head>
<body>
<div id="progressBar">
<div class="bar"></div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
function progress(timeleft, timetotal, $element) {
var progressBarWidth = timeleft * $element.width() / timetotal;
$element.find('div').animate({ width: progressBarWidth }, 500).html(Math.floor(timeleft/60) + ":"+ timeleft%60);
if(timeleft > 0) {
setTimeout(function() {
progress(timeleft - 1, timetotal, $element);
}, 1000);
}
};
progress(6000, 6000, $('#progressBar'));
</script>
</body>
</html>
#进度条{
宽度：90%；
利润率：10px自动；
高度：22px；
背景色：#0A5F44；
}
#进步酒吧部{
身高：100%；
文本对齐：右对齐；
填充：0 10px；
行高：22px；/*如果希望文本中间对齐，则与#进度条高度相同*/
宽度：0；
背景色：#CBEA00；
框大小：边框框；
}
/*不考虑*/
html{padding top:30px}a.solink{位置：固定；顶部：0；宽度：100%；文本对齐：居中；背景：#f3f5f6；颜色：#cfd6d9；边框：1px实心#cfd6d9；线宽：30px；文本装饰：无；转换：all.3s；z索引：999}a.solink:：第一个字母{文本转换：大写}a.solink：悬停{颜色：#428bca}
功能进度（timeleft，timetotal，$element）{
var progressBarWidth=timeleft*$element.width（）/timetotal；
$element.find（'div'）.animate（{width:progressBarWidth}，500）.html（Math.floor（timeleft/60）+“：”+timeleft%60）；
如果（时间间隔>0）{
setTimeout（函数（）{
进度（timeleft-1，timetotal$元素）；
}, 1000);
}
};
进度（6000，6000，$）；
试试这个，它对我来说很好我发现了不同的错误，移动jquery导入，并在documentready上添加函数
#进度条{
宽度：90%；
利润率：10px自动；
高度：22px；
背景色：#0A5F44；
}
#进步酒吧部{
身高：100%；
文本对齐：右对齐；
填充：0 10px；
行高：22px；/*如果希望文本中间对齐，则与#进度条高度相同*/
宽度：0；
背景色：#CBEA00；
框大小：边框框；
}
/*不考虑*/
html{padding top:30px}a.solink{位置：固定；顶部：0；宽度：100%；文本对齐：居中；背景：#f3f5f6；颜色：#cfd6d9；边框：1px实心#cfd6d9；线宽：30px；文本装饰：无；转换：all.3s；z索引：999}a.solink:：第一个字母{文本转换：大写}a.solink：悬停{颜色：#428bca}
功能进度（timeleft，timetotal，$element）{
var progressBarWidth=timeleft*$element.width（）/timetotal；
$element.find（'div'）.animate（{width:progressBarWidth}，500）.html（Math.floor（timeleft/60）+“：”+timeleft%60）；
如果（时间间隔>0）{
setTimeout（函数（）{
进度（timeleft-1，timetotal$元素）；
}, 1000);
}
};
$（函数（）{
进度（600600美元）；
src=…>标题