單擊增量按鈕時，進度條的寬度將發生變化。 使用Javascript
[英]Progress Bar width to change when increment button clicked. Javascript
問題描述
現在工作
好的，您好，即時通訊正在尋找以下代碼的幫助：
當我單擊增量按鈕時，每次單擊將值增加一，這實際上是我想要執行的操作。 但是我也希望藍色進度條隨着數字的增加而填充。 我有一段可運行的代碼，可能有助於在下面進行調試。 感謝所有幫助，因為我是這個網站的新手。謝謝。
function getProgress() { return document.getElementById("progressbar").getAttribute("aria-valuenow"); return document.getElementById("progressbar").getAttribute("style","width"); return document.getElementById("progressbar").innerHTML; } function setProgress(value) { document.getElementById("progressbar").setAttribute("aria-valuenow",value); document.getElementById("progressbar").setAttribute("style","width: " +value+ "%"); document.getElementById("progressbar").innerHTML = (value+ "%"); } function increment() { var i = getProgress(); if(i < 100){ i++; setProgress(i); }else{ alert("Progress Complete!"); } } function decrement() { var d = getProgress(); setProgress(d - 1); } function resetButton() { var r = getProgress(); setProgress(r = 0); }
<!doctype html> <html lang="en"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- Bootstrap CSS --> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous"> <title>Progress Bar</title> </head> <body> <!-- Container --> <div class="container"> <h1>This Process bar is animated using <br>JavaScript!</h1> <br> <!-- Div For Progress Bar --> <div class="progress"> <div class="progress-bar progress-bar-striped" role="progressbar" style="width: 0%;" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" id="progressbar" >0%</div> </div> <br> <!-- Buttons --> <button type="button" class="btn btn-primary" onclick = "increment()">Increment</button> <button type="button" class="btn btn-dark" onclick="resetButton()">Reset</button> <button type="button" class="btn btn-success" onclick="decrement()">Decrement</button> <button type="button" class="btn btn-warning" onclick="">Start Auto Progress!</button> <button type="button" class="btn btn-danger" onclick="">Stop Auto Progress!</button> <p id="value"> </p> <!-- End of Container --> </div> <!-- Optional JavaScript --> <!-- jQuery first, then Popper.js, then Bootstrap JS --> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script> <script src="Assignment4.js"></script> </body> </html>
1 個解決方案
解決方案1
0 已采納 2019-03-13 18:55:31
您只需要在行中缺少一個冒號來設置寬度。 應為"width: " + value 。
單擊按鈕時，輸入文本需要更改大小寫。 無法為此創建JS
[英]Input text needs a case change when button is clicked. Having trouble creating JS for this
單擊時使用javascript更改圖像。 但是為什么效果不好？
[英]use javascript to change image when clicked. but why it doesn't work well?
編寫一個 javascript 函數，在單擊按鈕時將表單的詳細信息打印到另一個 html 頁面。
[英]Writing a javascript function that just prints details of a form to another html page when a button is clicked.
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.