Jquery定时刷新日志框日志

最新推荐文章于 2022-02-25 16:18:55 发布

运动技术宅

最新推荐文章于 2022-02-25 16:18:55 发布

阅读量995

点赞数

分类专栏： Jquery

本文链接：https://blog.youkuaiyun.com/LIANGJINHUAI/article/details/80955336

版权

Jquery 专栏收录该内容

1 篇文章

订阅专栏

本文介绍如何利用JQuery实现日志框的定时刷新功能，包括定时调用函数、滚动条定位、添加子节点及页面加载后的脚本调用。并提供了一个完整的JSP代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.主要jquery方法

1.1定时调用函数

setInterval(fuction,3000);

1.2定位滚动条方法

$().scrollTop(int)

1.3节点内添加子节点

$().append()

1.4页面加载完毕后调用脚本

	$(document).ready(function(){
		/* 延時調用函數 */
		//setTimeout(appendTo,3000);
		/* 定時調用函數 */
		setInterval(appendTo,3000);
		 });

2.完整JSP代码

<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
      <!-- 定时刷新日志 -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>JsonTest</title>
	<script type="text/javascript" src="/patrolInspectionTool/jquery/jquery-1.8.3.js"></script>
	<script type="text/javascript">
	$(document).ready(function(){
		/* 延時調用函數 */
		//setTimeout(appendTo,3000);
		/* 定時調用函數 */
		setInterval(appendTo,3000);
		 }); 

		var num = 0;
		function appendTo()
		{
			var a = $("#test");
			var h = '<p style="color:' + '#ff0000' + ';"' + '">' + '輸出日誌!!!'+num+ '</p>'; 		
			a.append(h);
			/* 定位滾動條方法 */
			a.scrollTop(a[0].scrollHeight); 
			num++;
		}
		
		function clearText()
		{
			a.clear();
		}			
	</script>
</head>
<body>
	<button οnclick="clearText()">清除日志</button>
	<div id="test" style="border:1px solid black;width:200px;height:200px;overflow:auto">
		輸出日誌
	</div> 
</body>
</html>