AJAX(jquery)模拟股票涨跌实时显示功能
股票的实体bean：Stock.java内容如下：
package bean;
//用于保存股票的基本信息
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.now = today;
this.yesterday = yesterday;
this.today = today;
this.name = name;
this.id = id;
}
public double getYesterday() {
return yesterday;
}
public void setYesterday(double yesterday) {
this.yesterday = yesterday;
}
public double getToday() {
return today;
}
public void setToday(double today) {
this.today = today;
}
public double getNow() {
return now;
}
public void setNow(double now) {
this.now = now;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public String getId() {
return id;
}
public void setId(String id) {
this.id = id;
}
public String toString() {
return this.now+":"+id;
}
}
后台控制使用servlet
GetStockInfo.java内容如下：
package service;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.HashMap;
import java.util.Map;
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 GetStockInfo extends HttpServlet {
//保存股票的map
private Map<String,Stock> stocks = new HashMap<String,Stock>();
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.setCharacterEncoding("utf-8");
response.setContentType("text/html;charset=utf-8");
PrintWriter out = response.getWriter();
//返回两只股票的价格信息
//1.计算随机数
double sz = Math.random() + 20;
double pf = Math.random() * 0.5;
boolean flagsz = ((int)(Math.random() * 10)) % 2 ==0;
boolean flagpf = ((int)(Math.random() * 10)) % 2 ==0;
//2.将随机数和股票的当前价格进行加或减得操作，得到新的当前价
Stock szzs = stocks.get("3001");
Stock pfyh = stocks.get("0001");
double temp;
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);
//out.println(szzs+"<br />"+pfyh);
//3.放回股票的昨天收盘，今天开盘和当前价格
//采用jeson的数据格式返回股票的信息
StringBuilder builder = new StringBuilder();
//采用数组的方式回传两个股票对象
/* builder.append("[{name:\"").append(szzs.getName()).append("\",id:\"").append(szzs.getId())
.append("\",yes:").append(szzs.getYesterday()).append(",tod:").append(szzs.getToday())
.append(",now:").append(szzs.getNow())
.append("},")
.append("{name:\"").append(pfyh.getName()).append("\",id:\"").append(pfyh.getId())
.append("\",yes:").append(pfyh.getYesterday()).append(",tod:").append(pfyh.getToday())
.append(",now:").append(pfyh.getNow())
.append("}]");
out.println(builder);
*/
//采用对象的方式回传两个股票对象
builder.append("({")
.append("\"").append(szzs.getId()).append("\":{name:\"").append(szzs.getName())
.append("\",yes:").append(szzs.getYesterday()).append(",tod:").append(szzs.getToday())
.append(",now:").append(szzs.getNow())
.append("},")
.append("\"").append(pfyh.getId()).append("\":{name:\"").append(pfyh.getName())
.append("\",yes:").append(pfyh.getYesterday()).append(",tod:").append(pfyh.getToday())
.append(",now:").append(pfyh.getNow())
.append("}})");
out.print(builder);
}
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
this.doGet(request, response);
}
public void init(ServletConfig servletConfig) throws ServletException{
Stock szzs = new Stock(3000.0,2990.1,"上证指数","3001");
Stock pfyh = new Stock(23.22,23.50,"浦发银行","0001");
stocks.put(szzs.getId(), szzs);
stocks.put(pfyh.getId(), pfyh);
System.out.println(stocks);
}
}
页面文件jqueryStock.html:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>jqueryJQuery实例：动态股票信息</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="jqueryLib/jquery-1.4.1.js"></script>
<script type="text/javascript" src="jqueryLib/jquerystock.js"></script>
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
</head>
<div id="3001"><a href="#">上证指数:</a><span></span></div>
<div id="0001"><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>
</body>
</html>
脚本文件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","gray")
.css("color","yellow");
stockNode.hide();
var aa = $("a");
//定义鼠标进入股票名称时的操作
aa.mouseover(function(event) {
//获取到当前股票的代码
var aNode = $(this);
var divNode = aNode.parent();
sid = divNode.attr("id");
updatediv();
//需要控制弹出框的位置
/*
//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 + "px").css("top",myEvent.clientY + 5 + "px");
//弹出框显示
stockNode.show();
});
//定义鼠标离开股票名称时的操作
aa.mouseout(function() {
//弹出框隐藏
stockNode.hide();
});
getInfo();
//3.每隔一秒和服务器交互一次，用户不用刷新即可看到最新的股票信息
setInterval(getInfo,1000); //setInterval()是javascript的函数
});
//从服务器获取数据并显示页面的方法
function getInfo() {
//1.向服务器发起请求，获取数据
$.get("GetStockInfo",null,function(data) {
//2.接收并解析数据
obj = eval(data);
//2.1获取当前两只股票的当前指数值
var szzs = obj['3001'];//也可以用obj.3001
var pfyh = obj['0001'];
/*遍历一个js的对象
* for(var stockid obj){
* var stcok = obj;
* }
* */
//2.2找到页面对应的节点然后填充新的股票价格
var span3 = $('#3001').children("span");
span3.html(szzs.now);
if(szzs.now > szzs.yes) {
//当前价格大于昨天收盘价显示红色
span3.css('color','red');
}else {
span3.css('color','green');
}
var span4 = $('#0001').children("span");
span4.html(pfyh.now);
if(pfyh.now > pfyh.yes){
span4.css('color','red');
}else {
span4.css('color','green');
}
updatediv();
});
}
//更新弹出框中的内容
function updatediv() {
//找到对应的股票对象
var stockObj = obj;
var now = $('#now');//找到now节点的span
for(var proname in stockObj) {
if(proname != "name") {
//找到对应的弹出框中的div节点，然后找到span节点在数据填充
var span6= $('#' + proname).children('span');
span6.html(stockObj);
}
if(stockObj.now > stockObj.yes) {
now.css('color','red');
}else {
now.css('color','green');
}
}
}
说明：stock.rar中是源码文件其中有jquery的lib库！！！
页:
[1]