I want a count down timer of 60 seconds after which the page refreshes
edit: i need a visible count down on the webpage. but obviously the page cant refresh each second for the timer to change
Here is a simple recursive countdown function:
function countdown(time,endcallback,stepcallback)
{
if (time == 0) endcallback();
else {
time--;
stepcallback(time);
window.setTimeout(function() {
countdown(time,callback);
},1000);
}
}
countdown(60,function() {
window.location.reload();
},function(time) {
// display counter on page or do something else
});
EDIT: a bit more sexy this way :)
Is using <META HTTP-EQUIV="refresh" CONTENT="60"/> in the <head> section of your html document sufficient? You can read more about it here
Use a meta refresh: http://en.wikipedia.org/wiki/Meta_refresh
Be warned that this is a bit of a hacky method, and there is probably a more elegant solution, depending on what you are trying to achieve.
<div id='countdown'>60</div>
$(function() {
var cd = $('#countdown');
var c = parseInt(cd.text(),10);
var interv = setInterval(function() {
c--;
cd.html(c);
if (c == 0) {
window.location.reload(false);
clearInterval(interv);
}
}, 1000);
});
sorry didn't notice you need a visible counter at first time.. so i edited answer
working demo
Use the following code:
http://javascript.internet.com/time-date/countdown-timer.html
You only need to modify the following
if((mins == 0) && (secs == 0)) {
window.alert("Time is up. Press OK to continue."); // change timeout message as required
// window.location = "yourpage.htm" // redirects to specified page once timer ends and ok button is pressed
}
to something like:
if((mins == 0) && (secs == 0)) {
window.location.reload();
}
Related
So, I want to check every 15 sec on some website if some words have been deleted.
I have done this:
window.setInterval(myFunction, 15000)
function myFunction()
{
//Check that "words" are not on web anymore
if ((document.documentElement.textContent || document.documentElement.innerText).indexOf('words') > -1)
{
alert("They still here");
}
else
{
alert("They are gone");
}
location.reload();
}
But becaue of the location.reload(); they script can only run once.
What do I do?
call timer in window.load and remove reloading of location.
window.onload = function() {window.setInterval(myFunction, 15000)};
function myFunction()
{
//Check that "words" are not on web anymore
if ((document.documentElement.textContent || document.documentElement.innerText).indexOf('words') < -1)
{
alert("They are gone");
}
}
I think tampermonkey is what you are looking for https://chrome.google.com/webstore/detail/tampermonkey/dhdgffkkebhmkfjojejmpbldmpobfkfo
I'm running a JS code from a bookmark (on opera browser). I created an endless timer countdown which resfreshes my page every 10secs. It just fine in my .html file. But when i'm using it like a bookmark in any other site it works only 1 time and then it stops.
How could it be able to run after the refresh?
javascript:
var timeInSecs;
var ticker;
function startTimer(secs) {
timeInSecs = parseInt(secs);
ticker = setInterval("tick()", 1000);
}
function tick( ) {
var secs = timeInSecs;
if (secs > 0) {
timeInSecs--;
}
else {
location.assign(location.href.split('#')[0]);
clearInterval(ticker);
startTimer(1*10);
}
}
startTimer(1*10);
You don't need an interval. As soon as you reload the page, the interval is cleared. As soon as the page is reloaded, your code executes again.
Try this instead:
document.body.innerHTML = Math.random(); // Demonstrates the page reload
setTimeout(() => document.location.reload(), 1000);
I am using the below jQuery to refresh my datatable. I know there is a better way to do this, but for the time being, this is what is working for me:
var idleTime = 0;
var idleInterval = setInterval(funcion(){
idleTime = idleTime + 1;
if (idleTime > 1)
{
$('#example1').DataTable().state.clear();
window.location.reload();
}
}, 60000);
$(this).mousemove(function(e){
idleTime = 0;
});
$(this).keypress(function(e){
idleTime = 0;
});
Using the above code, after about 1 minute, the page will clear the datatable and reload the page.
Is there something that I can add to the code that will look at how many times it has refreshed due to inactivity? And then after 120 refreshes, log the user out.
I am not sure if this can be done being that the page keeps refreshing.
You need a way to keep track of the number of reloads between reloads. Since you reload the entire page I can quickly think of two ways:
1) use cookies to keep the number and reset the cookie properly if there is activity
2) use parameters to send the value to the server and let the server insert it back into your javascript
That is if you want to handle this in javascript.
Normally you handle a logout in the server side session. Then you have to make sure your auto reload is not identified by the server as "activity".
Hope this helps...
I have well like to offer you a simple solution, but as long as you use jquery already better enjoy it with using ajax.
var idleTime = 0;
var idleInterval = setInterval(funcion(){
idleTime = idleTime + 1;
if (idleTime > 1)
{
var url = window.location.href + 'page_table.php';
//you should specify a page_table.php that return only the table.
$.get(url, function( data ) {
$('#example1').html(data); //<----- refresh only the zone with the id : #example
$('#example1').DataTable(); // <---- important : set the element as DataTable.
});
}
}, 60000);
$(this).mousemove(function(e){
idleTime = 0;
});
$(this).keypress(function(e){
idleTime = 0;
});
the idea is to refresh only the part of table.
Let's keep the current code that you have if it works for you, and let's not depend on localStorage, or additional tricks that might or might not work depending on the browser. Let's store the information in the url.
Like this:
var idleTime = 0,
refreshCount = window.location.hash ?
Number(window.location.hash.replace("#", '')) : 0; //get current counter
var idleInterval = setInterval(function(){
//...all your existent code
/*let's rewrite the url with our new counter, so now when the
page is reloaded and th script is executed it gets the new value */
if(refreshCount == 60) {
//do your magic it has been refreshed 60 times
} else {
window.location = window.location.href.replace('#' + refreshCount, '')
+ '#' + (refreshCount+1);
window.location.reload();
}
}, 1000);
Hope this helps.
Cheers.
I'm trying to make a simple flip-card/memory match (like from super mario brothers 3) game in HTML/Javascript and am having a slight issue with the setInterval command.
Here is a link to the full code: http://jsfiddle.net/msfZj/
Here is the main issue/main logic of it:
if(click == 2) //denotes two cards being clicked
{
if(flippedArray[1].src === flippedArray[0].src) // if click 1 == click 2 then refer to function 'delayMatch' which sets click 1 and 2 cards to not be displayed
{
window.setInterval(function() { delayMatch() }, 500);
console.log("EQUAL");
}
else
{
window.setInterval(function() { delayNoMatch() }, 500); // if click 1 != click 2 then display card.png
console.log("NOT EQUAL");
}
function delayMatch() //function for matching pairs
{
flippedArray[0].style = "display:none;";
flippedArray[1].style = "display:none;";
}
function delayNoMatch() //function for non-matching pairs
{
flippedArray[0].src = "card.png";
flippedArray[1].src = "card.png";
}
click = 0; // when clicked two cards set click back to zero
}
The first two cards I click on always work: but from that point onward the setInterval keeps running the function over and over again in an endless loop every 500ms.
I'd be extremely appreciative if anybody can point my in the right direction on how I can do this properly.
Thank you very much for your time.
It looks like you need setTimeout, which only runs once?
window.setTimeout(function() { delayMatch() }, 500);
Otherwise, you need to clear the interval with clearInterval(i), but first set "i" using the return value of setInterval:
var i = window.setInterval(function() { delayMatch() }, 500);
Here's a demo (I JQuerified it a bit for JSFiddle).
You're going to want to go with setTimeout() instead of setInterval()
A handy function when you use setTimeout is clearTimeout. Say you want to set a timer, but maybe want a button to cancel
var timer = setTimeout(fn,1000);
//later maybe
clearTimeout(timer);
I have a timer script which scrolls up and down and repositions the page to the top every 10 seconds and back down every 5 seconds. My problem is I can't get it to scroll all the way down.
<script language="JavaScript" type="text/javascript">
// Configure refresh interval (in seconds)
var refreshinterval=300
// Shall the coundown be displayed inside your status bar? Say "yes" or "no" below:
var displaycountdown="yes"
var starttime
var nowtime
var reloadseconds=0
var secondssinceloaded=0
function starttime() {
starttime=new Date()
starttime=starttime.getTime()
countdown()
}
function countdown() {
nowtime= new Date()
nowtime=nowtime.getTime()
secondssinceloaded=(nowtime-starttime)/1000
reloadseconds=Math.round(refreshinterval-secondssinceloaded)
if (refreshinterval>=secondssinceloaded) {
var timer=setTimeout("countdown()",1000)
if (displaycountdown=="yes") {
window.status="Page refreshing in "+reloadseconds+ " seconds"
}
if (timer % 5 == 0) {
window.scrollTo(0,1200);
}
if (timer % 10 == 0) {
window.scrollTo(0,0);
}
}
else {
clearTimeout(timer)
window.location.reload(true)
}
}
window.onload=starttime
</script>
How do i get it to scroll all the way down or page down?
thanks in advance
I think this is much simpler and achieves what you're looking for:
function starttime() {
setTimeout('scrollDown()',5000);
}
function scrollDown() {
window.scrollto(0, document.body.scrollHeight);
setTimeout('scrollUp()',5000);
}
function scrollUp() {
window.scrollto(0,0);
setTimeout('scrollDown()',5000);
}
window.onload = starttime
The reason your page wouldn't scroll all the way down is probably with your pixel value of 1200. This scrolls the page down 1200px, which may or may not be all the way. Heck, your page could be 10000px high or more. Try setting a limit that you can safely know you're page will never surpass, like 20000, and it should scroll all the way to the bottom. :D