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

时间：2010-07-17 来源：mr-cheney

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

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

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