Develop Reference

Update page 10 second

I don't know how to say it right, sorry in advance.
I want to make a page of the site js that the page can be updated every 10 seconds, does anyone have an example?
**that the user can refresh the page every 10 seconds**
I want my user on my site to be able to refresh the page once every 10 seconds

You can make button that will show after 10 seconds so user can but also don't have to update.
setTimeout(function(){
let button = document.querySelector('button');
button.style.display = "block";
button.onclick = () => window.location.reload();
}, 10000);
window.onkeydown = (e) => {
if(e.key === 'F5'){
e.preventDefault()
}
}
button {
display:none;
}
<button>Click me</button>

EDIT:
It is impossible to prevent the user from reloading the page, however it is possible to ask if they really want to leave, using this code below, if it after 10 seconds it will not ask if they want to leave, however if it has been less than 10 seconds, it will ask if they want to leave.
var r = 0;
window.onbeforeunload = function() {
if(r == 1) {
return "Are you sure you want to leave?";
}
}
setTimeout(function(){
r = 0;
}, 10000);

Can you tell me why this alert does not work?

Can you tell me why this alert does not work?
my js codes:
var character =
document.getElementById("character");
var block = document.getElementById("block");
function jump() {
if (character.classList != "animate") {
character.classList.add("animate");
}
setTimeout(function () {
character.classList.remove("animate");
}, 500);
var checkDead = setlnterval(function () {
var characterTop =
parseInt(window.getComputedStyle(character)
.getPropertyValue("top"));
var blockLeft =
parseInt(window.getComputedStyle(block)
.getPropertyValue("left"));
here is the if part (my problem): i want to know why it dose not work?
if (blockLeft<20 && blockLeft>0 && characterTop>=130) {
block.style.animation = "none";
block.style.display = "none";
alert("U Lose!");
}
}, 10);
}

If there will be two alert boxes when you run the code, then check the "prevent this page from creating additional dialog" checkbox. Refresh the page again and you won't get the alert box ever again.
Solution is that you need to close that webpage and reopen it again in the browser (don't need to close the entire browser). I am assuming you are using Chrome. Internet Explorer or Firefox don't have this checkbox feature.

Timer in HTML button (as a resend button to submit form)

I'm sorry if I have bad in english. I hope you can understand what I mean.
Okay, as simply, I'm going to create a resend button with timer.
This button will be a resend button to submit form. If user access the page, the button doesn't start the timer. When user fill the form and submit it, the timer start running, change the text of button like "You can send after {numofsec} second", and add "disabled" class.
When it reach 0 sec, the button will remove "disabled" class and user could resubmit form.
My problem: This button always run timer when user access the page.
Here it is my code:
let x;
let sec = localStorage.getItem("sec") ? parseInt(localStorage.getItem("sec")) : 10;
let interval = null;
function timer() {
localStorage.setItem("sec", sec);
if (sec > 0) {
localStorage.setItem("timer_status", "started")
$("#btn_resend").prop('disabled', true)
$("#btn_resend").html("Please wait for "+sec+" second");
sec--
} else if (sec === 0) {
localStorage.clear()
localStorage.setItem("timer_status", "stopped")
sec = 10;
$("#btn_resend").prop('disabled', false)
$("#btn_resend").html("Resend");
window.clearInterval(interval)
}
}
window.onload = function () {
<?php if (session()->get("timer_status") == "started") { ?>
x = "started"
localStorage.setItem("timer_status", "started");
<?php } else if (session()->get("timer_status") == "stopped") { ?>
x = "stopped"
<?php } ?>
if (x === "started") {
interval = window.setInterval(timer, 1000);
} else {
window.clearInterval(interval);
}
}
There is a session that sent from Controller. I'm using CodeIgniter 4.
session()->set("timer_status", "started");
My problem: This button always run timer when user access the page.
I have already tried and I got confused for this logic.
I'm new at javascript language. Hope you all can help this problem. Thankyou.

Leaving a page - message appears twice

I've added this Javascript to my website which detects when the user navigates away from the page, but I only want a warning to appear if the navigator is offline AND one of my elements contains the word "unsaved":
window.thisPage = window.thisPage || {};
window.thisPage.closeEditorWarning = function (event) {
if (navigator.onLine===false) {
// See if any fields need saving...
for (i = 1; i <= 500; i++) {
try {
ToSave = document.getElementById("Q" + i).innerHTML;
if (ToSave.indexOf("unsaved")!=-1) {
return "You are currently offline and some of your responses are not yet saved.\r\n\r\nIf you want to save the changes you've made, choose to 'Stay on this Page' and then reconnect to the internet and any unsaved responses will save automatically.";
}
}
catch(err) { }
// If got this far, nothing needs saving anyway...
}
}
return undefined;
};
window.onbeforeunload = window.thisPage.closeEditorWarning;
The code works fine except; if the message pops up the first time and I choose "Stay on this page", then try to navigate away again and the second time click "Leave this page" - rather than navigating away it displays the message again but I can't work out why.

Try returning true from your catch, so the unload will execute. You can also remove the return undefined; from the end.
This works for me, is this what you're after?
This works for me in Firefox.
Fiddle: http://jsfiddle.net/518myq0j/3/ (clicking 'Run' triggers the onbeforeunload)
Updated JavaScript code:
window.thisPage = window.thisPage || {};
window.thisPage.closeEditorWarning = function (event) {
if (navigator.onLine === false) {
// See if any fields need saving...
for (i = 1; i <= 5; i++) {
try {
var ToSave = document.getElementById("Q" + i).innerHTML;
if (ToSave.indexOf("unsaved") != -1) {
return "You are currently offline and some of your responses are not yet saved.\r\n\r\nIf you want to save the changes you've made, choose to 'Stay on this Page' and then reconnect to the internet and any unsaved responses will save automatically.";
}
} catch (err) {
return true;
}
}
}
};
window.onbeforeunload = window.thisPage.closeEditorWarning;

Showing warning with timeout when opening external links

I want that when a user clicks on any external link (identified by either particular id or class) on my site then he should get a popup with a counter of 10 seconds, after 10 seconds the popup should close and the user should be able to access the external URL. How can this be done? I'm able to show a warning like below but I don't know how to add timeout to it, also this is a confirm box, not a popup where I can add some div and more stuff for user to see until the counter stops.
$(document).ready(function(){
var root = new RegExp(location.host);
$('a').each(function(){
if(root.test($(this).attr('href'))){
$(this).addClass('local');
}
else{
// a link that does not contain the current host
var url = $(this).attr('href');
if(url.length > 1)
{
$(this).addClass('external');
}
}
});
$('a.external').live('click', function(e){
e.preventDefault();
var answer = confirm("You are about to leave the website and view the content of an external website. We cannot be held responsible for the content of external websites.");
if (answer){
window.location = $(this).attr('href');
}
});
});
PS: Is there any free plugin for this?

I've put together a little demo to help you out. First thing to be aware of is your going to need to make use of the setTimeout function in JavaScript. Secondly, the confirmation boxes and alert windows will not give you the flexibility you need. So here's my HTML first I show a simple link and then created a popup div that will be hidden from the users view.
<a href='http://www.google.com'>Google</a>
<div id='popUp' style='display:none; border:1px solid black;'>
<span>You will be redirected in</span>
<span class='counter'>10</span>
<span>Seconds</span>
<button class='cancel'>Cancel</button>
</div>
Next I created an object that controls how the popup is displayed, and related events are handled within your popup. This mostly is done to keep my popup code in one place and all events centrally located within the object.
$('a').live('click', function(e){
e.preventDefault();
popUp.start(this);
});
$('.cancel').click(function()
{
popUp.cancel();
});
var popUp = (function()
{
var count = 10; //number of seconds to pause
var cancelled = false;
var start = function(caller)
{
$('#popUp').show();
timer(caller);
};
var timer = function(caller)
{
if(cancelled != true)
{
if(count == 0)
{
finished(caller);
}
else
{
count--;
$('.counter').html(count);
setTimeout(function()
{
timer(caller);
}, 1000);
}
}
};
var cancel = function()
{
cancelled = true;
$('#popUp').hide();
}
var finished = function(caller)
{
alert('Open window to ' + caller.href);
};
return {
start : start,
cancel: cancel
};
}());
If you run, you will see the popup is displayed and the countdown is properly counting down. There's still some tweaks of course that it needs, but you should be able to see the overall idea of whats being accomplished. Hope it helps!
JS Fiddle Sample: http://jsfiddle.net/u39cV/

You cannot using a confirm native dialog box as this kind of dialog, as alert(), is blocking all script execution. You have to use a cutomized dialog box non-blocking.
You can use for example: jquery UI dialog
Even this has modal option, this is not UI blocking.

Consdier using the javascript setTimeout function to execute an action after a given delay
if (answer){
setTimeOut(function(){
//action executed after the delay
window.location = $(this).attr('href');
}, 10000); //delay in ms
}