test-redirect.html 2.2 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576
  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <title>测试跳转功能</title>
  7. <style>
  8. body {
  9. font-family: Arial, sans-serif;
  10. max-width: 600px;
  11. margin: 50px auto;
  12. padding: 20px;
  13. text-align: center;
  14. }
  15. button {
  16. padding: 15px 30px;
  17. margin: 10px;
  18. font-size: 18px;
  19. cursor: pointer;
  20. background: #409eff;
  21. color: white;
  22. border: none;
  23. border-radius: 5px;
  24. }
  25. button:hover {
  26. background: #66b1ff;
  27. }
  28. .info {
  29. background: #f0f9ff;
  30. padding: 15px;
  31. margin: 20px 0;
  32. border-left: 4px solid #409eff;
  33. text-align: left;
  34. }
  35. .countdown {
  36. font-size: 24px;
  37. color: #409eff;
  38. margin: 20px 0;
  39. }
  40. </style>
  41. </head>
  42. <body>
  43. <h1>跳转功能测试</h1>
  44. <div class="info">
  45. <p><strong>测试说明:</strong></p>
  46. <p>点击下面的按钮,页面将在3秒后跳转到登录页</p>
  47. <p>这个测试用于验证 window.location.href 跳转是否正常工作</p>
  48. </div>
  49. <button onclick="testRedirect()">测试跳转到登录页</button>
  50. <div id="countdown" class="countdown"></div>
  51. <script>
  52. function testRedirect() {
  53. let seconds = 3;
  54. const countdownEl = document.getElementById('countdown');
  55. const timer = setInterval(() => {
  56. countdownEl.textContent = `${seconds} 秒后跳转...`;
  57. seconds--;
  58. if (seconds < 0) {
  59. clearInterval(timer);
  60. countdownEl.textContent = '正在跳转...';
  61. console.log('执行跳转: window.location.href = "/login"');
  62. window.location.href = '/login';
  63. }
  64. }, 1000);
  65. countdownEl.textContent = `${seconds} 秒后跳转...`;
  66. }
  67. </script>
  68. </body>
  69. </html>