JSFiddle - React, Tailwind, and code Playground
by xxxvvvxxx
HTML
<form action="" name="frm">
<input type="hidden" name="param" value="x" />
</form>
<img id="refresh" src="https://parlantiusa.wpenginepowered.com/wp-content/uploads/2018/04/number-two-in-a-circle.png" width="100" height="100"
border="0" onclick="toggle();" style="cursor:pointer;" />
<div id="span_id_sec"></div>
<div id="counter"></div>
JavaScript
var one_image = "https://parlantiusa.wpenginepowered.com/wp-content/uploads/2018/04/number-one-in-a-circle.png";
var two_image = "https://parlantiusa.wpenginepowered.com/wp-content/uploads/2018/04/number-two-in-a-circle.png";
var sec=5, c=1, timer_id = null, view_sec = 0, timer,btnImg = [
one_image , two_image];
const queryString = window.location.search;
const urlParams = new URLSearchParams(queryString);
const param = urlParams.get('param');
function countDown() {
document.querySelector("#counter").innerHTML = c;
if ( sec == c++ ) document.frm.submit();
}
function toggle() {
var obj = document.getElementById("refresh");
var tmp = obj.src.split("/");
var tmp2 = btnImg[0].split("/");
if ( tmp[tmp.length-1]!=tmp2[tmp2.length-1] ) { // On
obj.src = btnImg[0];
document.querySelector("#span_id_sec").style.display = "none";
document.querySelector("#counter").style.display = "block";
c = 1;
timer = setInterval(countDown,1000);
} else { // Off
obj.src = btnImg[1];
document.querySelector("#counter").style.display = "none";
clearInterval(timer);
timer_id = setInterval(viewSec, 1000);
}
}
function viewSec() {
view_sec++;
var min = parseInt(view_sec / 60);
var sec = view_sec % 60;
if(min > 0) {
document.all.span_id_sec.innerHTML = "Load Time " + min + " min " + sec + " sec";
} else {
document.all.span_id_sec.innerHTML = "Load Time " + sec + " sec";
}
}
if ( !param ) {
timer_id = setInterval(viewSec, 1000);
} else {
document.getElementById("refresh").src = btnImg[0];
document.querySelector("#counter").style.display = "block";
c = 1;
timer = setInterval(countDown,1000);
}