http://download.csdn.net/detail/zl594389970/7218687
效果圖：
html代碼：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK">
<title>JQuery實例：動態股票信息</title>
<script type="text/javascript" src="js/jquery-1.3.1.js"></script>
<script type="text/javascript" src="js/jquerystock.js"> </script>
</head>
<body>
<div id="0001"> <a href="#">洋河酒廠</a><span></span></div>
<div id="3001"> <a href="#">浦發銀行</a><span></span></div>
</body>
<div id="stock">
<div id="yes">昨天：<span></span></div>
<div id="tod">今天：<span></span></div>
<div id="now">當前：<span></span></div>
</div>
</html>
jquerystock.js代碼：
//在頁面加載時，就獲取數據
var obj;//全局變量，用於保存返回的json對象
var code;
$(document).ready(function() {
//獲取a標籤
var as = $("a");
//設置div的樣式
var stockNode = $("#stock").css("border"," 2px solid #FF0000")
.width("150px").css("position","absolute").css("z-index","99")
.css("background","white");
//隱藏
stockNode.hide();
//註冊鼠標移動上上面事件
as.mouseover(function(event) {
stockNode.show();
var aNode = $(this);
var divNode =aNode.parent();
//獲取div的id屬性值
code = divNode.attr("id");
//更新數據
setInterval(updata, 1000);
//需要控制彈出框的位置
//1找到當前連接的位置
/*var offset = aNode.offset();
//2設置彈出框的位置,在鏈接的下方
stockNode.css("left",offset.left+"px").css("top",offset.top+aNode.height()+"px")
*/
//出現在鼠標右下方
//解決不同瀏覽器創建事件對象的差異
var myEvent = event || window.event;
stockNode.css("left",myEvent.clientX+15+"px").css("top",myEvent.clientY+5+"px");
});
//註冊鼠標離開時事件
as.mouseout(function() {
stockNode.hide();
});
// 獲取數據
getdata();
// 1秒刷新一次
setInterval(getdata, 1000);
});
//顯示數據
function getdata() {
$.get("getstock", null, function(data) {
//obj = eval("(" + data + ")");//當get函數的第三個參數沒設置時用該方法
//當get方法第三個參數爲json時則data就會被解析爲json數據
obj = data;
// 獲取json數據並解析
// 獲取兩支股票的當前指數信息
var yh = obj["0001"];
var pf = obj["3001"];
/*
* 遍歷一個js的對象 for( var stockid in obj) { var stock = obj[stockid]; }
*/
// 獲取div中span並顯示數據
var yhs = $("#0001").children("span");
var pfs = $("#3001").children("span");
yhs.html(yh.now);
pfs.html(pf.now);
//高於昨天是紅的，低於是綠的
if (yh.now > yh.yes) {
yhs.css("color","red");
}else
{
yhs.css("color","green");
}
if (pf.now > pf.yes) {
pfs.css("color","red");
}else
{
pfs.css("color","green");
}
},"json");
}
//更新提示框中的數據
function updata() {
//找到對應股票對象
var stock = obj[code];
for(var proname in stock )
{
if( proname != "name" && proname != "id")
{
//設置spn中對應的值
var span = $("#"+proname).children("span").html(stock[proname]);
if( proname == "now")
{
if (stock.now > stock.yes) {
span.css("color","red");
}else
{
span.css("color","green");
}
}
}
}
}股票類Stock:
package com.liang.bean;
public class Stock {
private String id;
//股票名
private String name;
//當前
private double now;
//今天
private double tod;
//昨天
private double yes;
public Stock(String id, String name, double tod, double yes) {
super();
this.id = id;
this.name = name;
this.tod = tod;
this.yes = yes;
this.now=tod;
}
public String getId() {
return id;
}
public void setId(String id) {
this.id = id;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public double getNow() {
return now;
}
public void setNow(double now) {
this.now = now;
}
public double getTod() {
return tod;
}
public void setTod(double tod) {
this.tod = tod;
}
public double getYes() {
return yes;
}
public void setYes(double yes) {
this.yes = yes;
}
}
StockAction控制類：
package com.liang.action;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.HashMap;
import java.util.Map;
import javax.ejb.EnterpriseBean;
import javax.servlet.http.HttpServletResponse;
import net.sf.json.JSONObject;
import net.sf.json.JsonConfig;
import org.apache.struts2.ServletActionContext;
import com.liang.bean.Stock;
import com.opensymphony.xwork2.ActionSupport;
/**
* 產生股票數據
*/
public class StockAction extends ActionSupport{
//股票棧
private static Map<String,Stock> stocks = new HashMap<String, Stock>();
static{
//初始化兩支股票
Stock yh = new Stock("0001", "洋河酒廠", 2009.45, 2012.44);
Stock pf = new Stock("3001", "浦發銀行", 300.12,335.56);
stocks.put("0001", yh);
stocks.put("3001", pf);
}
public String execute()
{
try {
Stock yh = stocks.get("0001");
Stock pf = stocks.get("3001");
//每次請求時產生股票當前的動態數據
double syh = Math.random()*10;
double spf = Math.random()*0.5;
boolean flagey = (int)(syh*10)%2==0;
boolean flagep = (int)(spf*10)%2==0;
double temp ;
//讓當前股票的值增或者減
if( flagey)
{
temp=yh.getNow()+syh;
}else{
temp=yh.getNow()-syh;
}
temp = (int)(temp*100)/100.0;
yh.setNow(temp);
if( flagep)
{
temp=pf.getNow()+spf;
}else{
temp=pf.getNow()-spf;
}
temp = (int)(temp*100)/100.0;
pf.setNow(temp);
//構造json數據
JSONObject object = new JSONObject();
for( String key : stocks.keySet())
{
JSONObject jsonStock = new JSONObject();
object.put(key, JSONObject.fromObject(stocks.get(key)));
}
ServletActionContext.getRequest().setAttribute("stockjson", object.toString());
} catch (Exception e) {
e.printStackTrace();
}
//轉發到stockjson.jsp
return SUCCESS;
}
}
stockjson.jsp代碼：
<%--ajax的自動補全實例
與傳統應用的視圖層不同，這個jsp返回的是json數據，
--%>
<%@ page contentType="text/xml; charset=UTF-8" language="java" %>
${stockjson}struts.xml代碼
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE struts PUBLIC
"-//Apache Software Foundation//DTD Struts Configuration 2.3//EN"
"http://struts.apache.org/dtds/struts-2.3.dtd">
<struts>
<package name="test" extends="struts-default" >
<action name="getstock" class="com.liang.action.StockAction">
<result >stockjson.jsp</result>
</action>
<action name="autoComplete" class="com.liang.action.AutoCompleteAction">
<result >wordxml.jsp</result>
</action>
</package>
</struts>