js技巧专题篇: 页面跳转

本篇主要介绍网页上常见的页面跳转技术。页面跳转有几种方式,比较常用的是window.location.href,window.location.replace,window.open,当然还有目前比较火的很多框架都采用的无刷新页面跳转技术window.history.pushState和window.history.replaceState。这些我都不讲^_^,我这里讲得是meta的一个相关配置。我相信,很多朋友看见实现的页面时会非常面熟,特别是男性!

以下是相关代码实现:

 

 1 <!DOCTYPE html> 
 2 <html>
 3  <head lang="en"> 
 4 <meta charset="UTF-8"> 
 5 <meta http-equiv="refresh" content="5;url=https://www.baidu.com"/> 
 6 <title></title>
 7  <style> 
 8 span { 
 9 color: red;
10  padding: 5px 15px;
11  background: #cccccc; 
12 } 
13 button {
14  padding: 10px;
15  display: inline-block;
16  vertical-align:top; 
17 border-radius: 4px;
18 outline: none; }
19  </style> 
20 </head>
21  <body> 
22 <h1>对不起您浏览的页面已改变,<span>5</span> 秒后自动为您跳转... <button>手动跳转</button>
23 </h1>
24  <script>
25  var span = document.querySelector('span'),
26  btn = document.querySelector('button'); 
27 var selfTimer = (function(){ var i = 5;
28  return function(){
29  span.innerHTML = --i;
30  if (i == 0) 
31 { clearInterval(timer); 
32 } } })()
33  timer = setInterval(selfTimer, 1000); 
34 btn.onclick = function() {
35  window.location.hash = 'https://www.baidu.com'; } 
36 </script> 
37 </body>
38  </html>

最后感谢慕课网的:
 作者:外号理论汪 
来源:慕课网

posted on 2017-04-27 22:40  向往的生活  阅读(529)  评论(2编辑  收藏  举报

导航

页面底部