html制作，点击按钮在页面上显示文字5秒后跳转网页
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了html制作，点击按钮在页面上显示文字5秒后跳转网页相关的知识，希望对你有一定的参考价值。
-----------------------------
<html>
<head>
<script type="text/javascript"> var c=0; var t; function timedCount() c=c+1; <!-- document.getElementById('txt').value=c --> var time=document.getElementById('txt'); time=c.value; t=setTimeout("timedCount()",1000); </script>
</head>
<body>
<form><input type="button" value="点击按钮开始计数!" onClick="timedCount()"><input type="text" id="txt"></form>
</body>
</html>
把document.getElementById('txt').value=c修改一下就不行了
为什么没人回答，如下代码可以实现：
<html><head>
<script language="javascript">
function asd(count,url)
document.getElementById("div1").style.display = "block";
var sp = document.getElementById('sp');
sp.innerHTML = count;
if(--count > 0)
setTimeout("asd("+count+",'"+url+"')", 1000);
else
location.href = url;
</script>
</head>
<body>
<input type="button" onclick="asd(5,'http://www.baidu.com/');" value="点击跳转" />
<div id="div1" style="display:none;"><span id="sp"></span>秒后跳转</div>
</body>
</html>追问
如果function asd()不带参数怎么修改？
追答不带参数：
<html><head>
<script language="javascript">
function asd()
document.getElementById("div1").style.display = "block";
var sp = document.getElementById('sp');
var count = parseInt(sp.innerText);
if(--count > 0)
sp.innerText = count;
setTimeout("asd()", 1000);
else
location.href = "http://www.baidu.com/";
</script>
</head>
<body>
<input type="button" onclick="asd();" value="点击跳转" />
<div id="div1" style="display:none;"><span id="sp">6</span>秒后跳转</div>
</body>
</html>追问
span有什么作用？可不可以去除span标签？
追答span相当于一个容器，用来方便的让js获取里面的数字，从而方便的更改里面的数字，达到倒数几秒的效果。也可以用div，a，font等替换，不过span用起来最方便。
追问--- var sp = document.getElementById('div1');
--- 6秒后跳转
这样修改 6后面的 秒后跳转就没有了
所以说要把数字单独装在一个容器里，这样写是最方便的。
参考技术A var t=setTimeout("location.assign(http://网页地址);",5000); 加上单引号如：var t=setTimeout("location.assign(’http://网页地址‘);",5000);追问
怎么显示计时时间？
追答 要是需要显示时间的话，就不能这么写了。
修改后的代码：
var t =10;
var time = document.getElementById("tmid");
function asd()
if(t >0)
t--;
time.value =t;
else
location.href = "http://www.baidu.com";
setTimeout("asd()",1000);
测试过的。
参考：http://zhidao.baidu.com/question/149957032.html
http://zhidao.baidu.com/question/587509891.html
有没有办法在原来的基础上改一点？
追答目前暂时没想到 更少的改动，抱歉！
将： time=c.value; 改为： time.value=c; 你追问的问题是不是要这样的效果
是，原来这里错了
页面5秒后跳转
一、常见于404页面
<div class="demo">
<p><span>4</span><span>0</span><span>4</span></p>
<p>抱歉(´?ω?`)，该页面不存在<span id="time" color="#FFF"> 15</span> 秒钟之后自动跳转</p>
<!--，如果不跳转，请点击下面链接 -->
<!-- <a href="http://www.baidu.com/">百度</a>-->
</div>
<script type="text/javascript">
function delayURL(url) {
var delay=document.getElementById("time").innerHTML;
if(delay>0){
delay--;
document.getElementById("time").innerHTML=delay;
}
else{
window.top.location.href=url;
}
setTimeout("delayURL(‘" + url + "‘)", 1000);
}
delayURL("http://www.baidu.com/");
</script>
（二）类似方法：
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script type="text/javascript">
function countDown(secs,surl){
//alert(surl);
var jumpTo = document.getElementById(‘jumpTo‘);
jumpTo.innerHTML=secs;
if(--secs>0){
setTimeout("countDown("+secs+",‘"+surl+"‘)",1000);
}
else{
location.href=surl;
}
}
</script>
</head>
<body><span id="jumpTo">5</span>秒后自动跳转到http://www.baidu.com/
<script type="text/javascript">countDown(5,‘http://www.baidu.com/‘);</script>
</body>
</html>
以上是关于html制作，点击按钮在页面上显示文字5秒后跳转网页的主要内容，如果未能解决你的问题，请参考以下文章