ボタンをクリックするとHTMLでカスタマイズされた進行状況バーが表示されます

私は初心者のHTMLコーダーであり、愚かな問題があります。 SUBMITをクリックすると、進行状況を示すカスタマイズされた進行状況バーが表示されます。私はHTMLのタグを使ってみましたが、それは私のために仕事をしませんでした。このようなアニメーションを自分のコードに組み込むにはどうすればいいですか：http://www.jqueryscript.net/chart-graph/Customizable-Liquid-Bubble-Chart-With-jQuery-Canvas.html#viewSource ボタンをクリックするとHTMLでカスタマイズされた進行状況バーが表示されます

どのようなコードを配置すればよいのか分かりません。私はこれを試してみました

、

<!DOCTYPE html> 
<html> 
<style> 
#myProgress { 
    position: relative; 
    width: 100%; 
    height: 30px; 
    background-color: #ddd; 
} 

#myBar { 
    position: absolute; 
    width: 10%; 
    height: 100%; 
    background-color: #4CAF50; 
} 

#label { 
    text-align: center; 
    line-height: 30px; 
    color: white; 
} 
</style> 
<body> 

<h1>JavaScript Progress Bar</h1> 

<div id="myProgress"> 
    <div id="myBar"> 
    <div id="label">10%</div> 
    </div> 
</div> 

<br> 
<button onclick="move()">Click Me</button> 

<script> 
function move() { 
    var elem = document.getElementById("myBar"); 
    var width = 10; 
    var id = setInterval(frame, 10); 
    function frame() { 
    if (width >= 100) { 
     clearInterval(id); 
    } else { 
     width++; 
     elem.style.width = width + '%'; 
     document.getElementById("label").innerHTML = width * 1 + '%'; 
    } 
    } 
} 
</script> 

</body> 
</html>

私は私が提出する]をクリックする前にプログレスバーが表示されるようにしたいいけないので、これは動作しません。 #myBarのCssプロパティで

出典

2016-05-25 RowenaRavenclaw

を参照してください。 –

@Julieどうすればいいのか教えてください。 – RowenaRavenclaw

Googleで 'jquery form submit ajax tutorial'を検索すると、たくさんの結果が得られます。 –

Display:none

が使用され、機能して再びこのプロパティは表示するように変更されます。ここでは

elem.style.display = "inline";

することにより、インラインで変更されたコードです。

<!DOCTYPE html> 
    <html> 
    <style> 
    #myProgress { 
     position: relative; 
     width: 100%; 
     height: 30px; 
     background-color: #ddd; 
    } 

    #myBar { 
     position: absolute; 
     width: 10%; 
     height: 100%; 
     background-color: #4CAF50; 
     display:none; /*Displays None */ 

    } 

    #label { 
     text-align: center; 
     line-height: 30px; 
     color: white; 
    } 
    </style> 
    <body> 

    <h1>JavaScript Progress Bar</h1> 

    <div id="myProgress"> 
     <div id="myBar"> 
     <div id="label"></div> 
     </div> 
    </div> 

    <br> 
    <button onclick="move()">Click Me</button> 

    <script> 
    function move() { 


     var elem = document.getElementById("myBar"); 
     var label=document.getElementById("label"); 
     var width = 10; 
     var id = setInterval(frame, 10); 
     function frame() { 
     if (width >= 100) { 

      clearInterval(id); 
     } else { 
      width++; 
      elem.style.display = "inline"; //Sets Display property to its default value. 
      elem.style.width = width + '%'; 
      label.innerHTML = width * 1 + '%'; 

     } 
     } 
    } 
    </script> 

    </body> 
    </html>

出典

2016-05-25 08:07:24

あなたはSubmitボタンでOnclick = "move（）"を追加することができます –

私はそれを行いました（Onclick = "move（）"）..しかし関数は呼び出されません。（関数が呼び出されているかどうかを確認するために、関数の最初に警告を使いました！） – RowenaRavenclaw

@RowenaRavenclawコードをテスト中に_Browser_で** F12 **を押します。そこにエラーが表示された場合は、それを解決するか、ここに投稿して解決してください！ –

jquery 1.8がある場合は、このコードを使用できます。このjqueryのバージョンでは、progressプロパティを使用してアニメーションの進捗状況を取得できます。したがって、setInterval()の代わりにanimate()を使用してこの作業を行うことができます。たとえばAJAXを通して、あなたのフォームを送信するためにあなたを必要とする

$("button").click(function(){ 
 
    var width = $(".progress").children("div").width(); 
 
    if (width == 0){ 
 
     var percent = $(".progress").data("percent"); 
 
     $(".progress").children("div").width("0%").show().animate({ 
 
      "width": percent + "%" 
 
     }, { 
 
      duration: 2000, 
 
      progress: function(a, p) { 
 
       var newPer = Math.round(percent * p); 
 
       $(".progress").children("div").html(newPer + "%"); 
 
      } 
 
     }); 
 
    } 
 
});

.progress { 
 
    width: 100%; 
 
    height: 30px; 
 
    background-color: #eee; 
 
    border: 1px solid #ddd; 
 
    border-radius: 3px; 
 
    overflow: hidden; 
 
} 
 

 
.progress > div { 
 
    width: 0%; 
 
    height: 100%; 
 
    background: #1C90F3; 
 
    color: #fff;  
 
    display: none; 
 
    font-family: tahoma; 
 
    line-height: 30px; 
 
    text-align: center; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="progress" data-percent="80"> 
 
    <div></div> 
 
</div> 
 
<br/> 
 
<button>Animate progress</button>

出典

2016-05-25 12:54:24 Mohammad

私は実際の進歩を見たいと思います。どうすればいい？ – RowenaRavenclaw

@RowenaRavenclaw https://jsfiddle.net/d51q1k37/を参照してください。 – Mohammad

ボタンをクリックするとHTMLでカスタマイズされた進行状況バーが表示されます

答えて

関連する問題