在特定时间后重定向到另一个页面,并显示倒计时

时间:2020-08-11 06:35:46

标签: javascript html

我正在尝试在特定时间后重定向此按钮。但是倒计时在重定向之前无法开始。我希望在5或10秒后将其重定向。但是请记住window.location应该在HTML元素中。

function myFunction(){
var button=document.getElementById('button');
   button.addEventListener('click', function(){
   var i=0;
   var tt=setInterval(function (){     
   i=i+1;
   var counter=5-i;
   button.innerHTML='You Will Be Redirect After:'+counter;
     if(counter===0){
       clearInterval(tt);
     }
     
   },1000);
   
});};
<button id="button">
<a href="#" class="butstyle" id="button1" onclick="myFunction(window.location='https://google.com')" >Click To Redirect</a>
</button>

3 个答案:

答案 0 :(得分:1)

您可以将var error_pattern = r'ticky: ERROR ([\w\s\']*) \((.+)\)' info_pattern = r'ticky: INFO.* \((.+)\)' user_stat = {} with open('syslog.log','r') as logs: for line in logs.readlines(): if re.search(error_pattern,line): results = re.search(error_pattern, line) user_stat.setdefault(results.group(2),[0,0])[1]+=1 if re.search(info_pattern,line): results = re.search(info_pattern, line) user_stat.setdefault(results.group(1),[0,0])[0]+=1 user_sorted = sorted(user_stat.items()) with open('user_statistics.csv','w') as output: csvfiler = csv.writer(output) csvfiler.writerow(['Username','INFO','ERROR']) for item in user_sorted: onerow = [item[0],item[1][0],item[1][1]] csvfiler.writerow(onerow) 放在函数之外。这样i也会增加。

(如果可能)也不要使用内联事件处理程序-counter仅在您的Redirect条件中满足条件时使用。

将重定向if作为参数传递,并在URL中访问它

演示:

myFunction(url)
var i = 0;

function myFunction(url) {
  var tt = setInterval(function() {
    i = i + 1;
    var counter = 6 - i;
    button.innerHTML = 'You Will Be Redirect After:' + counter;
    if (counter === 0) {
      clearInterval(tt);
      window.location = url //redirect here
    }
  }, 1000);
};

答案 1 :(得分:0)

我会做这样的事情。 5是您要重定向的秒数。

document.getElementById('btn').addEventListener("click", () => {
  let i = 1;
  setInterval(() => {
    if(i == 5){
      window.location.href = "https://google.com"
    }
    document.getElementById('btn').innerHTML = `Redirecting in ${5 - i} seconds`
    i++;
  }, 1000);
});
<button id="btn">
  Click to redirect
</button>

答案 2 :(得分:0)

我将使用“数据”属性采用2020选项,请参见以下示例。属性的命名应具有足够的描述性。让我知道是否有任何问题。

<button id="button" onclick="myFunction(this)" data-secondstoredirect="5" data-urltoredirect="https://google.com">Click To Redirect</button>

<script>
    function myFunction(e) {
        e = e || window.event;
        var $this = e.target || e.srcElement || e;
        if ($this.nodeType == 3) $this = $this.parentNode; // defeat Safari bug, https://stackoverflow.com/questions/1553661/how-to-get-the-onclick-calling-object
        
        var secondstoredirect = $this.getAttribute("data-secondstoredirect"),
            redirectAfterSeconds = (secondstoredirect * 1000),
            urlToRedirect = $this.getAttribute("data-urltoredirect");
        $this.innerHTML = 'You Will Be Redirect After: ' + redirectAfterSeconds;
        var tt = setInterval(function () {
            window.location.href = urlToRedirect;
        }, redirectAfterSeconds);
    }
</script>