递减计数条 [英] CountDown-Progressive Bar
问题描述
我试图用进度条构建一个干净的倒数计时器，我想出了这段代码，但不确定是什么问题.CSS很好用，我敢肯定JavaScript代码有问题.
I was trying to build a clean countdown timer with a progress bar, I came up with this code I am not sure what seems to be the problem. CSS is working great I am pretty sure something is wrong with the JavaScript code.
<!DOCTYPE html>
<html>
<head>
<title></title>
<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>
<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(600, 600, $('#progressBar'));
</script>
<script> src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="progressBar">
<div class="bar"></div>
</div>
</body>
</html>推荐答案
您需要重组代码.发现的错误很少
You need to restructure your code. There are few errors found
1.未捕获的ReferenceError:未定义$，因为在标记之间添加了链接，应在链接之间添加src属性.
1.Uncaught ReferenceError: $ is not defined because link was added in between the tag it should be added with src attribute.
2.$ element参数变得不确定，因为脚本是在html之前添加的，并且由于无法在页面加载时调用而无法获取所需的数据，因此，我将其移至页面底部.
2.The $element argument is getting undefined because script is added before html and is unable to get the required data as it is called on page load so, I have moved it to bottom of the page.
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(600, 600, $('#progressBar'));#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}<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<div id="progressBar">
<div class="bar"></div>
</div>
</body>
</html>这篇关于递减计数条的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
