いいえの進捗バーを作成する方法。視聴した動画の数

Question

いいえの進行状況バーを作成したいと思います。視聴された動画のうち私は5ビデオを持っています - video1.mp4、video2.mp4、video3.mp4、video4.mp4、video5.mp4。実際にはコース進行のバーになります。 5つのビデオのリンクは - mywebsite.com/video1.mp4のようです。助けてください

Answer 1

これはjQueryを使って行う方法です。基本的に、videos_watched変数がインクリメントされたときに調整されるスプライトを作成します。

CSS

.video_link { 
    cursor: pointer; 
} 

#progress_sprite { /* use a sprite with different progress levels. */} 

HTML

<p class="video_link" id="video_01"> 
    Watch Video 1 
</p> 
<p class="video_link" id="video_02"> 
    Watch Video 2 
</p> 
<p class="video_link" id="video_03"> 
    Watch Video 3 
</p> 
<p class="video_link" id="video_04"> 
    Watch Video 4 
</p> 
<div id="progress_sprite"></div> 
<p id="videos_watched"> 
    Videos Watched: <span>0</span> 
</p> 

JS

var videos_watched = 0; 

    $(".video_link").on("click", function() { 
    if (!($(this).hasClass("viewed"))) { 
     $(this).addClass("viewed"); 
     videos_watched = videos_watched + 1; 
     update_sprite(); 
     //This was added to show progress on fiddle. Not really 
     //needed for progress bar. 
     $("#videos_watched span").html(videos_watched); 
    } 
    }); 

    function update_sprite() { 
    switch (videos_watched) { 
     case 0: 
     $("#progress_sprite").css('backgroundPosition', '50% 0px'); 
     break; 
     case 1: 
     $("#progress_sprite").css('backgroundPosition', '50% -57px'); 
     break; 
     case 2: 
     $("#progress_sprite").css('backgroundPosition', '50% -114px'); 
     break; 
     case 3: 
     $("#progress_sprite").css('backgroundPosition', '50% -171px'); 
     break; 
     case 4: 
     $("#progress_sprite").css('backgroundPosition', '50% -228px'); 
     break; 
     default: 
     break; 
    } 
    } 

フィドル

https://jsfiddle.net/6jr3qjaa/1/