Jqueryajax简单模拟股票涨跌

Jquery

采用json数据格式和xml和服务端进行交互

达到效果：进入这个页面不用刷新，就可以每个一定时间看到最新的股票指数，另外当把鼠标移动到股票上去，还可以看到这个股票的更详细的信息，比如昨天的收盘价，今天的开盘价，当前的价格，复杂点还有最高价、最低价、涨幅等，还会根据当前的价格跟昨天的价格的对比，让当前价格显示为绿色或者红色。

一、首先创建服务端的java代码：

1. 创建bean，保存股票的一些信息，收盘价、开盘价、当前价格（为了简单起见只显示三个属性）

public class Stock {
private double yesterday;
private double today;
private double now;

private String name;
private String id;
省去geter/seter方法

servlet

public class GetStocksInfo extends HttpServlet{

创建servlet时，因为是股票数据，所以要在servlet启动时就创建对象，所以初始化init（ServletConfig config）

@Override
public void init(ServletConfig config) throws ServletException {
// TODO Auto-generated method stub
stocks=new HashMap<String,Stock>();
//创建股票、上证指数、深证成指
Stock szzs=new Stock(3000.0,2990.1,"上证指数","300001");
Stock pufy=new Stock(23.22,23.50,"浦发银行","000001");
stocks.put(szzs.getId(),szzs);
stocks.put(pufy.getId(),pufy);
System.out.println(stocks);
}

股票价格：每次页面请求的时候，就可以取到一个新的价格，sevlet中的价格一直在变动的，最简单的实现方式是页面又一次请求过来，就算一个随机数，在原有的股票价格上或增或减，最后把当前价格、见天的开盘价和昨天的收盘价都一起返回给页面端，页面就会看到一个不断变化的股票指数。

protected void doGet(HttpServletRequest req, HttpServletResponse resp)
throws ServletException, IOException {
//返回两只股票的价格信息
//计算随机数

Double sz =Math.random()*20;
Double pf=Math.random()*0.5;//返回的结果是0.0--1

boolean flagsz=(Math.random() > 0.5);
boolean flagpf=(Math.random() > 0.5);
//将随机数和股票的当前价格进行加或者减，得到新的股票价格
Stock szzs=stocks.get("300001");
Stock pfyh=stocks.get("000001");
System.out.println(szzs);
double temp = 0;
if(flagsz){
temp=szzs.getNow()+sz;
}else{
temp=szzs.getNow()-sz;
}
//需要对当前价格进行截取
temp=(int)(temp*100)/100.0;
szzs.setNow(temp);

if(flagpf){
temp=pfyh.getNow()+pf;
}else{
temp=pfyh.getNow()-pf;
}
temp=(int)(temp*100)/100.0;
pfyh.setNow(temp);
//返回昨天收盘、当前价格、今天开盘价格
resp.setContentType("text/html;charset=utf-8");
resp.getWriter().print(pfyh+"<br/>"+szzs);
System.out.println("pfyh"+pfyh+"\n"+"szzs"+szzs);
}

首先，以Json的形式返回两只股票的信息。

可以使用原始的方式，但这里使用Gson工具：

ArrayList<Stock> stocklist=new ArrayList<Stock>();
stocklist.add(pfyh);
stocklist.add(szzs);
Gson gson = new Gson();
gson.toJson(stocklist);
返回的结果为：
[{"yesterday":23.22,"today":23.5,"now":23.56,"name":"浦发银行","id":"000001"},
{"yesterday":3000.0,"today":2990.1,"now":2996.42,"name":"上证指数","id":"300001"}]

var arr=[{"yesterday":23.22,"today":23.5,"now":23.56,"name":"浦发银行","id":"000001"},{"yesterday":3000.0,"today":2990.1,"now":2996.42,"name":"上证指数","id":"300001"}];
eval(arr);

接下来就是如何在前端页面展示了：

由于这个代码比较随意简单，就不展示了，样式如下：



接下来的实现就是，当鼠标浮在股票上的时候弹出一个窗口来显示当前股票的详细信息（使窗口弹出的位置为当前节点的正下方，鼠标位置的右下方）：

给元素添加鼠标悬浮事件：

对象.mousevoer(function(){
//获取当前股票的代码
var aNode=$(this);
var divNode=aNode.parent();
sid= divNode.attr("id");
//找到对应的股票对象
updatediv();
//控制弹出框的位置
var offset=aNode.offset();
<!--1.找到当前链接悬浮的位置
2.设置弹出框的位置
注意：位置使用的是offset（）函数，此函数有两个属性，分别是指定对象的上边距（top）和左边距（left），使用这个函数就可以知道所有元素的具体位置了。-->
stockNode.css("left",offset.left+"px")
.css("top",offset.top+aNode.height()+"px");
//弹出框显示
stockNode.show();
});

鼠标右下方显示，只需要传递一个参数，event，这个参数是浏览器传递过来的，代码变更为：

//接受浏览器传递的event参数,此参数的两个属性clientX和clientY定位鼠标的具体位置。
var myEvent= event || window.event;
stockNode.css("left",myEvent.clientX+5+"px")
.css("top",myEvent.clientY+5+"px");

具体显示效果如下：