在上一个项目的基础上学习该实例:
步骤1.新建bean
package bean;
/**
* 用于保存股票的基本信息
*/
public class Stock {
//昨天的收盘价
private double yesterday;
//今天的开盘价
private double today;
//当前价格
private double now;
//股票名称
private String name;
//股票代码
private String id;
public Stock(){}
public Stock(double yesterday, double today, String name, String id) {
super();
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;
}
public String toString(){
return this.name + ":" + this.now;
}
}
步骤2.新建servlet
package servlet;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.HashMap;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import bean.Stock;
/**
* 返回股票当前信息的servlet
*/
public class GetStocksInfo extends HttpServlet {
private static final long serialVersionUID = -8644886633753734374L;
//保存股票信息的map
private HashMap<String, Stock> stocks;
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
//返回两只股票的价格信息
//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("300001");
Stock pfyh = stocks.get("000001");
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);
response.setContentType("text/html;charset=UTF-8");
PrintWriter out = response.getWriter();
//out.println(szzs + "<br/>" + pfyh);
//3.返回两只股票的昨天收盘,今天开盘和当前价格
//采用json的数据格式返回股票的信息
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("}],");
*/
//采用对象的方式回传两个股票对象
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 {
doGet(request,response);
}
public void init() throws ServletException {
stocks = new HashMap<String, Stock>();
//创建股票
Stock szzs = new Stock(3000.0,2990.1,"上证指数","300001");
Stock pfyh = new Stock(23.22,23.50,"浦发银行","000001");
//将两只股票保存在stocks的map中
stocks.put(szzs.getId(), szzs);
stocks.put(pfyh.getId(), pfyh);
}
}
web.xml
<?xml version="1.0" encoding="UTF-8"?> <web-app version="2.5" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"> <servlet> <servlet-name>GetStocksInfo</servlet-name> <servlet-class>servlet.GetStocksInfo</servlet-class> </servlet> <servlet-mapping> <servlet-name>GetStocksInfo</servlet-name> <url-pattern>/GetStocksInfo</url-pattern> </servlet-mapping> <welcome-file-list> <welcome-file>index.jsp</welcome-file> </welcome-file-list> </web-app>
步骤3.新建html---JqueryStock.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Jquery实例:动态股票价格</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">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<script type="text/javascript" src="jslib/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="jslib/jquerystock.js"></script>
</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>
步骤4.新建js------jquerystock.js
//期望进入页面后可以开始从服务器端获取数据,然后显示股票价格 var obj; var sid; $(document).ready(function () { //页面载入时隐藏弹出窗口 var stockNode = $("#stock").css("border", "1px solid black").css("width", "180px").css("position","absolute") .css("background-color","blue").css("color","yellow").css("z-index","99"); stockNode.hide(); var as = $("a"); //定义鼠标进入股票名称时的操作 as.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 + 5 + "px").css("top", myEvent.clientY + 5 + "px"); //弹出框显示详细信息 stockNode.show(); }); //定义鼠标离开股票名时的操作 as.mouseout(function () { //弹出框隐藏 stockNode.hide(); }); getInfo(); //3.每个一秒钟和服务器交互一次,用户不用刷新页面就可以不断的看到最新的股票信息 setInterval(getInfo, 1000); }); //从服务器端获取数据并显示在页面上的方法 function getInfo() { //1.向服务器发起请求,获取数据 var url = "GetStocksInfo"; //解决IE缓存问题 url = convertURL(url); $.get(url, null, function (data) { //2.接收并解析数据 obj = eval(data); //2.1获取两只股票的当前指数信息 var szzs = obj["300001"]; var pfyh = obj["000001"]; /* 遍历一个js的对象 for(var stockid in obj){ var stock = obj[stockid]; } */ //2.2找到页面中对应的节点,然后填充最新的股票价格 var span3 = $("#300001").children("span"); span3.html(szzs.now); if (szzs.now > szzs.yes) { span3.css("color", "green"); } else { span3.css("color", "red"); } var span1 = $("#000001").children("span"); span1.html(pfyh.now); if (pfyh.now > pfyh.yes) { span1.css("color", "green"); } else { span1.css("color", "red"); } updatediv(); }); } //弹出框更新信息 function updatediv() { var stockObj = obj[sid]; for (var proname in stockObj) { if (proname != name) { //找到对应的div节点并找到其子节点span,并将数据放进去 $("#" + proname).children("span").html(stockObj[proname]); } } } //时间戳函数 function convertURL(url) { //获取时间戳 var timestamp = (new Date()).valueOf(); //将时间戳拼接在url路径上 if (url.indexOf("?") >= 0) { url = url + "&t=" + timestamp; alert(url); } else { url = url + "?t=" + timestamp; } return url; }
然后访问http://localhost:8080/JqueryTrain/JqueryStock.html即可!!!
在线Jquery 超炫API http://jquery-api-zh-cn.googlecode.com/svn/trunk/index.html