ASP.NET+JQuery模擬股票信息漲跌(Ajax技術)

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; }
}
}
發佈了65 篇原創文章 · 獲贊 0 · 訪問量 2萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章