I'm trying to make a timer that will be auto-submit all the answers when times up. But now, it just shows that the time is expired and it is not redirecting to the final score page.My answers are stored in the database, i dont think it is related. Here is the code :
$(document).ready(function() {
var endTime = localStorage.getItem("endTime");
console.log(endTime);
if (endTime != 'underfined' && endTime != null) {
startCountdownTimer();
//localStorage.removeItem("endTime");
}
});
function setEndTime() {
var currentTime = new Date().getTime();
var endTime = new Date(currentTime + 1*60000);
localStorage.setItem("endTime", endTime);
// alert('Set end time ' + endTime);
startCountdownTimer();
}
function startCountdownTimer() {
// Set the date we're counting down to
var endTime = localStorage.getItem("endTime");
var countDownDate = new Date(endTime).getTime();
// Update the count down every 1 second
var x = setInterval(function() {
// Get today's date and time
var now = new Date().getTime();
// Find the distance between now and the count down date
var distance = countDownDate - now;
// Time calculations for days, hours, minutes and seconds
var days = Math.floor(distance / (1000 * 60 * 60 * 24));
var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((distance % (1000 * 60)) / 1000);
// Display the result in the element with id="demo"
document.getElementById("demo").innerHTML = days + "d " + hours + "h "
+ minutes + "m " + seconds + "s ";
// If the count down is finished,[ I want to make it is redirecting to score page ]
if (distance <= 0) {
clearInterval(x);
setTimeout("document.quiz.submit()",1);
window.location = "http://localhost/quizzer%202/final.php"
}
},1000);
}
Here's a solution with JavaScript's native setTimeout function to auto-submit your form:
// The following ($function() {}) is equivalent to $(document).ready(function() {.
$(function() {
setTimeout(function() {
setTimeout(function() {$('#idOfYourForm').submit()},1);
window.location = "http://localhost/quizzer%202/final.php"
}, 1000 * 60 * 10); // This is the amount of milliseconds your test will last. I set this to ten minutes
});
Also, it doesn't look like the submit command is correct. Since you're using jQuery, I'll show you the jQuery way.
Make an ID for your form
Submit it with $('#idOfYourForm').submit() (one problem was that you put quotation marks around it)
One last thing, when you submit a form, the default action is that you will be redirected, so your last redirect won't do anything. For what you did to work, consider using AJAX. See this post.
Related
I have build a popup with a timer. When the timer ends I want it to extend itself with another day. I have gone so far that it extends itself with 1 day for 1 time but then it quits.
Maybe you have any idea on how to proceed?
Thanks!
//Make countdown
var setInfiniteTime = '{{ $actiepopup->infiniteTime }}';
// Update the count down every 1 second
var x = setInterval(function() {
// Set the date we're counting down to
// Get todays date and time
var currentDate = new Date().getTime();
// get countdown time
var countDownDate = new Date(countDownTimeUntil).getTime();
// console.log('countdowndateBefore' + countDownDate);
// check in infinite time is set
if (setInfiniteTime == 'Yes') {
if (currentDate >= countDownDate) {
// var i;
// for (var i = 0; i < 999999; i++) {
var countDownDate = new Date(countDownTimeUntil).getTime() + 86400000;
// console.log(i);
// }
}
}
// console.log('currentdate' + currentDate);
// console.log('countdowndate' + countDownDate);
// Find the distance between now and the count down date
var distance = countDownDate - currentDate;
// Time calculations for days, hours, minutes and seconds
var days = Math.floor(distance / (1000 * 60 * 60 * 24));
var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((distance % (1000 * 60)) / 1000);
// Display the result in the element with id="countdown"
$("#countdown").text(days + "d " + hours + "h " + minutes + "m " + seconds + "s ");
// If the count down is finished, write some text
if (distance < 0) {
clearInterval(x);
$("#countdown").text("Actie beeïndigd");
}
}, delayInMilliseconds);
Hope you have enough information!
SetInterval()
Also, just an advice, if you use boolean statements, just use true or false since it's way easier to work with
if (setInfiniteTime) {
setInterval(() => {
var countDownDate = new Date(countDownTimeUntil).getTime() + 86400000
}, 86400000)
}
As of now, I've written a script for a timer to countdown to a specific day. The problem is that the moment you refresh the browser, it takes 1 second for it to appear as opposed to it appearing instantly.
I actually did figure out a way to make it appear instantly but I had to repeat the block of code with countDownDate, now, timeDifference, oneDay, days, hours, minutes, seconds and document.getElementById("timer").innerHTML = ...; by placing it directly on top of timer() which's totally inefficient.
In my attempt below, the countdown appears about one second upon the browser refreshing but I want it to appear instantly. My goal here is to create reusable code.
What am I doing wrong and how can I fix it?
Here's the html:
<h1 id="timer"></h1>
Here's the js:
function conversion() {
var countDownDate = new Date("June 1, 2019 24:00:00");
var now = new Date().getTime();
var timeDifference = countDownDate - now;
var oneDay = 1000 * 60 * 60 * 24;
var days = Math.floor(timeDifference / (oneDay));
var hours = Math.floor((timeDifference % (oneDay)) / (1000 * 60 * 60));
var minutes = Math.floor((timeDifference % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((timeDifference % (1000 * 60)) / 1000);
document.getElementById("timer").innerHTML = days + "d " + hours + "h " + minutes + "m " + seconds + "s ";
}
function timerCountdown() {
var timer = setInterval(function() {
conversion();
if(timeDifference < 0) {
clearInterval(timer);
document.getElementById("timer").innerHTML = "Timer's over.";
}
}, 1000);
}
timerCountdown();
Put the setInterval callback into a variable, and both call setInterval with that function and call it immediately on pageload:
function timerCountdown() {
var timer = setInterval(intervalCb, 1000);
function intervalCb() {
conversion();
if(timeDifference < 0) {
clearInterval(timer);
document.getElementById("timer").innerHTML = "Timer's over.";
}
}
intervalCb();
}
timerCountdown();
Just call conversion() immeadiately.
Need a help guyz, my scenario is - In my database i am having a table with a column "created_time" which stores the current system time in HH:MM AM/PM. Now I want as soon as the data entered in that table with current system time then in one of my php page there will be a button named "Start Exam", currently the button will be in "disabled" state, it should be enabled exactly after 1 hour of the time entered in the database along with a countdown timer showing along with the button.
Can anyone help me out with that.
<script>
var countDownDate = new Date("<?php echo $dateFromDB ?>").getTime();
// Update the count down every 1 second
var x = setInterval(function() {
// Get todays date and time
var now = new Date().getTime();
// Find the distance between now an the count down date
var distance = countDownDate - now;
// Time calculations for days, hours, minutes and seconds
var days = Math.floor(distance / (1000 * 60 * 60 * 24));
var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((distance % (1000 * 60)) / 1000);
// Display the result in the element with id="demo"
document.getElementById("demo").innerHTML = days + "d " + hours + "h "
+ minutes + "m " + seconds + "s ";
// If the count down is finished, write some text
if (distance < 0) {
clearInterval(x);
// do something when time is expired
}
}, 1000);
</script>
I have my countdown function (that works).
// Set the date we're counting down to
var countDownDate = new Date("<?= $stop_datejs ?>");
// Update the count down every 1 second
var x = setInterval(function() {
// Get todays date and time
var now = new Date();
// Find the distance between now an the count down date
var distance = countDownDate - now;
// Time calculations for days, hours, minutes and seconds
var days = Math.floor(distance / (1000 * 60 * 60 * 24));
var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((distance % (1000 * 60)) / 1000);
// Output the result in an element with id="demo"
document.getElementById("demo").innerHTML = days + "d " + hours + "h "
+ minutes + "m " + seconds + "s ";
// If the count down is over, write some text
if (distance < 0) {
clearInterval(x);
document.getElementById("demo").innerHTML = "ACTUALIZA LA PÁGINA";
}
}, 1000);
But I need to compare with a php variable $actual_date (server date)
// Get todays date and time
var now = new Date("<?= $actual_date ?>");
That works but stops updating every second. What is the problem?
Thanks
The variable now will not be updated, because the variable will only be written once. So if you load the the webpage the value will be set once but not updated, because the website does not update again (Only your interval).
To provide this you can simply use:
// Get todays date and time
var now = new Date();
This will only use the current time for the new instance of Date. If your <?= $actual_date ?> is not the current timestamp or you want to sync if for all browsers/pc with an incorrect time setting you should have a look at AJAX. Using AJAX is the easiest way to get the updated time from the backend.
jQuery Ajax:
http://api.jquery.com/jquery.ajax/
I'm currently having an issue with what in belive is a memory leak on a custom PHP website that utilises JS SetInterval
My site loads values from an external PHP file every 30 seconds and appends them to a HTML object, a <p> tag in this case.
<script>
$(window).on('load', function() {
setInterval (function foo1(){
$.get("scriptref.php", function( data ) { //receiving the echo from the php data file
$("#ref").html(data); //putting the echoed value directly into the p tag
});
return foo1;
}(), 30000)});
</script>
I also have a countdown timer that counts downwards in seconds to a specified value.
<script>
var timer = document.getElementById("demo");
var snd = new Audio("/assets/audio/horn.wav"); // buffers automatically when created
// Update the count down every 1 second
var x = setInterval(function() {
var jsnextbreach = document.querySelector("#test").innerHTML;
// Set the date we're counting down to
var countDownDate = new Date(jsnextbreach).getTime();
// Get todays date and time
var now = new Date().getTime();
// Find the distance between now an the count down date
var distance = countDownDate - now;
// Time calculations for days, hours, minutes and seconds
var days = Math.floor(distance / (1000 * 60 * 60 * 24));
var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((distance % (1000 * 60)) / 1000);
// Output the result in an element with id="demo"
document.getElementById("demo").innerHTML = days + "d " + hours + "h "
+ minutes + "m " + seconds + "s ";
// If the count down is over, write some text
if (distance < 0) {
document.getElementById("demo").innerHTML = "BREACHED";
}
// If the count down is less than an hour replace demo class to warning.
if (distance < 3600000 ) {
timer.className = "warning" ;
}
if (distance > 3600001 ) {
timer.className = "normal" ;
}
if (distance < 3600000 && distance > 3598000) {
snd.play();
}
},1000);
</script>
My problem is that after the page is displayed for an hour or so i get the "Aw snap, google chrome ran out of memory while trying to display this webpage" error. Looking at the profiler I can see that memory usage increases slowly, however I have no idea where to start looking to find out what is causing this leak.
If anyone is able to advise anything that may be wrong with my code or alternatively how i can start troubleshooting what specific element is causing the leak i would be truly grateful!