Время обратного отсчета HTML не останавливается после указанного времени - PullRequest
Новая
       13

Время обратного отсчета HTML не останавливается после указанного времени

0 голосов
/ 07 октября 2019

Я новичок в кодировании и подготовке времени загрузки для моего блога блоггера, но таймер сценария не останавливается через 10 секунд. В этом скрипте кнопка загрузки должна быть скрыта и отображаться только через 10 секунд. и после щелчка он переходит по ссылке, указанной в URL-адресе страницы, которая работает нормально.

2 проблема 1-я кнопка загрузки не скрывается в течение 10 секунд, и здесь счетчик не останавливается, вот код: 

function getQueryVariable(variable) {
  var query = window.location.search.substring(1);
  var vars = query.split("&");
  for (var i = 0; i < vars.length; i++) {
    var pair = vars[i].split("=");
    if (pair[0] == variable) {
      return pair[1];
    }
  }
  return (false);
}
var time = 10;
var page = getQueryVariable("pms");

function countDown() {
  time--;
  gett("timecount").innerHTML = time;
  if (time == 0) {

  }
}

function gett(id) {
  if (document.getElementById) return document.getElementById(id);
  if (document.all) return document.all.id;
  if (document.layers) return document.layers.id;
  if (window.opera) return window.opera.id;
}

function init() {
  if (gett('timecount')) {
    setInterval(countDown, 1000);
    gett("timecount").innerHTML = time;
  } else {
    setTimeout(init, 10);
  }
}
document.onload = init();
$(document).ready(function() {
  $('.link-out-btn').click(function() {
    window.location = page;
  });
  $('#linkout').text(page);
});

function closeWindow() {
  window.open('', '_parent', '');
  window.close();
}
#button1 {
  background-color: Blue;
  border: none;
  border-radius: 4px;
  color: white;
  padding: 10px 30px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 20px;
  cursor: pointer;
}

#button2 {
  background-color: white;
  border: none;
  border-radius: 4px;
  color: white;
  padding: 7px 14px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 14px;
  cursor: pointer;
}

.footer-credits {
  display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span style="color: blue;"><span style="background-color: white; color: black; font-size: 16px; white-space: pre-wrap;"></span><b>&nbsp;</b></span><span style="color: blue;"><b><span style="color: red; font-size: large;">&nbsp;PLEASE WAITING...
    </span><span id="timecount" style="color: red; font-size: large;"></span><span style="color: red; font-size: large;"> s</span><span style="color: blue;">!&nbsp;</span></b>
</span><br/>
<button class="link-out-btn" id="button1">DOWNLOAD</button>
<button id="button2" onclick="javascript:closeWindow();">.</button>

Ответы [ 2 ]

0 голосов
/ 09 октября 2019

У меня проблема. и отредактировал код, пожалуйста, смотрите .. теперь время идет, и после завершения оно скрывается и изменяется на другой текст, а белая кнопка загрузки счетчика хода не отображается. 

<script>function getQueryVariable(variable) {
  var query = window.location.search.substring(1);
  var vars = query.split("&");
  for (var i = 0; i < vars.length; i++) {
    var pair = vars[i].split("=");
    if (pair[0] == variable) {
          return pair[1];
        }
      }
      return (false);
    }
var time = 15;
var page = getQueryVariable("pms");
var tId;

function countDown() {
  time--;
  $("#time").html(time);
  if (time == 0) {
    clearInterval(tId)
    console.log("DONE");
    $("#wt").html("Your Download Link is Ready");
    $("#button1").show();
  $("#button2").show();
$('.link-out-btn').click(function() {
      window.location = page;
    });
}

if (time !== 0){ 
  $("#button1").hide();
  $("#button2").hide();
  }
}
function init() {
  tId = setInterval(countDown, 1500);
  $("#time").html(time);
  $("#linkout").html(page);
 $("#button1").hide();
  $("#button2").hide();
  }
$(document).ready(function() {
  init();
});

function closeWindow() {
  window.open('', '_parent', '');
  window.close();
}</script>
<style>#button1 {
  background-color: Blue;
  border: none;
  border-radius: 4px;
  color: white;
  padding: 10px 30px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 20px;
  cursor: pointer;
}

#button2 {
  background-color: white;
  border: none;
  border-radius: 4px;
  color: white;
  padding: 7px 14px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 14px;
  cursor: pointer;
}

.footer-credits {
  display: none;
}</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span id="wt" style="color: red; font-size: large;">
&nbsp;Please Wait... <span id="time" style="color: red; font-size: large;"></span> s!</span><span style="color: blue;">&nbsp;</span>


<button class="link-out-btn" id="button1">DOWNLOAD</button>
<button id="button2" onclick="closeWindow();">.</button>
0 голосов
/ 07 октября 2019

Довольно много вопросов.

Изучите упрощенный код ниже

Я не уверен, какой элемент с id = linkout должен быть 

function getQueryVariable(variable) {
  var query = window.location.search.substring(1);
  var vars = query.split("&");
  for (var i = 0; i < vars.length; i++) {
    var pair = vars[i].split("=");
    if (pair[0] == variable) {
      return pair[1];
    }
  }
  return "";
}
var time = 10;
var page = getQueryVariable("pms") || "not passed";
var tId;

function countDown() {
  time--;
  $("#time").html(time);
  if (time == 0) {
    clearInterval(tId)
    console.log("DONE");
    $('.link-out-btn').click(function() {
      window.location = page;
    });
  }
}


function init() {
  tId = setInterval(countDown, 1000);
  $("#time").html(time);
  $("#linkout").html(page);

}
$(document).ready(function() {
  init();
});

function closeWindow() {
  window.open('', '_parent', '');
  window.close();
}
#button1 {
  background-color: Blue;
  border: none;
  border-radius: 4px;
  color: white;
  padding: 10px 30px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 20px;
  cursor: pointer;
}

#button2 {
  background-color: white;
  border: none;
  border-radius: 4px;
  color: white;
  padding: 7px 14px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 14px;
  cursor: pointer;
}

.footer-credits {
  display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<p style="color: red; font-size: large;">&nbsp;PLEASE WAIT...
  <span id="time" style="color: red; font-size: large;"></span>s
  <span style="color: blue;">!&nbsp;</span>
  <button class="link-out-btn" id="button1">DOWNLOAD</button> page: <span id="linkout"></span>
  <button id="button2" onclick="closeWindow();">.</button>
</p>
...