2016-05-26 8 views
0

Ruby on Railsアプリケーションを構築しています。さまざまな時間(30分)のトレーニングをユーザーが作成できるようにしています。運動はhave_many練習をhas_many。各運動は持続時間(すなわち、30秒)を有する。私は、タイマーがなくなるまで、エクササイズのランダムな配列をループするようにします。Ruby on Railsでイベントをトリガーするjsカウントダウンタイマーを取得するには

タイマー(JSで)が00:00に達したときにトリガーするイベントを取得しようとしています。そのため、エクササイズが0秒に達すると、新しいエクササイズがレンダリングされ、対応する新しいカウントダウンになります。 workout.duration = 0の場合、root_pathにリダイレクトします。

私はここに、基本的なアプリを持っている:​​

このすべてがWorkoutsControllerから呼び出されると、ワークアウト#ショービューで行われています。

これはショービューでルビー:

<% @exercises.each do |ex| %> 
    <%= ex.name %> <br><br> <div id="exclock"> <span class="hours"></span> : 
    <span class="minutes"></span> : 
    <span class="seconds"></span> 

これはクロックを実行JSです:ワークアウトコントローラで

<script> 
function getTimeRemaining(endtime) { 
    var t = Date.parse(endtime) - Date.parse(new Date()); 
    var seconds = Math.floor((t/1000) % 60); 
    var minutes = Math.floor((t/1000/60) % 60); 
    var hours = Math.floor((t/(1000 * 60 * 60)) % 24); 
    return { 
    'total': t, 
    'hours': hours, 
    'minutes': minutes, 
    'seconds': seconds 
    }; 
} 

function initializeClock(id, endtime) { 
    var clock = document.getElementById(id); 
    var hoursSpan = clock.querySelector('.hours'); 
    var minutesSpan = clock.querySelector('.minutes'); 
    var secondsSpan = clock.querySelector('.seconds'); 

    function updateClock() { 
    var t = getTimeRemaining(endtime); 

    hoursSpan.innerHTML = ('0' + t.hours).slice(-2); 
    minutesSpan.innerHTML = ('0' + t.minutes).slice(-2); 
    secondsSpan.innerHTML = ('0' + t.seconds).slice(-2); 

    if (t.total <= 0) { 
     clearInterval(timeinterval); 
    } 
    } 

    updateClock(); 
    var timeinterval = setInterval(updateClock, 1000); 
} 


var timeInSeconds = <% @exercises.each do |ex| %> 
    <%= ex.duration %>; <% end %> 
var currentTime = Date.parse(new Date()); 
var deadline = new Date(currentTime + timeInSeconds*1000); 
initializeClock('exclock', deadline); 
</script> 

def show 
     @exercises = Exercise.limit(1).order("RANDOM()") 

    end 

私は思いますjsで私はちょうどいくつかを含める必要があります

until: +Exercise.duration == 0, onExpiry: nextEx 

有効期限切れや他の練習をリダイレクトする際の助けとなりますか?

答えて

0

あなたはwindow.locationに新しいURLを割り当てることで、JavaScriptを使用してページをリダイレクトすることができます

window.location = "http://www.yoururl.com/path-to-exercise"; 

あなたのタイマーが切れるとき、あなただけのこの操作を行うことができます次の演習のためにページ全体をリロードするために探している場合。

次の練習問題を読み込むためにページ上の要素を置き換える場合は、place it into the DOMまたはreplace an existing elementを入力して、タイマーの終了時にfire off an XHRを入力してください。

関連する問題