`

jquery模拟股票信息实时显示

阅读更多
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;

/**
 * 返回股票当前信息的servlet
 */
public class GetStocksInfo extends HttpServlet{
    //保存股票对象的map
    private HashMap<String,Stock> stocks;
    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的map中
        stocks.put(szzs.getId(),szzs);
        stocks.put(pufy.getId(),pufy);

        System.out.println(stocks);
        
    }

    protected void doGet(HttpServletRequest httpServletRequest, HttpServletResponse httpServletResponse) 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);

        httpServletResponse.setContentType("text/html;charset=gb2312");
        PrintWriter out = httpServletResponse.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("}]");
        */
        //采用对象的方式回传两个股票对象
        //如果回传表示对象的json,需要在最外层加上括号,否则页面解析出错
        //如果将out.println 改为out.print 不让其在服务端输出/r/n也可
        builder.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(pfyh.getId()).append("\":{name:\"").append(pfyh.getName()).append("\",yes:")
                .append(pfyh.getYesterday()).append(",tod:")
                .append(pfyh.getToday()).append(",now:").append(pfyh.getNow())
                .append("}")
                .append("})");
        out.println(builder);
        
    }

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

/**
 * 用于保存股票的基本信息
 */
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.yesterday = yesterday;
        this.today = today;
        this.name = name;
        this.id = id;
        this.now = today;
    }

    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.name+":"+this.now;
    }
}


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <title>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>

//期望进入页面后就开始从服务器获取数据,然后显示股票价格
//保存服务器端返回的股票对象
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","blue")
                .css("color","yellow");
        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(event){
            //弹出框隐藏
            stockNode.hide();
        });
        getInfo();
        //3 每隔一秒中和服务器交互一次,用户不用刷新也可以不断看到股票的新信息
        setInterval(getInfo,1000)

});
//从服务器获取数据的方法
function getInfo(){
   //1 向服务器发起请求,获取数据
    $.get("GetStockInfo",null,function(data){
        //2 接收并解析数据
        //obj = eval(data);
        obj=data;
        //2.1 获取两只股票的当前指数
        var szzs = obj["300001"];//obj.s300001
        var pfyh = obj["000001"];
        /*
        * 遍历一个js对象
        * for(var stockid in obj){
        *     var stock = obj[stockid];
        * }
        * */
        //2.2 找到页面中对应的节点,然后填充最新的股票价格
        var span3 = $("#300001").children("span").html(szzs.now);
        if(szzs.now>szzs.yes){
            //当前价格大于昨天收盘,则显示红色
            span3.css("color","red")
        }else{
            span3.css("color","green")
        }
        var span1 = $("#000001").children("span").html(pfyh.now);
        if(pfyh.now>pfyh.yes){
            //当前价格大于昨天收盘,则显示红色
            span1.css("color","red")
        }else{
            span1.css("color","green")
        }
        updatediv();
    },"json")
}
//更新弹出框中的内容
function updatediv(){
    var stockobj = obj[sid];
    for(var proname in stockobj){
        if(proname != "name"){
            //找到对应的弹出框中的div节点,然后找到span字节点,将数据填充
            $("#" + proname).children("span").html(stockobj[proname]);
        }
    }
    
}
分享到:
评论

相关推荐

    AJAX(jquery)模拟股票涨跌实时显示功能

    标题 "AJAX(jquery)模拟股票涨跌实时显示功能" 提到的是使用 AJAX 和 jQuery 技术来创建一个动态更新的股票价格展示功能。在 Web 应用开发中,AJAX(Asynchronous JavaScript and XML)是一种能够让网页在不刷新整个...

    经典jquery案例 经典jquery

    "模拟动态股票"案例则展示了如何实时更新页面上的数据。这通常需要定时从服务器获取新的股票数据,然后使用jQuery的`.html()`或`.text()`方法更新DOM元素的内容。此外,可以结合CSS和jQuery的动画功能来创建动态滚动...

    效果非常好的jQuery数字显示效果

    这种效果常见于计时器、计数器或者实时数据更新的场景,如股票市场、体育赛事分数或网站统计数据等。在描述中提到的"像计分牌一样",这可能是指数字的动态变化过程具有视觉吸引力,可能伴随着平滑过渡、淡入淡出、...

    AJAX股票模拟源代码

    - **视图(View)**:根据模型的状态动态渲染网页,展示股票的实时信息,如K线图、价格、交易量等。当接收到模型的通知时,视图会自动更新。 - **控制器(Controller)**:处理用户操作,如点击买入、卖出按钮。控制器...

    jquery动态数字增加

    "jQuery动态数字翻滚计数到指定数字的文字特效代码"是一个常见的需求,尤其在显示实时更新的数据或者统计数据时。这种效果通常用于网站的访问量统计、股票价格、拍卖竞价等场景,给人一种生动、实时的感觉。 实现这...

    jquery的几个例子程序

    这个例子可能涉及到实时数据更新,例如模拟股票价格变动。jQuery的Ajax功能,如`$.ajax()`或`$.getJSON()`,可以用来异步获取服务器上的最新股票数据,并动态更新页面。同时,可能还使用了定时器来周期性地请求新...

    jquery数字跳动插件Animate Number.zip

    这对于创建更有趣的效果,如模拟股票市场的价格跳动或计数器的瞬间更新,都非常有效。 3. **使用方法**:在网页中引入jQuery库和AnimateNumber插件后,可以使用简单的jQuery选择器和方法来应用动画效果。例如,`$(...

    jQuery自定义数值数字滚动代码

    **jQuery自定义数值数字滚动代码**是一种常见的网页动态效果,常用于展示统计数据或者实时更新的数值,例如股票价格、点击量等。这种效果通过JavaScript库jQuery实现,它能赋予网页元素丰富的交互性和动态视觉吸引力...

    jQuery数字滚动增加插件.zip

    其中,数字滚动增加效果尤为常见,它常用于显示实时更新的数据,如股票价格、计数器等。今天我们将深入探讨一款基于jQuery的数字滚动增加插件,它允许开发者自定义滚动时长和形式,为网页增添生动的视觉效果。 首先...

    jQuery数字滚动增加动画特效.zip

    4. **数字滚动**:数字滚动是一种常见的前端动画,通常用于显示实时更新的数据,如计数器、统计数据或股票价格。在这个项目中,数字可能从一个值平滑过渡到另一个值,模拟计数过程。 5. **index.html**:这是Web...

    Mock-Stock:模拟股票网站。 通过从nasdaq网站上获取数据,它为用户显示所有Nasdaq股票(在“交易”选项卡下)。 它还从Yahoo Finance获得实时股票报价。 它使用MySQL db来存储用户帐户和配置文件。 它通过JQuery使用AJAX调用来动态显示用户的投资组合

    模拟股票 模拟股票网站。 通过从nasdaq网站上获取数据,它为用户显示所有Nasdaq股票(在“交易”选项卡下)。 它还从Yahoo Finance获得实时股票报价。 它使用MySQL db来存储用户帐户和配置文件。 它通过JQuery使用...

    jQuery.Running.js.zip

    - **数字动画**:jQuery.Running.js 的主要功能是将静态的数字转变为动态的滚动显示,无论是向上递增还是向下递减,都能流畅地模拟出数字变化的过程。 - **自定义样式**:通过CSS文件,可以定制滚动数字的字体、...

    jQuery数字滚动不断递增代码.zip

    总结一下,"jQuery数字滚动不断递增代码"是一种使用jQuery库实现的JavaScript特效,它能够模拟数字的动态滚动递增,常见于实时数据的展示。通过HTML、CSS和JavaScript的结合,可以创建出具有视觉吸引力的动态效果。...

    CSS3+jQuery仿IOS股市无缝滚动.zip

    - **定时器(Timers)**:通过设置定时器(`setInterval()`, `setTimeout()`),可以定期自动滚动股票信息,模拟实时刷新的效果。 - **用户交互**:通过监听用户的触摸事件,如滑动,可以控制滚动的开始、停止和...

    Jquery练习4:制作12进制的时钟特效.zip

    在本项目"Jquery练习4:制作12进制的时钟特效.zip"中,我们将探讨如何使用jQuery、JavaScript和HTML技术来...在实际应用中,这种技能可以应用于各种实时数据展示的场景,如实时天气、股票报价或其他动态信息的可视化。

    WEB基础_Ajax_jQuery

    #### 7.5 模拟股票动态信息 通过定时器定期更新股票数据,并用动画效果展示。 ```javascript setInterval(function() { // 获取最新股票数据 var stockData = getStockData(); // 更新DOM $('#stockPrice')....

    html+jquery滚动数字优化版

    在网页上,数字滚动通常用于显示实时更新的数据,如股票价格、计数器或者统计数据等。这种效果可以通过JavaScript或者jQuery实现,通过不断更改数字的值,模拟出一个动态滚动的效果。在未优化的情况下,数字滚动可能...

    stomp.min.js、sockjs.min.js、jquery-3.3.1.min.js

    SockJS模拟了WebSocket接口,当WebSocket不可用时,它会自动选择其他降级的实时传输机制,如Flash Socket、Server-Sent Events (SSE)、Iframe polling等。这样,开发者可以使用统一的WebSocket API来编写代码,而...

    jQuery+CSS3数字滚动统计代码

    而"数字统计"则是指对这些数字进行收集、计算和显示,确保信息的准确性和实时性。 在"jiaoben5919"这个压缩包文件中,可能包含的是实现这一功能的HTML、CSS和JavaScript文件。HTML文件可能包含结构化的数字展示元素...

    jQuery自定义数字滚动插件

    首先,jQuery数字滚动插件主要服务于动态展示数字变化的场景,例如统计数据显示、股票价格滚动或者实时更新的计数器等。这种插件通过自定义动画效果,使数字从一个值平滑过渡到另一个值,为用户界面增加了动态和交互...

Global site tag (gtag.js) - Google Analytics