jquery实例4:动态显示股票信息

这个实例主要涉及的知识点为：

1. 完成后台模拟股票涨跌的功能

2. 将股票信息组装成JSON格式

3. 用红绿色实时显示股票价格的涨跌

4. 用Tooltip窗口显示股票详细信息



程序的目录结构如下:

[img]http://dl.iteye.com/upload/attachment/279439/2fadbdd4-57e0-393f-bd90-20ac4c2c9670.jpg[/img]


1.后台部分

（1）Stock.java源代码：

package bean;
/**
 * 用于保存股票的基本信息
 * @author 大鹏
 */
public class Stock {

	/**
	 * 昨天的收盘价
	 */
	private double yesterday;

	/**
	 * 开盘价
	 */
	private double today;

	/**
	 * 当前价
	 */
	private double now;

	/**
	 * 股票名称
	 */
	private String name;

	/**
	 * 股票代码
	 */
	private String id;

	public Stock(double yesterday, double today, String name, String id) {
		this.yesterday = yesterday;
		this.today = today;
		this.name = name;
		this.id = id;
		this.now = today;
	}

	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 getToday() {
		return today;
	}

	public void setToday(double today) {
		this.today = today;
	}

	public double getYesterday() {
		return yesterday;
	}

	public void setYesterday(double yesterday) {
		this.yesterday = yesterday;
	}

	@Override
	public String toString() {
		return name + ":" + now;
	}

}

（2）GetStockInfoServlet.java源代码：

package servlet;

import java.io.IOException;
import java.io.PrintWriter;
import java.util.HashMap;

import javax.servlet.ServletConfig;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import bean.Stock;

public class GetStockInfoServlet extends HttpServlet {

	private HashMap<String, Stock> stocks;

	@Override
	public void init(ServletConfig config) throws ServletException {
		stocks = new HashMap<String, Stock>();
		Stock stock1 = new Stock(3000.0, 2990.0, "上证指数", "300001");
		Stock stock2 = new Stock(23.32, 22.10, "浦发银行", "000001");
		stocks.put(stock1.getId(), stock1);
		stocks.put(stock2.getId(), stock2);
		System.out.println(stocks);
	}

	public void doGet(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		// 返回两支股票的信息
		// 1.计算随机数
		// ran1介于-20和20之间
		double ran1 = Math.random() * 40 - 20;
		// ran2介于-0.5和0.5之间
		double ran2 = Math.random() - 0.5;

		// 2.将随机数和股票的当前价格进行加或减的操作，得到新的当前价格
		Stock stock1 = stocks.get("300001");
		Stock stock2 = stocks.get("000001");

		double temp;
		temp = stock1.getNow() + ran1;
		// 需要对新的当前价格进行截取，只保留小数点后两位
		temp = (int) (temp * 100) / 100.0;
		stock1.setNow(temp);

		temp = stock2.getNow() + ran2;
		temp = (int) (temp * 100) / 100.00;
		stock2.setNow(temp);

		response.setContentType("text/html;charset=UTF-8");
		PrintWriter out = response.getWriter();
		//out.print(stock1 + "<br>" + stock2 + "<br>");
		// 3.返回两支股票的昨天收益，今天开盘和当前价格
		// 采用json的数据格式返回股票的信息
		StringBuilder builder = new StringBuilder();
		//采用数组的方式回传两个股票对象
		/*builder.append("[{name:\"").append(stock1.getName()).append("\",id:\"")
		 .append(stock1.getId()).append("\",yes:")
		 .append(stock1.getYesterday()).append(",tod:")
		 .append(stock1.getToday()).append(",now:")
		 .append(stock1.getNow())
		 .append("},")
		 .append("{name:\"").append(stock2.getName()).append("\",id:\"")
		 .append(stock2.getId()).append("\",yes:")
		 .append(stock2.getYesterday()).append(",tod:")
		 .append(stock2.getToday()).append(",now:")
		 .append(stock2.getNow()).append("")
		 .append("}]");*/
		//采用对象的方式回传两个股票对象
		//如果回传表示对象的json，需要在最外层加上一个括号，否则页面解析会出错
		builder.append("({\"").append(stock1.getId()).append("\":{name:\"")
				.append(stock1.getName()).append("\",id:\"")
				.append(stock1.getId()).append("\",yes:")
				.append(stock1.getYesterday()).append(",tod:")
				.append(stock1.getToday()).append(",now:")
				.append(stock1.getNow())
				.append("},\"")
				.append(stock2.getId()).append("\":{name:\"")
				.append(stock2.getName()).append("\",id:\"")
				.append(stock2.getId()).append("\",yes:")
				.append(stock2.getYesterday()).append(",tod:")
				.append(stock2.getToday()).append(",now:")
				.append(stock2.getNow()).append("}})");
		out.print(builder.toString());
	}

	public void doPost(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		this.doGet(request, response);
	}

}

2.客户端代码

（1）JQueryStock.html源代码：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head>
		<meta http-equiv="content-type" content="text/html; charset=UTF-8">
		<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
		<script type="text/javascript" src="js/jquerystock.js"></script>
		<title>jquery实例4:动态显示股票信息</title>
	</head>

	<body>
		<div id="300001"><a href="#">上证指数:</a><span></span></div>
		<div id="000001"><a href="#">浦发银行:</a><span></span></div>
		<div id="stock">
			<div id="yes">昨收：<span></span></div>
			<div id="tod">今开：<span></span></div>
			<div id="now">当前：<span></span></div>
		</div>
	</body>
</html>

2.jquerystock.js源代码：

//期待进入页面后就可以开始从服务器段获取数据，然后显示股票价格
var obj;
var sid;
$(document).ready(function() {
	//页面载入时隐藏弹出框
	var stockNode = $("#stock").css("border", "1px solid black")
			.width("150px").css("position", "absolute")
			.css("z-index", "99")
			.css("background-color", "pink")
			.css("color", "blue");
	stockNode.hide();
	var as = $("a");
	//定义鼠标进入股票名称时的操作
	as.mouseover(function(event) {
		//获取到当前股票的代码
		var aNode = $(this);
		var divNode = aNode.parent();
		sid = divNode.attr("id");

		updatediv();
		//需要控制弹出框的位置
		//期待出现在鼠标的右下方
		var myEvent = event || window.event;
		stockNode.css("left", myEvent.clientX + 5 + "px").css("top", myEvent.clientY + 5 + "px");
		//弹出框显示	
		stockNode.show();
	});
	as.mouseout(function() {
		stockNode.hide();
	});
	getInfo();
	//3.每隔一秒钟和服务器交互一次，用户不用刷新页面就可以不断地看到最新的股票信息
	setInterval(getInfo, 1000);
});

function getInfo() {
	//清除缓存
	var t = (new Date()).getTime()
	//1.向服务器发起请求，获取数据
	$.get("GetStockInfoServlet?t=" + t, null, function(data) {
		//2.接收并解析数据
		//var obj = eval(data);
		//在get方法中如果加上"json"后就data就直接是json的对象了
		obj = data;
		//2.1获取两只股票的当前指数信息
		var stock1 = obj["300001"];
		var stock2 = obj["000001"];
		span3 = $("#300001").children("span");
		span3.html(stock1.now);
		if (stock1.now > stock1.yes) {
			//当前价格大于昨天收盘，则显示红色
			span3.css("color", "red");
		} else {
			span3.css("color", "green");
		}
		var span1 = $("#000001").children("span");
		span1.html(stock2.now);
		if (stock2.now > stock2.yes) {
			//当前价格大于昨天收盘，则显示红色
			span1.css("color", "red");
		} else {
			span1.css("color", "green");
		}
		updatediv();
	}, "json");
}

//更新弹出框中的内容
function updatediv() {
	//找到对应的股票对象
	var stockobj = obj[sid];
	//遍历一个js的对象
	for (var proname in stockobj) {
		if (proname != "name") {
			$("#" + proname).children("span").html(stockobj[proname]);
		}
	} 
}

好了，代码完成，现在看看效果图吧


[img]http://dl.iteye.com/upload/attachment/279441/c58c2d55-d760-3b3c-8038-d331377f21ab.jpg[/img]