股票即时查看功能的实现

在某些商务系统中，往往需要实现类似QQ这样的股票即时查看功能，以便将我关注的股票即时涨跌情况进行反馈，想要实现这个功能，其实并不是很难，我这里使用的是新浪股票API，利用Javascript即可实现，这里js框架使用JQuery，主要用到其Ajax函数，整体效果如下，查看该效果演示地址：http://t.faqee.com

 如何实现一个自动提示的控件这里并不做讲解，也不是本篇文章的重点，故此略过，总体实现步骤和几个重要的函数代码如下：

1. 新浪股票的K线图等保存的路径类似：http://image.sinajs.cn/newchart/图形类别/n/s_[上证或深证][股票代码].gif
2. 新浪股票的指标数据获取地址：http://hq.sinajs.cn/list=s_[上证或深证][股票代码]

有了这两个主要的获取路径就可以编写以下主要的函数代码：

1. 获取某一股票信息：

     function qStock(groupid,code){
         var surl = "http://hq.sinajs.cn/list=s_sh"+code;
         var myvar = "hq_str_s_sh";
         if(groupid.indexOf("深")>=0){
        	 surl = "http://hq.sinajs.cn/list=s_sz"+code;
        	 myvar = "hq_str_s_sz";
         }
         
         loadScript(surl,"js");
    	 window.setTimeout(function(){
        	 eval("var ct = "+myvar+code+".split(',');");
			 var stockName = ct[0];
			 var stock_today_ds = ct[1];
			 var stock_price=ct[2];
			 var stock_zd=ct[3];
			 var stock_cjl=ct[4];
			 var stock_cje=ct[5];
        	 var func_tu = "<select οnchange=\"doStatPic('"+groupid+"','"+code+"',this.value)\"><option>==请选择==</option><option value='daily'>K线图</option><option value='min'>分时图</option><option value='weekly'>周K图</option><option value='monthly'>月K图</option></select>";
             var detailStr = "<p>["+groupid+"]"+stockName+"详细信息：</p>"
             +"<p>指数名称："+stockName+"</p>"
             +"<p>当前点数："+stock_today_ds+"</p>"
             +"<p>当前价格："+stock_price+"</p>"
             +"<p>涨跌率："+stock_zd+"</p>"
             +"<p>成交量（手）："+stock_cjl+"</p>"
             +"<p>成交额（万元）："+stock_cje+"</p>";
			 var temp_zd = ((stock_zd+"").indexOf("-")>=0)?("<span style='color:green;font-weight:bold;'>"+stock_zd+"%</span>"):("<span style='color:red;font-weight:bold;'>"+stock_zd+"%</span>");
        	 var str ="<table id='tbl_"+code+"' width=\"95%\"><tr><td width=160><a href=\"javascript:top.FaqeeUtils.alert({html:'"+detailStr+"',title:'详细信息'});\">["+groupid+"]"+stockName+"</a></td><td width=80>"
        	 +temp_zd+
        	 "</td><td align='right'>"+func_tu +"&nbsp;<a href=\"javascript:delStock('"+code+"')\"><img border=0 src=\"<%=path%>/images/cross.png\" /></a></td></tr></table>";     
        	 $("#stockresult").append(str);
        	 $("#stockcode").val("");
    	 },1000);
     }

1. 删除某股票：

		 var myurl = '<%=path%>/AjaxServlet?group=stock&act=delete&code='+code+'&callback=?';
 		$.getJSON(myurl,function(data){
     		if(data.res>0){
     			$("#tbl_"+code).remove();
     		}
 		});

 

1. 增加某股票：

        	var myurl = '<%=path%>/AjaxServlet?group=stock&act=add&code='+item.id+'&g='+
        	encodeURIComponent(encodeURIComponent(item.groupid))+'&callback=?';
    		$.getJSON(myurl,function(data){
        		if(data.res>0){
        			qStock(item.groupid,item.id);
        		}else{
            		alert("添加股票失败，请重试！");
        		}
    		}); 

 

1. 各种股票K线图：

		var temppic = "";
		if(groupid.indexOf("深")>=0){
			temppic = "http://image.sinajs.cn/newchart/"+thisvalue+"/n/s_sz"+code+".gif";
		}else{
			temppic = "http://image.sinajs.cn/newchart/"+thisvalue+"/n/sh"+code+".gif";
		}
		temppic = "<img border=0 src='"+temppic+"'/>";
		top.FaqeeUtils.openHTMLWnd({html:temppic,title:"曲线图",width:580,height:380});