1. 程式人生 > >Jquery定時重新整理日誌框日誌

Jquery定時重新整理日誌框日誌

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 onclick="clearText()">清除日誌</button>
	<div id="test" style="border:1px solid black;width:200px;height:200px;overflow:auto">
		輸出日誌
	</div> 
</body>
</html>