JS实例：网页特效-自动刷新页面

在一些具有时效性特点的网页中，譬如股票价格、外汇牌等，需要定时刷新网页，把最新数据展示给用户，那么这样的效果如何实现呢？请使用reload()函数补充下面代码实现网页每隔5s自动刷新，同时显示实时的时间秒。

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>网页每隔5秒自动刷新中</title><style></style>
</head><body style="text-align:center;"><p>网页每隔5秒自动刷新中……</p><p>当前时间秒：<input type="text" id='sec'/></p><script>function refreshPage(){//代码补充完整}// 定义网页执行刷新动作的函数refreshPage/*代码补充完整*/</script></body></html>

知识点：

（1）JS定时器setTimeout()和setInterval()；

（2）JS中window.location的属性和方法

参考答案：

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>网页每隔5秒自动刷新中</title><style></style>
</head><body style="text-align:center;"><p>网页每隔5秒自动刷新中……</p><p>当前时间秒：<input type="text" id='sec'/></p><script>function refreshPage(){window.location.reload();}// 定义网页执行刷新动作的函数refreshPagevar date=new Date();var sec=document.getElementById("sec");sec.value=date.getSeconds();setTimeout(refreshPage,5000);</script></body></html>

其他说明：

还可以通过在网页的头部标签中加入代码实现相同刷新页面功能：

  <meta http-equiv="refresh" content="5">
/*每5秒刷新一次页面
*/

完整代码

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><meta http-equiv="refresh" content="5"><title>网页每隔5秒自动刷新中</title><style></style>
</head><body style="text-align:center;"><p>网页每隔5秒自动刷新中……</p><p>当前时间秒：<input type="text" id='sec'/></p><script>var date=new Date();var sec=document.getElementById("sec");sec.value=date.getSeconds();</script></body></html>

JS实例：网页特效-自动刷新页面相关推荐

php中定时刷新当前页面,php中怎么自动刷新页面
php中自动刷新页面的方法:1.使用header()函数来实现自动刷新页面:2.在PHP脚本中嵌入JS代码,通过JS代码来实现自动刷新页面. php中怎么自动刷新页面? 1.使用header()函数来 ...
自动刷新网页，自动刷新当前页面，JS调用
reload 方法,该方法强迫浏览器刷新当前页面. 语法:location.reload([bForceGet]) ...
javascript(js)自动刷新页面的实现方法总结
自动刷新页面的实现方法总结: 1) <meta http-equiv="refresh"content="10;url=跳转的页面"> 10表示间隔 ...
Chrome插件开发--后台监控网页并自动刷新，点击页面元素
2015年6.17号,在线旅游网站蚂蜂窝出现了抢粽子活动:页面会出现一些粽子,点击粽子,即抢到.很明显,这是一个重复性的劳动,可以代码自动刷新页面,点击页面上的粽子. 本方案中选择了开发一款Chrom ...
Servlet 自动刷新页面
假设有一个网页,它是显示现场比赛成绩或股票市场状况或货币兑换率.对于所有这些类型的页面,您需要定期刷新网页. Java Servlet 提供了一个机制,使得网页会在给定的时间间隔自动刷新. 刷新网页的 ...
自动刷新 html,JavaScript自动刷新页面的方法
使用JavaScript location.reload方法刷新网页.当用户点击一个链接此代码可以自动在一个事件调用. 如果想使用鼠标点击刷新网页,可以用下面的代码:Refresh Page 要了解它 ...
在HTML中，实现每隔60秒自动刷新页面的功能
一.简介在 html 元素 < head > 头部区域内的 meta 标签中有个属性是 http-equiv="Refresh" ,该属性被所有主流浏览器支持. 其用 ...
gulp+browserSync自动刷新页面
BrowserSync "Browsersync能让浏览器实时.快速响应您的文件更改(html.js.css.sass.less等)并自动刷新页面.更重要的是 Browsersync可以同时 ...
ios 返回不会自动刷新页面问题
在实际开发过程中,移动端的兼容性问题有很大的坑,安卓可以了ios不行,ios可以了安卓又失效了这样,其中ios的回退操作就是不会自动刷新页面,很烦! 常见的history.back() history ...

JS实例：网页特效-自动刷新页面

JS实例：网页特效-自动刷新页面相关推荐

最新文章

热门文章