`
long546324
  • 浏览: 204137 次
  • 性别: Icon_minigender_1
  • 来自: 云南
社区版块
存档分类
最新评论

ASP.NET+JQuery模拟股票信息涨跌(Ajax技术)

ASP.net.netASPAjaxjQuery 
阅读更多
index.html文件 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>JQuery之股票信息</title>
    <link href="css/Stock.css" rel="stylesheet" type="text/css" />

    <script src="js/jquery.js" type="text/javascript"></script>


    <script src="js/Stock.js" type="text/javascript"></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>

Stock.js文件 
//保存服务器端返回的股票对象
var obj;
var divId;
$(function(){
    var stockNode=$("#stock");
    stockNode.css("border","1px solid black").css("background-color","#eee").width("200px")
             .css("position","absolute").css("z-index","50"); 
    stockNode.hide();
    var aNodes=$("a");
    //鼠标进入股票名称时的操作
    aNodes.mouseover(function(event){
        var aNode=$(this);
        var divNode=aNode.parent();
        divId=divNode.attr("id");
        updateInfo();
        //控制弹出框的位置
        //var offset=aNode.offset();
        //stockNode.css("left",offset.left+"px").css("top",offset.top+aNode.height()+"px");
        var myEvent=event || window.event;
        stockNode.css("left",myEvent.clientX+10+"px").css("top",myEvent.clientY+10+"px");
        //显示弹出框
        stockNode.show();
        
    });
     //鼠标离开股票名称时的操作
    aNodes.mouseout(function(){
        stockNode.hide();
    });
    
    getInfo();
    //每一秒钟和服务器交互一次，更新数据信息
    setInterval(getInfo,1000);
    
});

//更新弹出框中的信息
function updateInfo()
{
    var stockObj=obj[divId];
    for(var proName in stockObj){
        if(proName !="name" && proName!="id"){
            $("#"+proName).children("span").html(stockObj[proName]);
        }
    }
}

function getInfo()
{
    //向服务器发送请求    
    $.get("handle/stock.ashx?t=" + (new Date()).valueOf(),function(data){
        //接收解析数据               
        obj=eval(data);
        //获取两只股票的当前指数
        var szzs=obj["300001"];//obj.300001
        var pfyh=obj["000001"];
        /*
        遍历一个对象
        for(var stockid in obj)
        {
            var stock=obj[stockid];
        }
        */
        //找到相应的div节点
        var sz= $("#300001").children("span")
        sz.html(szzs.now);
        if(szzs.now>szzs.yes){
            //当前价格大于昨天收盘，则为红色
            sz.css("color","red");
        }else{
            sz.css("color","green");
        }
        var pf=$("#000001").children("span")
        pf.html(pfyh.now);
        if(pfyh.now>szzs.pfyh){
            //当前价格大于昨天收盘，则为红色
            pf.css("color","red");
        }else{
            pf.css("color","green");
        }    
        updateInfo();           
    });
}

stock.ashx一般处理程序文件 
<%@ WebHandler Language="C#" Class="stock" %>

using System;
using System.Web;
using System.Data;
using System.Collections;
using System.Collections.Generic;
using System.Text;

public class stock : IHttpHandler {
 
    Hashtable ht = new Hashtable();
    
    public void ProcessRequest (HttpContext context) 
    {
        context.Response.ContentType = "text/plain";
        init();
        Random data=new Random();
        double sz = data.NextDouble() * 20;
        double pf = data.NextDouble() * 0.5;
        //true涨，false跌
        bool flagSz = ((int)(data.NextDouble() * 10)) % 2 == 0;
        bool flagPf = ((int)(data.NextDouble() * 10)) % 2 == 0;
        Stock szzs=(Stock)ht["300001"];
        Stock pfyh=(Stock)ht["000001"];
        double temp;
        if (flagSz)
        {
            temp=szzs.Now + sz;
        }
        else
        {
            temp = szzs.Now - sz;
        }
        temp = Math.Round(temp, 2);
        szzs.Now = temp;
        if (flagPf)
        {
            temp = pfyh.Now + pf;
        }
        else
        {
            temp = pfyh.Now - pf;            
        }
        temp = Math.Round(temp, 2);        
        pfyh.Now = temp;              
        //采用json的数据格式返回股票的信息
        //1采用数组的方式返回两个股票信息
        StringBuilder json = new StringBuilder();
        //json.Append("[{name:\"").Append(szzs.Name).Append("\",id:\"").Append(szzs.Id).Append("\",yes:")
        //    .Append(szzs.Yesterday).Append(",tod:").Append(szzs.Today).Append(",now:")
        //    .Append(szzs.Now).Append("},{name:\"").Append(pfyh.Name).Append("\",id:\"")
        //    .Append(pfyh.Id).Append("\",yes:").Append(pfyh.Yesterday).Append(",tod:")
        //    .Append(pfyh.Today).Append(",now:").Append(pfyh.Now).Append("}]");

        //1采用对象的方式返回两个股票信息
        //以对象返回信息时，需要在最外面加上括号，否则页面解析会报错
        json.Append("({")
            .Append("\"")
            .Append(szzs.Id).Append("\":{name:\"").Append(szzs.Name).Append("\",id:\"").Append(szzs.Id).Append("\",yes:")
            .Append(szzs.Yesterday).Append(",tod:").Append(szzs.Today).Append(",now:").Append(szzs.Now)
            .Append("},").Append("\"")
            .Append(pfyh.Id).Append("\":{name:\"").Append(pfyh.Name).Append("\",id:\"").Append(pfyh.Id).Append("\",yes:")
            .Append(pfyh.Yesterday).Append(",tod:").Append(pfyh.Today).Append(",now:").Append(pfyh.Now)
            .Append("}})");
        
        context.Response.Write(json);
        
    }
    
    private void init()
    {
        Stock szzs = new Stock(3000.0, 2999.0, "上证指数", "300001");
        Stock pfyh = new Stock(23.22, 23.50, "浦发银行", "000001");
        ht.Add(szzs.Id, szzs);
        ht.Add(pfyh.Id, pfyh);
    }
    public bool IsReusable {
        get {
            return false;
        }
    }

}

Stock.cs股票实体类文件 
using System;
using System.Data;
using System.Configuration;
using System.Linq;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Xml.Linq;

/// <summary>
///股票实体类
/// </summary>
public class Stock
{
    public Stock() { }
    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;
    }
    private double yesterday;
    public double Yesterday
    {
        get { return yesterday; }
        set { yesterday = value; }
    }

    private double today;
    public double Today
    {
        get { return today; }
        set { today = value; }
    }

    private double now;
    public double Now
    {
        get { return now; }
        set { now = value; }
    }

    private string name;
    public string Name
    {
        get { return name; }
        set { name = value; }
    }

    private string id;
    public string Id
    {
        get { return id; }
        set { id = value; }
    }
}
3
顶
0
踩
分享到：
| JQuery实现可编辑的表格
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics