Jquery定時重新整理日誌框日誌
阿新 • • 發佈：2019-02-05
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>