使用帶有Javascript/jQuery的html <progress>標籤

我創建了一個html進度標籤，我希望每次單擊按鈕時最多更新5次。我已經整理了代碼來更新進度標籤禮貌的另一個來源，但由於我是一個JS新手，我不知道如何鏈接按鈕。任何幫助，將不勝感激。這是我的javascript。使用帶有Javascript/jQuery的html <progress>標籤

$(document).ready(function(){ 

$("#submit").click(function(){ 

$("#pro-form input").on("click",function(){ 

var numValid = 0; 
$("#pro-form input[required]").each(function() { 
if (this.validity.valid) { 
    numValid++; 
} 
}); 

var progress = $("#progress"), 
progressMessage = $("#progress-message"); 

if (numValid == 0) { 
progress.attr("value", "0"); 
progressMessage.text("The form, it wants you."); 
} 
if (numValid == 1) { 
progress.attr("value", "20"); 
progressMessage.text("There you go, great start!"); 
} 
if (numValid == 2) { 
progress.attr("value", "40"); 
progressMessage.text("Nothing can stop you now."); 
} 
if (numValid == 3) { 
progress.attr("value", "60"); 
progressMessage.text("You're basically a hero, right?"); 
} 
if (numValid == 4) { 
progress.attr("value", "80"); 
progressMessage.text("They are going to write songs about you."); 
} 
if (numValid == 5) { 
progress.attr("value", "95"); 
progressMessage.text("SO CLOSE. PRESS THE THING."); 
} 

    }); 
}); 
});

CSS

*{ 
     box-sizing:border-box;} 

    body{ 
    /* background:#333; */ 
     background-image:url(../images/progress_grunge_background.gif); 
     font-family: "Lucida Grande", "Lucida Sans Unicode", Tahoma, Sans-Serif; 
     font-size: 14px; 
     line-height: 1.4; 
     padding: 20px;} 

    #accessbox { 
     background-color:#006; 
     width:200px; 
     height: 100px; 
     position:fixed; 
     -webkit-border-radius: 1px; 
     -moz-border-radius: 1px; 
     border-radius: 5px; 
     border: 2px solid red; 
     left:190px; 
     top: 400px; } 

    form { 
     padding-top:10px; 
     padding-left:25px; 
     position:relative;} 

    input[type="text"], [type="password"], [type="submit"] { 
     font-family:Tahoma, Geneva, sans-serif; 
     background-color:#99FFFF; 
     margin:2px; 
     border:2px solid #999;} 

    input[type="submit"] { 
     margin-top:5px; 
     margin-left:20px; } 

    progress { 
     width:200px; 
     height:20px;} 

    .progress-wrap { 
     top:550px; 
     left:210px; 
     position:relative; 
    /* text-align: center; */ 
     font-size: 10px; 
     color: red; 
     margin: 0 0 20px 0; 
     progress { 
     width: 100%; 
     margin: 0 0 5px 0; 
    } 
    }

HTML

<!DOCTYPE HTML> 
    <html> 
    <head> 
    <meta charset="utf-8"> 
      <title>Untitled Document</title> 
     <link href="css/access.css" rel="stylesheet" type="text/css"> 
     <script src="_js/jquery-1.9.1.min.js"></script>          
     <script src="_js/modernizr.js"></script> 
    </head> 

    <body> 

    <div class = "accessbox" id="accessbox"> 

      <form method="post" class="login" action=""> 

      <input type="text" class="name" id="username" placeholder="Username" name="username" /> 

      <input type="password" class="pass" placeholder="Password" name="password"/> 
      <input type="submit" name="submit" class="submit" id="submit"> 
     <script src="js/progress_1.js"></script> 
      </form> 
    </div>   
    <div class="progress-wrap"> 
      <progress max="100" value="0" id="progress"></progress> 
      <div class="progress-message" id="progress-message">The form, it wants you.</div> 
      <!--script src="js/progress.js"></script--> 

    </div>  


    </body> 
    </html>

來源

2013-08-05 Philip Terry

你介意在[jsfiddle]（http://jsfiddle.net/）中添加這個作爲演示。 – deepakb

你只需要一點訂貨

在這裏你去..

var numValid = 0; 

$(document).ready(function(){ 

$("#pro-form input").on("click",function(){ 
$("#pro-form input[required]").each(function() { 
if (this.validity.valid) { 
    numValid++; 
} 
    }); 
    }); 

$("#submit").click(function(){ 

var progress = $("#progress"), 
progressMessage = $("#progress-message"); 

if (numValid == 0) { 
progress.attr("value", "0"); 
progressMessage.text("The form, it wants you."); 
} 
if (numValid == 1) { 
progress.attr("value", "20"); 
progressMessage.text("There you go, great start!"); 
} 
if (numValid == 2) { 
progress.attr("value", "40"); 
progressMessage.text("Nothing can stop you now."); 
} 
if (numValid == 3) { 
progress.attr("value", "60"); 
progressMessage.text("You're basically a hero, right?"); 
} 
if (numValid == 4) { 
progress.attr("value", "80"); 
progressMessage.text("They are going to write songs about you."); 
} 
if (numValid == 5) { 
progress.attr("value", "95"); 
progressMessage.text("SO CLOSE. PRESS THE THING."); 
} 


}); 
});

竟被

來源

2013-08-05 11:26:43

非常感謝。我試過你的解決方案，但它仍然不適合我。但是，我不知道問題出在javascript和html/css之間的「連接」上。我冒昧地在下面發佈。我在JavaScript中做的唯一更改是＃pro-form輸入現在是#input。 –

剛剛發現代碼太大而無法在評論框中發佈，所以我有點卡住了。 –

你可以編輯你的文章。 –

使用帶有Javascript/jQuery的html <progress>標籤

回答

相關問題