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