javascript - jQuery - 返回按钮或等待，您会自动重定向 - 高级返回按钮

Question

我使用这个按钮有一段时间了:

<input type="button" class="button" onclick="javascript:history.go(-1)" value="Go back to previus page" />

我想为其添加功能，但我不知道，因为我是 javascript 新手，所以请给我一些提示甚至解决方案。

我希望您能在 10 秒内自动从该按钮所在的页面重定向(计时器应显示在实际按钮上)。或者，如果您点击，您会立即重定向？

有什么想法如何使用 jquery 做到这一点吗？

Answer 1

不需要 jQuery。将其放入您的标题中。它将在 10000 毫秒或 10 秒后调用 history.go(-1)。

<script type="text/javascript">
      setTimeout( function() {
           history.go(-1);
      }), 10000);
</script>

我刚刚注意到你想要在按钮上有一个计时器。这可以使用一点 jQuery。当您执行此操作时，您应该将内联 javascript onclick="javascript:..." 移至脚本主体。内联 JavaScript 已经失宠，主要是因为它是一种糟糕的做事方式。

<script type="text/javascript">
      $( function() {
             // While you are at it, remove do the click handler here:
             $(document).on('click', '.button', function() {
                 history.go(-1);
             })

             // Get button name, init timer value
             var buttonName = $('.button').val();
             var time = 10;

             function updateButton() {
                  // Set button name to "Go back to previus page (X)"
                  $('.button').val(buttonName+' ('+time+')');

                  if(time <= 0) {
                       // If we reached 0, redirect
                       history.go(-1);
                  } else {
                       //decrement time counter  
                       time--;
                       // otherwise, wait a second and do it again
                       setTimeout(updateButton, 1000);
                  }
             }

             // Start the counter
             updateButton();
      });
</script>

您也可以使用 setInterval()，但这可以让您更轻松地在时间 0 设置按钮计时器。

示例:http://jsfiddle.net/jtbowden/gJsPw/