jQuery Mobile을 사용하는 작은 퀴즈 앱이 있습니다. 0 초에서 1 시간까지 실행하고 싶은 타이머를 만들고 있습니다. 그러나 타이머가 사용자가 특정 페이지를 볼 때, 즉 사용자가 질문 할 때만 실행되도록합니다. 질문에 대답 한 후 애니메이션이있는 다른 페이지가 나타나고 설명이되는 다른 페이지로 이동하기 때문입니다. 내 질문의 헤더 부분에 타이머를 표시하고 있습니다. 나는이 하나 같이 HTML이 :jQuery Mobile을 사용하여 특정 페이지에서 타이머를 실행하는 방법은 무엇입니까?
<div id="q1" data-role="page" data-add-back-btn="true" data-back-btn-text="Home">
<div data-role="header" data-position="fixed" data-tap-toggle="false">
<h1><img src="images/timer.png"> <span id="timer"></span></h1>
</div>
<!--Here comes some other code related to the quiz question-->
</div>
내가 30 개 질문을하고, 모든 사람의 id는 예를 들어 1 분기에 같은 수에 따라 'Q'로 시작합니다. 그리고 모든 사람의 머리말에는 "타이머"라는 이름의 스팬 요소가 있습니다. 여기에 숫자가 표시되기를 원합니다.
var timestamp;
var interval = 1;
var initTimer = true;
var timerEl = $('span#timer');
var qNumber;
var qCorrect;
var qFalse;
function relocateTimer(newEl) {
timerEl.prependTo(newEl);
}
function pad(n) { return ("0" + n).slice(-2); }
Number.prototype.pad = function (len) {
return (new Array(len+1).join("0") + this).slice(-len);
}
$(document).on("pagechange", function(event, ui) {
if (($.mobile.activePage[0].id != "correctGIF") && ($.mobile.activePage[0].id != "wrongGIF")) {
page = $.mobile.activePage[0].id;
if (page.match(/\d+$/) != null) {
qNumber = page.match(/\d+$/)[0];
qCorrect = q.concat(qNumber, 'Correct');
qFalse = q.concat(qNumber, 'False');
}
if (page !== qCorrect || page !== qFalse) {
if (page == "q1") {
timestamp = new Date(0, 0, 0, 0, 0, 0);
if (initTimer) {
setInterval(function() {
timestamp = new Date(timestamp.getTime() + interval * 1000);
document.getElementById('timer').innerHTML = timestamp.getMinutes().pad(2) + ':' + timestamp.getSeconds().pad(2);
}, Math.abs(interval) * 1000);
initTimer = false;
}
}
}
}
위와 같은 코드가 있습니다. 사용자가 quesiton 1 (q1)에있을 때 타이머를 재설정하고 싶습니다. q2에서 q30까지 다른 질문을 할 때 타이머를 표시하고 마지막 왼쪽 시간부터 계속하십시오. 따라서 그 기능은 if (page !== qCorrect || page !== qFalse) 안에 포함되어야합니다. 그러나 그것을 달성하는 방법을 모르겠습니다. 누구나, 어떤 생각?
편집 1 :
내가 말했듯이, 나는 30 질문이 있습니다, 그들은 Q30에 1 분기 사이의 ID를 가지고있다. 타이머를 q1에서 다시 설정하거나 1 시간이 지나면 경고를 표시하고 id 홈이있는 홈 페이지로 이동해야합니다. 따라서 현재 활성 페이지가 q1에서 q30 사이 인 경우에만 코드가 if (page !== qCorrect || page !== qFalse) 안에 입력됩니다. 그래서 타이머를 활성화하면 현재 페이지가 q1인지 확인합니다. 그래서, 내가 대답에서 이해하는 것은 내가이이 같은 것을 할 필요가 있다는 것입니다 :
if (page !== qCorrect || page !== qFalse) {
var curpage = '#'.concat(page);
timestamp = new Date(0, 0, 0, 0, 0, 0);
$(curpage).on("pagebeforeshow", function(event)
{
var element = $(this).find("span#timer");
if (initTimer) {
setInterval(function() {
timestamp = new Date(timestamp.getTime() + interval * 1000);
document.getElementById(element).innerHTML = timestamp.getMinutes().pad(2) + ':' + timestamp.getSeconds().pad(2);
}, Math.abs(interval) * 1000);
initTimer = false;
}
}
}
비록를,이 맞다면 어떤 생각, 어떻게 pagehide 이벤트에 타이머를 중지하는 아무 생각. }});
편집 2 :
당신의 좋은 예 후, 나는 나 자신을 위해 뭔가를 시도했다. 아래 코드가 있지만 작동하지 않는 것 같습니다. 타이머가 멈추지 않는다는 뜻입니다. 각 질문이 끝나면 정답인지 틀린 지 (#correctGIF 및 #wrongGIF 페이지) 표시 한 다음 애니메이션을 보여줍니다. 중요한 점은 해당 페이지에서 타이머가 나타나지 않아야한다는 것입니다. 그러나 다음 질문에 도달 할 때 이전에 왼쪽 시간에서 계속하는 대신 이전에 왼쪽 시간에 3-4 초를 더한 시간부터 계속합니다. 내 애니메이션 (GIF)은 각각 3 초입니다. 어쩌면 타이머가 표시된 시간 동안 활성화되어있을 수도 있습니다.
var timestamp = new Date(0, 0, 0, 0, 0, 0);
var interval = 1;
var initTimer = true;
var timer = null;
function pad(n) { return ("0" + n).slice(-2); }
Number.prototype.pad = function (len) {
return (new Array(len+1).join("0") + this).slice(-len);
}
function startTimer() {
var currentPage = $.mobile.activePage[0].id;
if (timer == null) {
var $timer = $("#"+currentPage +" span#timer");
timer = setInterval(function() { showTimer() }, 1000);
}
}
function stopTimer() {
if (timer !== null) {
clearInterval(timer);
timer = null;
}
}
function showTimer() {
timestamp = new Date(timestamp.getTime() + interval * 1000);
var currentPage = $.mobile.activePage[0].id;
var $timer = $("#"+currentPage +" span#imter");
$timer.html(timestamp.getMinutes().pad(2) + ':' + timestamp.getSeconds().pad(2));
return false;
}
$(document).on("pagechange", function(event, ui) {
$("[id^=q]").on('pagebeforeshow', function() {
var currentPage = $.mobile.activePage[0].id;
console.log("Current page is: " + currentPage);
var correctIndex = currentPage.indexOf('Correct');
var falseIndex = currentPage.indexOf('False');
if (correctIndex > -1 || falseIndex > -1) {
stopTimer();
} else {
startTimer();
}
});
// I have some more code down here, checking which page is currently active and
// acting accordingly. This part is crucial for my app.
});
해결했다) (
하는 stopTimer가 추가, 애니메이션 동안 실행 된 타이머 같아; #correctGIF 및 #wrongGIF가 작동하게했습니다. 감사! 특히 'pagebeforeshow'에서
http://api.jquerymobile.com/category/events/ (pagebeforeshow) :
내가, –
답을 확인 다시 답을 확인 작업 코드로 업데이트되었습니다. –
@ Floradu88 원래 게시물에 새 수정 사항을 작성했습니다. 확인해주세요. –