JS实现网页自动跳转
效果图:(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实现网页自动跳转相关推荐
- js实现页面自动跳转
本文导读:自动转向,也叫自动重定向.自动跳转,指当访问用户登陆到某网站时,自动将用户转向其它网页地址的一种技术.转向的网页地址可以是网站内的其它网页,也可以是其它网站.通常情况下,浏览器会收到一个网页 ...
- 网页自动往下走html代码,网页自动跳转代码html
很多做博客搞网络的人并不懂技术,我也不懂,只能说会简单的操作而已,前段时间有个想法,就是让网页直接跳转,所以才找了这个网页自动跳转代码html 语言,非常简单实用,具体我想不用我多说,只需要简历个ht ...
- “您的访问出错了”网页自动跳转贴吧404
问题: "您的访问出错了"网页自动跳转贴吧404,需要重新点击一次或者多次后,才能正常进入. 尝试方法: 百度了一下,大概分为以下几种说法和方案. 1.DNS被劫持了,需要修改DN ...
- js_实现网页自动跳转
网页自动跳转 实现网页定时自动跳转 实现网页定时自动跳转 效果: 10秒后自动跳转到网易云音乐的页面 代码: <!DOCTYPE html> <html><head> ...
- html网页自动跳转代码大全
html网页自动跳转代码大全.网页跳转代码可以有多种方法实现,我们举几种最好最简单的方法. <html> <head> <meta http-equiv="Co ...
- 网页自动跳转的5中方法
网页自动跳转,是指当用户访问某个网页时,被自动跳转到另一个网页中去. 下面介绍一下五种常见的网页自动跳转方法,以及搜索引擎对这些跳转方法的辨识能力. 第一种网页自动跳转方法:meta refresh自 ...
- html自动跳转源码,网页自动跳转代码收集
网页自动跳转代码收集 2009-09-27 07:05:04 作者: 网页自动跳转代码收集 不隐藏转向之后的地址 代码一 --------------------------------------- ...
- 手机端访问网页自动跳转至广告页面解决办法
手机端访问网页自动跳转到垃圾界面的解决办法 这几天用手机访问网页频频出现弹出垃圾界面和广告的情况,令人愤怒不已,由于界面过于恶心,这里就不展示了- 今天就是总结一下怎么屏蔽这些广告界面和错误界面 HT ...
- 几种常见网页自动跳转方法
种常见网页自动跳转方法对SEO的影响 网页自动跳转,是指当用户访问某个网页时,被自动跳转到另一个网页中去.网页自动跳转的主要作用 是,当域名变更后,或者网站里的一个或多个网页被删除后,可以使用这种方式 ...
最新文章
- php学数据结构,PHP 程序员学数据结构与算法之《栈》
- Java坦克大战 (一) 之产生一个窗口
- gRaphael——JavaScript 矢量图表库:两行代码实现精美图表
- squirrelsql安装
- 从零写一个编译器(十):编译前传之直接解释执行
- linux7基础——给用户添加sudo权限
- linux内网服务器映射到公网地址吗,LINUX 内网设备将服务映射到公网地址
- vi/vim使用进阶: 文件浏览和缓冲区浏览
- D3 datumdata
- 解读千人千面,洞悉数据智能的价值(附ppt下载链接)
- git学习(二):git config命令
- 网络排查工具MTR介绍
- Manjaro20KDE桌面环境安装Google输入法
- QDockWidget标题栏
- 推荐一个易学预测、学术研讨、资源分享网站:龙腾易学网
- Python爬虫报错 ImportError: cannot import name Morsel
- 2021最新 RocketMQ面试题精选(附刷题小程序)
- XML - XML学习/XML文件解析器(C++)实现
- linux启动网络服务的命令,linux重启服务命令
- 7.opencv图像对称翻折image-Flip(cv2.flip)
热门文章
- 计算机视觉算法探究:OpenCV CLAHE 插值算法详解
- 【蓝桥杯】历届真题 魔方旋转问题(高职组) Java
- 非标自动化企业前十名_苏州非标自动化-优质企业
- 笔记:合泰单片机BH66F2652开发(四)TIMER
- 什么是健康码核验手持机?
- 阿里云性能真的是差到了极点……
- i7 7700k linux,i7 7700K和i7 7740X哪个好?i7-7740X与7700K的区别对比详细评测
- 用python写pdf_用 Python 写了一个 PDF 转换器,以后再也不用花钱转了
- 一文读懂裸金属服务器是什么意思,和物理机有啥区别
- 网络安全工程师入门教程(非常详细)从零基础入门到精通,看完这一篇就够了