模拟股票涨跌功能(jquery应用4)

 A:创建股票对象，用于封装一个股票的具体信息:Stock.java

public class Stock implements Serializable
{
    //昨天收盘价
    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.now = 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;
    }

    //返回股票名称和当前价格
    @Override
    public String toString()
    {
        return this.name+":"+this.now;
    }

    
    
}

 

  B:创建服务端代码：GetStocksInfo.java,该servlet用于返回股票的当前信息

 

public class GetStocksInfo extends HttpServlet
{
    //定义一个股票集合
    private Map<String,Stock> stocks;
 
    /**
     * 初始化股票信息
     */
    @Override
    public void init(ServletConfig config)
        throws ServletException
    {
        stocks =new HashMap<String,Stock>();
        //创建股票
        Stock szzs =new Stock(2231.2,2221.4,"上证指数","000001");
        Stock mlzy =new Stock(6.21,6.18,"美利纸业","000815");
        //存入map集合
        stocks.put(szzs.getId(), szzs);
        stocks.put(mlzy.getId(), mlzy);
        System.out.println(stocks);
    }
    
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp)
        throws ServletException, IOException
    {
      //返回这2只股票的随机价格
      //计算随机值
     double sz= Math.random() * 20;
     double ml= Math.random() * 0.5;
     //通过随机数是奇数还是偶数，判断该股票是涨还是跌
    boolean flagsz= ((int)(Math.random()*10))%2==0;
    boolean flagml= ((int)(Math.random()*10))%2==0;
    //得到当前股票
    Stock szzs =stocks.get("000001");
    Stock mlzy =stocks.get("000815");
    double temp;
    //将股票的当前价格根据随机值进行涨和跌操作
     if(flagsz)
     {
       temp=szzs.getNow()+sz;
     }
     else
     {
         temp=szzs.getNow()-sz;
     }
     //重新设置当前价格
     temp =(int)(temp*100)/100.0;
     szzs.setNow(temp);
     
     if(flagml)
     {
         temp=mlzy.getNow()+ml;
     }
     else
     {
         temp=mlzy.getNow()-ml;  
     }
     
     //重新设置当前价格
     temp =(int)(temp*100)/100.0;
     mlzy.setNow(temp);
    //设置页面的内容类型
     resp.setContentType("text/html;charset=utf-8");
     PrintWriter out=resp.getWriter();
     //out.print(szzs+"<br/>"+mlzy);
     //将java对象转成js能够识别的JSON对象
     //(name:value)
     //A:数组格式
      /**
       * [
       *    {name:"上证指数",yes:2231.2,tod:2221.4,now:2231.5},
       *    {name:"美利纸业",yes:6.21,tod:6.18,now:6.32}
       * ]
       */
     StringBuffer sb=new StringBuffer();
//     sb.append("[{name:\"").append(szzs.getName())
//     .append("\",yes:").append(szzs.getYesterday())
//     .append(",tod:").append(szzs.getToday())
//     .append(",now:").append(szzs.getNow()).append("},")
//     .append("{name:\"").append(mlzy.getName())
//     .append("\",yes:").append(mlzy.getYesterday())
//     .append(",tod:").append(mlzy.getToday())
//     .append(",now:").append(mlzy.getNow()).append("}]");
 
     //对象格式
     /**
      * {
      *    "000001":{name:"上证指数",yes:2231.2,tod:2221.4,now:2231.5},
      *    "000815":{name:"美利纸业",yes:6.21,tod:6.18,now:6.32}
      * }
      */
     
   sb.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(mlzy.getId()).append("\":{name:\"")
   .append(mlzy.getName()).append("\",yes:").append(mlzy.getYesterday())
   .append(",tod:").append(mlzy.getToday())
   .append(",now:").append(mlzy.getNow()).append("}})");
 
     out.print(sb.toString());
    }

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp)
        throws ServletException, IOException
    {
        doGet(req, resp);
    }
    
}

 

  C:配置web.xml

 <servlet>
    <servlet-name>getStocksInfo</servlet-name>
    <servlet-class>com.itany.ajax.servler.GetStocksInfo</servlet-class>
   <load-on-startup>1</load-on-startup>
  </servlet>
  
  <servlet-mapping>
     <servlet-name>getStocksInfo</servlet-name>
     <url-pattern>/getStocksInfo</url-pattern>
   </servlet-mapping>

 

D:编写页面：jqueryStock.html

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>Insert title here</title>
<script type="text/javascript" src="js/jquery-1.4.js"></script>
<script type="text/javascript" src="js/jquerystock2.js"></script>
<link rel="stylesheet"  type="text/css" href="css/stock.css">
</head>
<body>
<div id="000001" name="0"><a href="#">上证指数:</a><span></span></div>
<div id="000815" name="1"><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>

E:编写js:jquerystock.js
    完善点1：当前价格自动更新
    完善点2：当前价格大于昨天收盘价，显示红色，否则显示绿色
    修改js:jquerystock.js--->jquerystock1.js 
    完善点3：当鼠标滑到某只股票上时，弹出一个小的子窗口，上面有一些当前股票的信息，如：昨天收盘价
    今天开盘价，当前价(自动更新)
     A:修改jqueryStock.html
     B:设置浮动窗口的样式,编写css:stock.css
     C:修改js:jquerystock1.js--->jquerystock2.js 
    完善点4：控制弹出框的位置
     A:修改jquerystock2.js
    完善点5：将JSON格式数据组装成对象格式
     A:修改GetStocksInfo.java

 

 

var obj;
var sid;
jQuery(function(){
 //alert(1);

 //找到tsock div
 var stockNode=$("#stock");
 //默认隐藏弹出框
 stockNode.hide();
 //查找a节点
 var as=$("a");
 //给a链接绑定mouseover事件
 as.mouseover(function(event){
  //alert(1);

  //得到当前的链接对象
  var aNode=$(this);
  //找到其父节点对象
  var divNode=aNode.parent();
  //数组格式

  //sid = divNode.attr("name");

  //对象格式
  sid = divNode.attr("id");
  //更新弹出框
        updateDIV();
  //控制弹出框的位置

  //A:上下位移
  //找到当前链接的偏移量
  //var offset=aNode.offset();
  //设置弹出框的位置
  //stockNode.css("left",offset.left+"px")
  //         .css("top",offset.top+aNode.height()+"px");
  //B:水平、垂直位移，让弹出框始终出现在鼠标的右下方
        //ff/ie
  var myEvent = event || window.event; 
  stockNode.css("left",myEvent.clientX+5+"px")
           .css("top",myEvent.clientY+5+"px");
  
  //显示弹出框
  stockNode.show();
 });
 //给a链接绑定mouseout事件
 as.mouseout(function(){
  //隐藏弹出框
  stockNode.hide();
 });
 getInfo();
 
 setInterval(getInfo,2000);
});
function getInfo(){
 $.get("getStocksInfo",null,function(data){
  //alert(data);
  //接收并解析数据
  obj=eval(data);
  //alert(obj);
  //取出相关对象(数组格式)
  //var szzs=obj[0];
  //var mlzy=obj[1];
  //取出相关对象(对象格式)
  var szzs=obj["000001"];
  var mlzy=obj["000815"];
  //alert(szzs.yes);
  //找到相关span节点
  var span1 = $("#000001").children("span");
  span1.html(szzs.now);
  var span2 = $("#000815").children("span");
  span2.html(mlzy.now);
  //判断上证指数
  if(szzs.now > szzs.yes){
   span1.css("color","red");
  }
  else{
   span1.css("color","green");   
  }
  //判断美利纸业
  if(mlzy.now > mlzy.yes){
   span2.css("color","red");
  }
  else{
   span2.css("color","green");
  }
  //更新弹出框
        updateDIV();
 });
}

//更新弹出框
function updateDIV(){
 //得到当前股票对象
 var stockObj=obj[sid];
 //遍历该数组
 for(var proname in stockObj){
  //alert(stockObj[proname]);
  if (proname != "name") {
   $("#"+proname).children("span").html(stockObj[proname]);
   //重新设置当前价格为红盘还是绿盘
   if(stockObj.now > stockObj.yes){
    $("#now").children("span").css("color","red");
   }
   else{
    $("#now").children("span").css("color","green");
   }
  }
 } 
}