<!DOCTYPE html> <html> <head> <title>浏览器对象</title> <meta charset="utf-8"/> </head> <body> <!--先编写好网页布局--> <h1>操作成功</h1> <p><b id=ms>5</b>秒后回到主页 <a href="javascript:goBack();">返回</a></p> <script type="text/javascript"> var ms1= document.getElementById("ms"); var i=5; function tz(){ i--; ms1.value= i; if(i==1){ window.location.href = "http://www.imooc.com/"; } setTimeout(tz,1000); } setTimeout(tz,1000); function goBack(){ window.history.go(-1); } //获取显示秒数的元素,通过定时器来更改秒数。 //通过window的location和history对象来控制网页的跳转。 </script> </body> </html>
以上代码将ms1.value= i;改为ms1.innerHTML=i就是正常的,之前用value时到了5秒会跳转但是页面一直显示5秒没有动态改变。另外在下面的代码中又是正确的。这到底是什么原因造成的
<!DOCTYPE html> <html> <head> <title>浏览器对象</title> <meta charset="utf-8"/> </head> <body> <!--先编写好网页布局--> <h1>操作成功</h1> <p><b id=ms>5</b>秒后回到主页 <a href="javascript:goBack();">返回</a></p> <script type="text/javascript"> var ms1= document.getElementById("ms"); var i=5; setInterval(function(){ i--; ms1.value = i; if(i==1){ window.location.href = "http://www.imooc.com/"; } },1000); function goBack(){ window.history.go(-1); } //获取显示秒数的元素,通过定时器来更改秒数。 //通过window的location和history对象来控制网页的跳转。 </script> </body> </html>
2种代码用value都不变数字的,b标签没有value属性,用innerText或者innerHTML都行,你再试试?
一般inpu可输入t类型的可设置value值,像这种行内标签b一般适用于内容显示,通过innerHTML给它赋值。我的个人理解。
id=ms ,这个地方的要写成id="ms" ,属性值需要用加引号,你再试试