您的位置：首页 > Web前端 > JavaScript

23、24、25、26股票涨跌功能，JSON格式、红绿色实时显示股票价格的、ToolTip提示框

2009-02-18 23:36 513 查看

一、页面端的html：JQueryStock.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>itcast.cn实例:JQuery实现股票的涨跌功能</title>
<script type="text/javascript" src="jslib/jquery.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>

××××××××××××

二、服务器端处理的代码：GetStockInfor.java(这是一个Servlet)

import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.ServletException;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.HashMap;

/**
* Created by IntelliJ IDEA.
* User: Administrator
* Date: 2009-2-15
* Time: 10:30:10
* To change this template use File | Settings | File Templates.
*/
public class GetStockInfor extends HttpServlet{

private HashMap<String,Stock> stocks;
protected void doGet(HttpServletRequest httpServletRequest, HttpServletResponse httpServletResponse) throws ServletException, IOException {
//1.首先产生一个股票增涨的一个随机数.
double sz = Math.random() * 20;
double py = Math.random() * 0.5;
//2.能过一个奇偶数来判断股票是增还是涨.
boolean flagsz = ((int)(Math.random() * 10)) % 2 == 0;
boolean flagpy = ((int)(Math.random() * 10)) % 2 == 0;

Stock szzs = stocks.get("300001");
Stock pufy = stocks.get("000001");
double temp;
if(flagsz)
{
temp =  szzs.getNow() +  sz;
}
else
{
temp =  szzs.getNow() -  sz;
}

szzs.setNow(((int)(temp * 100)) / 100.0);

if(flagpy)
{
temp =  pufy.getNow() +  py;
}
else
{
temp =  pufy.getNow() -  py;
}
pufy.setNow(((int)(temp * 100)) / 100.0);
//3.将这些信息,显示到页面上去.
httpServletResponse.setContentType("text/html;charset=gb2312");
PrintWriter out = httpServletResponse.getWriter();
//out.println(szzs + "<br />" + pufy);
//将当前的两个股票发送出去
StringBuilder builder = new StringBuilder();
//再进行返回json的数据格式后,需要加上一对括号,脚本端才不会出错

builder.append("({/"").append(szzs.getId()).append("/":{")
.append("name:/"").append(szzs.getName()).append("/",")
.append("yes:").append(szzs.getYesturday()).append(",")
.append("tod:").append(szzs.getToday()).append(",")
.append("now:").append(szzs.getNow()).append("},")

.append("/"").append(pufy.getId()).append("/":{")
.append("name:/"").append(pufy.getName()).append("/",")
.append("yes:").append(pufy.getYesturday()).append(",")
.append("tod:").append(pufy.getToday()).append(",")
.append("now:").append(pufy.getNow()).append("}})");
/*{
"300001":{name:"",
yes:szzs.getYesturday(),
tod:szzs.getToday(),
now:szzs.getNow()
},
"000001":{name:"",
yes:pufy.getYesturday(),
tod:pufy.getToday(),
now:pufy.getNow()
}
}
*/
out.println(builder.toString());
}

protected void doPost(HttpServletRequest httpServletRequest, HttpServletResponse httpServletResponse) throws ServletException, IOException {
doGet(httpServletRequest,httpServletResponse);
}

public void init() throws ServletException {
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(szzs);
}
}

这个Servlet的配制文件：web.xml

<?xml version="1.0" encoding="UTF-8"?>
<web-app 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" version="2.5">
<servlet>
<servlet-name>GetStockInfor</servlet-name>
<servlet-class>GetStockInfor</servlet-class>
<load-on-startup>1</load-on-startup>
</servlet>
<servlet-mapping>
<servlet-name>GetStockInfor</servlet-name>
<url-pattern>/GetStockInfor</url-pattern>
</servlet-mapping>
</web-app>

股票类：Stock.java

/**
* Created by IntelliJ IDEA.
* User: Administrator
* Date: 2009-2-15
* Time: 10:25:10
* To change this template use File | Settings | File Templates.
*/
public class Stock {
/**
* 股票昨天的收盘价
*/
private double yesturday;
/**
* 股票今天的开盘价
*
*/
private double today;
/**
* 股票的当前价
*/
private double now;
/**
* 股票的名称
*/
private String name;
/**
* 股票代号
*/
private String id;

public Stock(double yesturday, double today, String name, String id) {
this.yesturday = yesturday;
this.today = today;
this.now = today;
this.name = name;
this.id = id;
}

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 getYesturday() {
return yesturday;
}

public void setYesturday(double yesturday) {
this.yesturday = yesturday;
}

public String toString() {
return this.name + ":" + this.now;
}

}

××××××××××××××

××××××××××××××

脚本端与服务器互访：jquerystock.js

var obj;
var sid;
//var StockObj
$(document).ready(function(){
// 在这里写你的代码...
//将要显示的ToolTip提示框显示出来
var StockNode = $("#Stock");
StockNode.css("border","1px solid black").css("background","#66FF99").css("color","blue")
.css("position","absolute").css("zIndex","99")
.width("150px");
StockNode.hide();
//鼠标进入连接所产生的事件---ToolTip显示出来
var as = $("a");

as.mouseover(function(event){
StockNode.show();
//将提示框的数据添加
var aNode = $(this);
sid = aNode.parent().attr("id");
updata();
//确定ToolTip所显示的位置
var myEvent = event || window.event;
StockNode.css("left",myEvent.clientX + 5 + "px").css("top",myEvent.clientY + 5 +"px");

});
//鼠标移出时所产生的事件---ToolTip隐藏
as.mouseout(function()
{
StockNode.hide();
});

//1.接收服务器返回来的数据
getInfor();
setInterval(getInfor,1000);//每隔一秒钟刷新一次
});

function getInfor()
{
$.get("GetStockInfor",null,function(data)
{
//1.获取服务器端返回的数据,并用eval将其解析为对象
obj = eval(data);
//将对象中的子对象取出来
var szzs = obj["300001"];
var pufy = obj["000001"];
/*实现对整个数组的遍历
for(stockid in obj)
{
var stock = obj[stockid];
alert(stock.now);
}
*/
//2.将这些解析好的数据放到指定的预留空间去
var span1 = $("#300001");
//将当前价用红绿色给显示出来
if(szzs.now > szzs.yes)
{
span1.css("color","red");
}
else
{
span1.css("color","green");
}
span1.children("span").html(szzs.now);
//
var span2 = $("#000001");
if(pufy.now > pufy.yes)
{
span2.css("color","red");
}
else
{
span2.css("color","green");
}
span2.children("span").html(pufy.now);
//要在回调里操作数据
updata();
});
}
function updata()
{
var StockObj = obj[sid];    //将所点击的股票得到
//将股票的信息放到所预留的空间里去
for(var proname in StockObj)
{
if(proname != "name")
{
$("#" + proname).children("span").html(StockObj[proname]);
}
}
}

eval的作用：

　　eval的作用是可运行的javascript脚本，可将javascript脚本变为对象eval(“”)；该对象里面应加一层括号，避免错误。（｛"300001":｛｝，"00001"｛｝｝）最外面的一层（）就是为了避免编译出错

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航