zoukankan      html  css  js  c++  java
  • 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>

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

  • 相关阅读:
    element-ui 中Message 消息提示
    MYSQL 常用语法格式
    python 爬取必应每日图片
    linux:文件权限管理
    如何建立自我学习的"触发机制"?
    总有那么一些人,把自己的思想强加给别人
    linux 控制history命令历史记录
    linux apt-get 安装与卸载命令
    ubuntu16.04下 安装java8
    历史与过去是一面镜子,它照到的是你现在的自己
  • 原文地址:https://www.cnblogs.com/jichuang/p/6777723.html
Copyright © 2011-2022 走看看