效果图:(5秒后跳转到百度)

示例代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<title></title>
    
    <style type="text/css">

#dv{border:4px #E8E8E9 double;margin:auto;width:600px;height:300px;
    background-color:#E8E8E8;
/*设置透明度*/
filter:alpha(opacity=50); -moz-opacity:0.6; -khtml-opacity: 0.6; opacity: 0.6;
  }
.top{border:0px #0000FF solid;width:400px;height:40px;margin:auto;margin-top:12px;}
.top li{border:0px #00FF00 solid;width:180px;height:40px;float:left;list-style:none;
text-height:40px;line-height:40px;
      }
.top .top_one{width:70px;height:40px;margin-left:80px;}
.top #setTime{color:#900;width:30px;height:40px;font-size:36px;text-align:center;}

.bottom{border:0px #0000FF solid;width:400px;height:40px;margin:auto;margin-top:160px;}
            .bottom li{border:0px #00FF00 solid;width:120px;height:40px;float:left;list-style:none;
line-height:40px;
       }
   .bottom .bottom_one{width:100px;height:40px;margin-left:220px;}
.bottom .bottom_two{width:70px;height:40px;}
.bottom .bottom_two a:hover{color:#F00;}
.bottom .bottom_two a{text-decoration:none;color:#0F0;}

</style>
    
</head>
<body bgColor="#f7f7f7">

<div id = "dv" >
    <ul class="top">
            <li class="top_one">网页将在</li>
                <li id="setTime"></li>
                <li>秒后自动跳转......</li>
            
            </ul>
            <ul class="bottom">
            <li class="bottom_one">如果未跳转请</li>
                <li class="bottom_two"><a href="http://www.baidu.com">点击此处</a></li>
            </ul>
 
    </div>
   <!--定时器-->
    <script type="text/javascript">
    var i = 5;
var tId;
document.getElementById("setTime").innerHTML = i;
function showTime(){
if(i == 0){
window.clearInterval(tId);
return;
}
i--;
document.getElementById("setTime").innerHTML = i;
if(i == 0){
//如果时间秒数为0,跳转到指定页面
location.replace("http://www.baidu.com");

}

}
window.setInterval(showTime,1000);

</script>
    
     <!--保持网页不变形-->
   <script type="text/javascript">
      var a=screen.availWidth;
      var b=screen.availHeight;
      window.moveTo(0,0)
      window.resizeTo(a,b)
 
  </script>
</body>
</html>

JS实现网页自动跳转相关推荐

  1. js实现页面自动跳转

    本文导读:自动转向,也叫自动重定向.自动跳转,指当访问用户登陆到某网站时,自动将用户转向其它网页地址的一种技术.转向的网页地址可以是网站内的其它网页,也可以是其它网站.通常情况下,浏览器会收到一个网页 ...

  2. 网页自动往下走html代码,网页自动跳转代码html

    很多做博客搞网络的人并不懂技术,我也不懂,只能说会简单的操作而已,前段时间有个想法,就是让网页直接跳转,所以才找了这个网页自动跳转代码html 语言,非常简单实用,具体我想不用我多说,只需要简历个ht ...

  3. “您的访问出错了”网页自动跳转贴吧404

    问题: "您的访问出错了"网页自动跳转贴吧404,需要重新点击一次或者多次后,才能正常进入. 尝试方法: 百度了一下,大概分为以下几种说法和方案. 1.DNS被劫持了,需要修改DN ...

  4. js_实现网页自动跳转

    网页自动跳转 实现网页定时自动跳转 实现网页定时自动跳转 效果: 10秒后自动跳转到网易云音乐的页面 代码: <!DOCTYPE html> <html><head> ...

  5. html网页自动跳转代码大全

    html网页自动跳转代码大全.网页跳转代码可以有多种方法实现,我们举几种最好最简单的方法. <html> <head> <meta http-equiv="Co ...

  6. 网页自动跳转的5中方法

    网页自动跳转,是指当用户访问某个网页时,被自动跳转到另一个网页中去. 下面介绍一下五种常见的网页自动跳转方法,以及搜索引擎对这些跳转方法的辨识能力. 第一种网页自动跳转方法:meta refresh自 ...

  7. html自动跳转源码,网页自动跳转代码收集

    网页自动跳转代码收集 2009-09-27 07:05:04 作者: 网页自动跳转代码收集 不隐藏转向之后的地址 代码一 --------------------------------------- ...

  8. 手机端访问网页自动跳转至广告页面解决办法

    手机端访问网页自动跳转到垃圾界面的解决办法 这几天用手机访问网页频频出现弹出垃圾界面和广告的情况,令人愤怒不已,由于界面过于恶心,这里就不展示了- 今天就是总结一下怎么屏蔽这些广告界面和错误界面 HT ...

  9. 几种常见网页自动跳转方法

    种常见网页自动跳转方法对SEO的影响 网页自动跳转,是指当用户访问某个网页时,被自动跳转到另一个网页中去.网页自动跳转的主要作用 是,当域名变更后,或者网站里的一个或多个网页被删除后,可以使用这种方式 ...

最新文章

  1. 另一个.java文件调用_java - 如何调用另一个类“写文件”的方法? - SO中文参考 - www.soinside.com...
  2. 启动mysqld报 mysql the server quit without updating pid file
  3. 第二次scrum冲刺
  4. java中的super限定
  5. LPC55S69 IoT Kit专属 Micropython模组和库函数简介
  6. 配置Struts 2应用程序的安全功能(转)
  7. [unreal4入门系列之七] UE4中的Actor类和Pawn类
  8. 倒计时或按任意键返回首页_超实用excel小技巧之时间倒计时及动态显示
  9. mysql if selected_初识MySQL
  10. jzoj6293-迷宫【ddp,线段树,矩阵乘法】
  11. 批改网禁止粘贴怎么破_教育部对家长批改作业表态了,明令禁止!你怎么看?...
  12. 20155204 2016-2017-2《Java程序设计》课程总结
  13. 图论 —— 生成树 —— 最小生成树 —— Kruskal
  14. visio防火墙可以连接什么_Visio类似的高性价比的替代软件
  15. 同事操作两个数据源保持事务一致_微服务分布式事务4种解决方案实战
  16. ionic 日期选择控件
  17. 在ECSHOP后台左侧导航中增加新菜单
  18. opensaml2.0 java例子_OpenSAML 使用引导 I : 简介——关于OpenSAML你所需知道的一切
  19. 全球及中国电子材料市场需求分析与十四五投资潜力预测报告2021年版
  20. Learning with Errors

热门文章

  1. FMC子卡模块学习资料:FMC303-两路14位2.5Gsps DA FMC子卡模块
  2. mc服务器怪物掉落修改,刀剑无双修改怪物掉落爆装备
  3. 怎么采集can总线的数据?
  4. c#实现winform关机代码
  5. 以龙讯LT8911为例浅谈LVDS/MIPI转EDP
  6. 赋能集团带您了解,广告联盟的发展历程,前世和今生
  7. 机器学习 之 作业1
  8. 计算机属性无法查看无反应,Win7旗舰版右键查看计算机属性未反应的处理方法...
  9. OA办公自动化系统源码
  10. Robot Arm 机械臂源码解析