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
有効期限切れや他の練習をリダイレクトする際の助けとなりますか?