HTML DOM Progress max Property - प्रोग्रेस बार अधिकतम मान

HTML DOM Progress max Property

HTML DOM progress max property प्रोग्रेस बार (<progress>) एलिमेंट के max attribute का मान प्राप्त या संशोधित करती है। यह कुल कार्य की मात्रा को दर्शाता है जिसकी तुलना में वर्तमान प्रगति (value) मापी जाती है।

Syntax

Max मान प्राप्त करना:

progressObject.max

Max मान सेट करना:

progressObject.max = "number"

उदाहरण

प्रोग्रेस बार का अधिकतम मान 100 से 200 में बदलना:

<!DOCTYPE html>
<html>
<head>
<style>
  html { height: 100%; }
  body {
    text-align: center;
    color: #fff;
    background: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%) center/cover no-repeat;
    height: 100%;
  }
  p { font-weight: 700; font-size: 1.2rem; }
  .btn {
    background: #0197F6;
    border: none;
    height: 2rem;
    border-radius: 2px;
    width: 35%;
    margin: 2rem auto;
    display: block;
    color: #fff;
    outline: none;
    cursor: pointer;
  }
  .show { font-size: 1.5rem; font-weight: bold; }
</style>
</head>
<body>
<h1>DOM Progress max Property Demo</h1>
<p>आपके लंबित कार्य की स्थिति:</p>
<p>(नीला = पूर्ण & सफेद = लंबित)</p>
<progress value="20" max="100" class="progress"></progress>
<button onclick="changeMax()" class="btn">Max = 200 बदलें</button>
<div class="show"></div>
<script>
  function changeMax() {
    var progress = document.querySelector(".progress");
    var msg = document.querySelector(".show");
    msg.innerHTML = "पिछला अधिकतम मान है " + progress.max + '';
    progress.max = "200";
    msg.innerHTML += "
नया अधिकतम मान है " + progress.max + "
";
  }
</script>
</body>
</html>

आउटपुट

प्रारंभ में प्रोग्रेस बार 20/100 (20%) दिखाता है। "Max = 200 बदलें" बटन क्लिक करने पर अधिकतम 200 हो जाता है, इसलिए प्रोग्रेस बार अब 20/200 (10%) दिखाता है - दृश्य प्रगति कम दिखाई देती है।

मुख्य बिंदु

• max attribute कुल कार्य/लक्ष्य को दर्शाता है (डिफ़ॉल्ट 1)
• value attribute वर्तमान प्रगति दर्शाता है
• प्रतिशत = (value / max) × 100
• यदि max निर्दिष्ट नहीं है, तो प्रोग्रेस बार अनिश्चित (indeterminate) मोड में होता है
• JavaScript से progress.max और progress.value अपडेट करके प्रगति एनिमेट कर सकते हैं
• max 0 से अधिक फ्लोटिंग-पॉइंट संख्या होना चाहिए