काउंटडाउन-प्रोग्रेसिव बार

Question

मैं एक प्रगति बार के साथ एक साफ उलटी गिनती टाइमर बनाने की कोशिश कर रहा था, मैं इस कोड के साथ आया था मुझे यकीन नहीं है कि समस्या क्या है। CSS बढ़िया काम कर रहा है मुझे पूरा यकीन है कि जावास्क्रिप्ट कोड में कुछ गड़बड़ है।

<!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>

Answer 1

आपको अपना कोड पुनर्गठन करना होगा। कुछ त्रुटियां पाई गई हैं

1.Uncaught ReferenceError: $ को परिभाषित नहीं किया गया है क्योंकि लिंक को टैग के बीच जोड़ा गया था इसे src विशेषता के साथ जोड़ा जाना चाहिए।

2. $ तत्व तर्क अपरिभाषित हो रहा है क्योंकि स्क्रिप्ट को html से पहले जोड़ा गया है और आवश्यक डेटा प्राप्त करने में असमर्थ है क्योंकि इसे पेज लोड पर कहा जाता है, इसलिए मैंने इसे पृष्ठ के नीचे स्थानांतरित कर दिया है।

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>