視覚化を読み込むためにJavaScriptを使用して進行要素を制御するにはどうすればよいですか？

私はHTML文書にローダーを追加するのに助けが必要です。ここでは、ページがローダーなしだ：視覚化を読み込むためにJavaScriptを使用して進行要素を制御するにはどうすればよいですか？

<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
    <title>Webpage</title> 
 
    </head> 
 
    <body bgcolor="#FFFFFF"> 
 
    <script> 
 
     /* 
 
     
 
     Script goes here for the loader. 
 
     I think I might have an idea, I could use the "load" event. 
 
     
 
     */ 
 
    </script> 
 
    <style> 
 
     
 
     h1 { 
 
     color: green; 
 
     font: 24px Courier; 
 
     } 
 
     
 
     .css-format-class { 
 
     color: red; 
 
     font: 16px Arial; 
 
     } 
 
     
 
    </style> 
 
    <center> 
 
     <h1>My Simple Webpage</h1> 
 
    </center> 
 
    <br> 
 
    <p class="css-format-class">I wish I could add a loader GIF onto this page...</p> 
 
    <!--I need a loader somewhere in this webpage...--> 
 
    <!--If you know the solution, please feel free to comment.--> 
 
    </body> 
 
</html>

私は、HTML5のコードのこのビットを発見したが、JavaScriptは、このタグを操作するようにする方法がわからない：

<progress id="loader" value="0" max="100"></progress>

の場合あなたはどのように知っているのか知っています。

出典

2017-01-31 Ben Stafford

さて、何をロードしようとし、そしてどのようにしていますか？ AJAXを通して？ – nicovank

「ローダー」の意味を正確に説明してください。 –

ようこそスタックオーバーフロー！ [ask]をお読みください。重要なフレーズ：「検索と研究」と「あなたがそれを自分で解決することを妨げた困難を説明する」図書館を求めているのは話題ではなく、この主題に関する研究を示すものは何も示していないことに注意してください。 –

（例えばdocument.getElementById()を使用して）progress elementへの参照を取得した後、同じ名前の属性にマップ値プロパティを更新します。デモ用のスニペットを参照してください。setInterval()を使用して毎秒関数を呼び出して値を更新します。

以下のコードは、DOMContentLoadedイベントが発生したときにコールバックを追加するために、イベントリスナー（document.addEventListener()を使用）を追加してDOMが準備できるまで待機します。このようにして、準備が整う前に、DOM内の要素（例えば、進行要素）にアクセスしようとしません。

var progress, date, interval; 
 
// wait until DOM has been loaded to perform DOM Manipulations 
 
document.addEventListener('DOMContentLoaded', function() { 
 
    date = Date.now(); //current timestamp since UNIX epoch 
 

 
    //get a reference to the progress element using its id attribute 
 
    progress = document.getElementById('loader'); 
 
    interval = setInterval(updateProgress, 1000); 
 
}); 
 
function updateProgress() { 
 
    console.log('begin updateProgress() - progress.value=', progress.value); 
 
    if (progress.value >= 100) { 
 
     //stop running this function after value reaches 100 (percent) 
 
     clearInterval(interval); 
 
    } 
 
    var newDate = Date.now(); 
 
    var milliseconds = newDate - date; 
 

 
    var seconds = Math.floor(milliseconds/1000); 
 
    loader.value += seconds; 
 
    }

<progress id="loader" value="15" max="100"></progress>

出典

2017-01-31 21:28:42

私はそれが助けたと思う、私はまだそれを試してみる必要があります。ありがとう！ –

また、document.getElementById（）を使用することを考えましたが、その後にメソッドを呼び出して進捗を変更する値を取得する方法がわかりませんでした。 –

ここで私はそのコードをテストしているところへのリンクですが、どういうわけかそれは動作していないようです... –

視覚化を読み込むためにJavaScriptを使用して進行要素を制御するにはどうすればよいですか？

答えて

関連する問題