靜態頁面自動跳轉的方式
阿新 • • 發佈：2020-07-14
HTML方式
複製即用
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta http-equiv="refresh" content="4;url='http://localhost:7002/';"> //cotent 中數字是跳轉的時間 URL是跳轉的路徑 <title>使用者註冊</title> <style type="text/css"> body { background: #555 } .loading { -webkit-animation: fadein 2s; -moz-animation: fadein 2s; -o-animation: fadein 2s; animation: fadein 2s } @-moz-keyframes fadein { from { opacity: 0 } to { opacity: 1 } } @-webkit-keyframes fadein { from { opacity: 0 } to { opacity: 1 } } @-o-keyframes fadein { from { opacity: 0 } to { opacity: 1 } } @keyframes fadein { from { opacity: 0 } to { opacity: 1 } } .spinner-wrapper { position: absolute; top: 0; left: 0; z-index: 300; height: 100%; min-width: 100%; min-height: 100%; background: rgba(255,255,255,0.93) } .spinner-text { position: absolute; top: 45%; left: 50%; margin-left: -100px; margin-top: 2px; //調整文字的位置 color: #000; letter-spacing: 1px; font-size: 20px; font-family: Arial } .spinner { position: absolute; top: 45%; left: 50%; display: block; margin-left: -160px; width: 1px; height: 1px; //調整轉圈的位置 border: 30px solid rgba(255,0,0,1); -webkit-border-radius: 50px; -moz-border-radius: 50px; border-radius: 50px; border-left-color: transparent; border-right-color: transparent; -webkit-animation: spin 1.5s infinite; -moz-animation: spin 1.5s infinite; animation: spin 1.5s infinite } @-webkit-keyframes spin { 0%,100% { -webkit-transform: rotate(0deg) scale(1) } 50% { -webkit-transform: rotate(720deg) scale(0.6) } } @-moz-keyframes spin { 0%,100% { -moz-transform: rotate(0deg) scale(1) } 50% { -moz-transform: rotate(720deg) scale(0.6) } } @-o-keyframes spin { 0%,100% { -o-transform: rotate(0deg) scale(1) } 50% { -o-transform: rotate(720deg) scale(0.6) } } @keyframes spin { 0%,100% { transform: rotate(0deg) scale(1) } 50% { transform: rotate(720deg) scale(0.6) } } </style> <script> var count = 3; var interval = window.setInterval("timeout()",1000); function timeout() { var s=document.getElementById("spinner"); s.innerHTML="註冊成功，頁面將在"+count+"秒後跳轉"; //定時器控制跳轉 count--; } </script> </head> <body> <div class="loading"> <div class="spinner-wrapper"> <span class="spinner-text" ><h2 id="spinner">註冊成功，頁面將在3秒後跳轉</h2></span> <span class="spinner"></span> </div> </div> </body>
js方式
<script type="text/javascript">
Location.href="1.html";
</script>