How can I clean interval+message and replace those with a link.
Below code is opening a link after 10 seconds in new window. When I get back to that page, message showing You will redirect in 0 seconds
What I want is, after 10 seconds (after opening link in new tab) the counter and message will replace with a new message and link. i.e. If you are not redirected to the link Click Here to go to the link.
var count = 10;
var counter;
function start(){
counter = setInterval(timer, 1000);
}
function timer() {
var output = document.getElementById("displaySeconds");
output.innerHTML = count;
count--;
if (count < 0) {
clearInterval(counter);
window.open("https://www.google.com");
return;
}
}
window.addEventListener("load", start, false);
<br>You will redirect in <span id="displaySeconds">10</span> seconds.<br />
You can create a separate div with the text when the user is not redirected with the display property set to none (display: none). When the timer expires, you can hide the original text and show the alternative version.
There is a working jsfiddle below. I modified the counter to 4 seconds not to wait too much, you can adjust it how you want.
var count = 4;
var counter;
function start() {
counter = setInterval(timer, 1000);
}
function timer() {
var output = document.getElementById("displaySeconds");
output.innerHTML = count;
count--;
if (count < 0) {
clearInterval(counter);
window.open("https://www.google.com");
let originalText = document.getElementById("original");
let noRedirectText = document.getElementById("noredirect");
originalText.style.display = "none";
noRedirectText.style.display = "block";
}
}
window.addEventListener("load", start, false);
<div>
<div id="original">
You will be redirected in <span id="displaySeconds">4</span> seconds.
</div>
<div style="display: none" id="noredirect">
If you are not redirected click here to go to the link.
</div>
</div>
Cheers!
Just add code to the interval function that hides the first message and shows the other.
var count = 5;
var output = document.getElementById("displaySeconds");
var counter = null;
function timer() {
output.textContent = count;
count--;
if (count < 0) {
clearInterval(counter);
window.open("https://www.google.com");
// Hide the first message and show the second:
document.querySelector(".redirect1").classList.add("hidden");
document.querySelector(".redirect2").classList.remove("hidden");
}
}
addEventListener("load", function(){
couner = setInterval(timer, 1000);
});
.hidden { display:none; }
<div class="redirect1">You will redirect in <span id="displaySeconds">5</span> seconds.</div>
<!-- The following is initially hidden because of the CSS class -->
<div class="redirect2 hidden">If you aren't redirected, click here</div>
This function replaces the current text with your required text if the redirect was not able to take place.
var count = 10;
var counter = setInterval(timer, 1000);
var output = document.getElementById("displaySeconds");
var container = document.getElementById("container");
function timer() {
count--;
if (count === 0) {
stopTimer();
}
output.innerHTML = count;
};
function stopTimer() {
clearInterval(counter);
window.open("https://www.google.com");
container.innerHTML = ' If you are not redirected to the link Click Here to go to the link.';
}
<div id="container">
You will redirect in <span id="displaySeconds">10</span> seconds.
</div>
Related
Is my code wrong or is there a more effective way to do what i posted? I don't know how to do it better.
In the code there is a timer that restarts every time when it reaches 0.
A dynamic reading on the div.counter with the condition 'if the counter reaches 0s it must also press the button autonomously.
<body>
<h1>Callback</h1>
<div id="timer"></div>
<button id="btn">Button</button>
<div id="text"></div>
</body>
let timer = document.querySelector("#timer");
let text = document.getElementById('text')
let btn = document.getElementById('btn')
var counter = 3;
function myFn() {
counter--
if (counter === -1) {
counter = 3
}
timer.innerText = counter
}
var myTimer = setInterval(myFn, 1000);
setInterval(() => {
time = timer.textContent
console.log(time)
if (time === '0') {
btn.click()
}
}, 1000);
btn.onclick = function () {
text.innerHTML += 'clicked' + '<br>'
}
So far this is what I have tried. I cant seem to figure out how to reset the img src to the first image in the folder after the user does not click on a button for 5 seconds.
HTML
<div class="slider">
<div class="img-box">
<img src="images/a.jpg" class="slider-img">
</div>
<button id="first" class="btn" onclick="prev()">Prev</button>
<button id="second" class="btn" onclick="next()">Next</button>
</div>
JavaScript
var slider_img = document.querySelector('.slider-img');
var images = ['a.jpg', 'b.jpg', 'c.jpg', 'd.jpg', 'e.jpg'];
var i = 0;
function prev(){
if(i <= 0) i = images.length;
i--;
return setImg();
}
function next(){
if(i >= images.length-1) i = -1;
i++;
return setImg();
}
function setImg(){
return slider_img.setAttribute('src', "images/"+images[i]);
}
var btnDwn = document.onmousedown
function idk(){
return slider_img.setAttribute('src', "images/"+images[0]);
}
if(btnDwn == false){
setInterval(idk(),5000)
}
I'll define "inactivity/idleness" to if user stops moving mouse AND stops clicking
I do this by making a function that every time you call it, a timeout is set(and the previous timeout deleted) so that the content INSIDE the timeout ONLY activates AFTER 5 seconds of NOT BEING TRIGGERED
Do note that to be idle, stop using your mouse and do not click the functions for about 5 seconds and see it in action :D
var slider_img = document.querySelector('.slider-img');
var images = ['a.jpg', 'b.jpg', 'c.jpg', 'd.jpg', 'e.jpg'];
var i = 0; var timeout=0;
function prev(){
if(i <= 0) i = images.length;
i--; resetImg();
return setImg();
}
function next(){
if(i >= images.length-1) i = -1;
i++; resetImg();
return setImg();
}
function setImg(){
return slider_img.setAttribute('src', "images/"+images[i]);
}
function resetImg(){
clearTimeout(timeout);
timeout=setTimeout(()=>{slider_img.setAttribute('src', "images/"+images[0]);},5000);
}
//every time you click those buttons, you are 'active', now being active would also count as moving your mouse
document.body.addEventListener('mousemove',resetImg)
I am using this timer with a page loader. The problem is if a page finishes loading before the timer is up, then the next time you load the page, the timer starts where it left off the last time the page executed. I need to make sure the count variable is set to zero on page re-load. Thanks in advance
<script>
var myVar=setInterval(function(){myTimer()},1);
var count = 0;
function myTimer() {
if(count < 100) {
$('.progress').css('width', count + "%");
count += 0.025;
document.getElementById("demo").innerHTML = Math.round(count) +"%";
// code to do when loading
} else if(count > 100) {
// code to do after loading
count = 0;
}
}
</script>
You can wrap your code into a function which will reset the counter and start it again:
<script>
var myVar;
var count;
function restartTimer() {
count = 0;
clearInterval(myVar);
myVar = setInterval(function(){ myTimer() }, 1);
}
function myTimer() {
if(count < 100) {
$('.progress').css('width', count + "%");
count += 0.025;
document.getElementById("demo").innerHTML = Math.round(count) +"%";
// code to do when loading
} else if(count > 100) {
// code to do after loading
count = 0;
}
}
</script>
And now you just need to call restartTimer function wherever you want:
resetTimer();
In your case, you need to call it before every call to PHP page.
i have this code that counts down and the should open captcha:
And i cant find the problem!Please help!
<script>
var seconds_left = 2;
var interval = setInterval(function() {
document.getElementById('timer_div').innerHTML = --seconds_left;
if (seconds_left <= 0)
{
document.getElementById('timer_div').innerHTML = "<div class='g-recaptcha' data-sitekey='mykey' style='transform:scale(0.77);-webkit-transform:scale(0.77);transform-origin:0 0;-webkit-transform-origin:0 0;'></div>";
clearInterval(interval);
}
}, 1000);
</script>
<div id="timer_div"></div>
You can put the reCaptcha div in the HTML from the beginning, but make it visible. Then from javascript, when 2 seconds pass, make the div visible. Like the code below:
HTML:
<div id="timer_div"></div>
<div id="captcha" class='g-recaptcha' data-sitekey='mykey' style='display:none;transform:scale(0.77);-webkit-transform:scale(0.77);transform-origin:0 0;-webkit-transform-origin:0 0;'>
RECAPTCHA
</div>
JavaScript:
var seconds_left = 2;
var timerDiv = document.getElementById('timer_div');
var captcha = document.getElementById('captcha');
timerDiv.innerHTML = seconds_left;
var interval = setInterval(function() {
timerDiv.innerHTML = seconds_left;
seconds_left--;
if (seconds_left < 0)
{
timerDiv.style.display = "none";
captcha.style.display = "block";
clearInterval(interval);
}
}, 1000);
You can test it in this JSFiddle.
want to show a div after click on a button and then the time start and count from 10 to 0 .
my probelm is i don't know how to start count ?
javascript :
<script>
$("button").click(function() {
$('div#test').hide().delay(200).fadeIn('slow');
});
</script>
button :
<div id="test" style="display:none;">click</div>
html :
<div id="test" style="display:none;">here you are !</div>
You can use setInterval for counting.
var count = 10;
var temp = setInterval(function(){
if(count < 0) {
clearInterval(temp);
}
// show count
count--;
}, 1000);
You can use either setTimeout() or setInterval() to get it working:
Below is how I did it:
$(function() {
$("button").click(function() {
function counter() {
var i = 10;
$("body").append('<div style="border:1px solid red;">Div Created on the Fly</div>')
function showDIV() {
if (i < 0)
return
setTimeout(showDIV, 1000);
$("span").text(i);
i--;
}
showDIV();
}
counter(10);
});
});
DEMO
var count = 15;
var timerID = 0;
$("button").click(function() {
$('div#test').hide().delay(200).fadeIn('slow', function() {
timerID = setInterval(function() {countDown();}, 1000); // count every 1000 ms, change this to whatever you want
});
$("#wait").show(); // or you could fade this in if you want. Maybe that's what you intended with #test.
});
function countDown() {
count--;
$("#count").text(count);
// do whatever you want to do with your count
if (count <= 0) {
clearInterval(timerID);
}
}
HTML:
<p id="wait" style="display:none">Please wait<span id="count">15</span> seconds...</p>
Assuming you wanted to start the count down after the fadeIn. Otherwise, just pull that piece out and setInterval after the fadeIn line which will start the countdown when the button is first clicked.