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

Mr.Cheney · 发表于 2013-2-7 22:27:38

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

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

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

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

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

程序的目录结构如下:

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;}@Overridepublic 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;@Overridepublic 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]);}} }

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

		自动登录	找回密码
密码			立即注册