js拼接htmlonclick(html 拼接)
如果想自己编写量化接口，那我们肯定是需要数据源的，而新浪财经可以说是其中一个大家使用比较多的财经数据来源，那我们要怎么实现新浪财经量化接口api的抓取呢？
首先，我们需要知道新浪财经不同数据的api接口，下面小编也直接给到大家：
获取实时行情数据接口，http://hq.sinajs.cn/list=SZ002241,SH601933；
对于股票的k线，我们可以通过下面的url进行获取：http://image.sinajs.cn/…./…/.gif，下面举几个例子：
查看日K线图： http://image.sinajs.cn/newchart/daily/n/SZ002241.gif
分时线的查询： http://image.sinajs.cn/newchart/min/n/SZ002241.gif
日K线查询： http://image.sinajs.cn/newchart/daily/n/SZ002241.gif
周K线查询： http://image.sinajs.cn/newchart/weekly/n/SZ002241.gif
月K线查询： http://image.sinajs.cn/newchart/monthly/n/SZ002241.gif
对于股票的macd等技术指标图，可以通过一下url获取：http://image.sinajs.cn/…./…/.gif，详见如下：
macd： http://image.sinajs.cn/newchart/macd/SZ002241.gif
kdj： http://image.sinajs.cn/newchart/kdj/SZ002241.gif
展开全文
rsi： http://image.sinajs.cn/newchart/rsi/SZ002241.gif
bias： http://image.sinajs.cn/newchart/bias/SZ002241.gif
具体调用api源码如下：
1 !DOCTYPE html
2 head
3 titleCGM003/title
4 script src="js/libs/jquery-1.11.0.js"/script
5 style
6 body{
7 font-size:13px;
8 }
9 td{
10 padding:1px 2px;
11 border-bottom:1px solid gray;
12 text-align:right;
13 vertical-align:bottom;
14 white-space:nowrap;
15 }
16 .red{
17 color:red;
18 }
19 .green{
20 color:green;
21 }
22 #infoTbl{
23 font-size:15px;
24 }
25 /style
26 /head
27 body
28 section
29 header
30 间隔:input type="number" id="refreshTime" min="100" max="5000" value="1000" /毫秒
31 span id="refresh" style="cursor:pointer; text-decoration:underline; color:blue;"/span
32 span id="lastTime"/span
33 （字体： span style="cursor:pointer; text-decoration:underline; color:blue;" onclick="$('#infoTbl').css('font-size','15px');"小/spannbsp;nbsp;nbsp;span style="cursor:pointer; text-decoration:underline; color:blue;" onclick="$('#infoTbl').css('font-size','20px');"中/spannbsp;nbsp;nbsp;span style="cursor:pointer; text-decoration:underline; color:blue;" onclick="$('#infoTbl').css('font-size','25px');"大/spannbsp;nbsp;nbsp;span style="cursor:pointer; text-decoration:underline; color:blue;" onclick="$('#infoTbl').css('font-size','55px');"超/span）
34 br /
35 select id="market"
36 option value="sh" selected 上海/option
37 option value="sz" 深圳/option
38 /select
39 代码：
40 input type="text" size="7" id="code" value='' /
41 span style="cursor:pointer; text-decoration:underline; color:blue;" onclick="addStock();"添加/span
42 /header
43 article
44 table id="infoTbl"
45 /table
46 /article
47 /section
48
49 script
50 // prototype of Date to add [format] meathod
51 Date.prototype.format = function(format){
52 var o = {
53 "M+" : this.getMonth()+1, //month
54 "d+" : this.getDate(), //day
55 "h+" : this.getHours(), //hour
56 "m+" : this.getMinutes(), //minute
57 "s+" : this.getSeconds(), //second
58 "q+" : Math.floor((this.getMonth()+3)/3), //quarter
59 "S" : this.getMilliseconds() //millisecond
60 }
61
62 if(/(y+)/.test(format)) {
63 format = format.replace(RegExp.$1, (this.getFullYear()+"").substr(4 - RegExp.$1.length));
64 }
65
66 for(var k in o) {
67 if(new RegExp("("+ k +")").test(format)) {
68 format = format.replace(RegExp.$1, RegExp.$1.length==1 ? o[k] : ("00"+ o[k]).substr((""+ o[k]).length));
69 }
70 }
71 return format;
72 };
73 // array remove all
74 Array.prototype.removeAll = function()
75 {
76 while(this.length 0)
77 this.pop();
78 }
79 // var init
80 var stockList = ["sh000001","sh600461","sh601186","sh601628","sz399001"],
81 rowHtml = "tr style='color:{%C%};'td{%Nm%}/tdtdb{%Now%}/b/tdtd{%DiffPrice%}/tdtd{%DiffPer%}/tdtd{%Vol%}/tdtd style='color:{%HighC%};'{%High%}/tdtd style='color:{%lowC%};'{%Low%}/tdtd{%delete%}/tdtd{%More%}/td/tr",
82 nowT,
83 IntervalObj = null,
84 refreshSpan;
85
86 // 不在申请的js Url后加时间
87 $.ajaxSetup({
88 cache: true
89 });
90
91 // init fun
92 $(function(){
93 refreshSpan = $("#refreshTime").val();
94 $("#refresh").html("开始刷新").click(function(e){
95 if(null != IntervalObj){
96 clearInterval(IntervalObj);
97 IntervalObj = null;
98 $(this).html("开始刷新");
99 }else{
100 doRefresh();
101 IntervalObj = setInterval(doRefresh,refreshSpan);
102 $(this).html("停止刷新");
103 }
104 });
105 $("#refresh").click();
106 });
107 function doRefresh(){
108 refreshSpan = $("#refreshTime").val();
109 nowT = new Date().format("yyyyMMddhhmmssSS");
110 $("#infoTbl").html("");
111 for(var i = 0; i stockList.length; i++){
112 $.getScript('http://hq.sinajs.cn/a='+nowT+'list=' + stockList[i],callBack1(stockList[i]));
113 }
114 }
115 function callBack1(nm){
116 var goOn = true;
117 eval("if('undefined' == typeof(hq_str_"+nm+")) goOn = false;");
118 if(goOn){
119 //try{
120 eval("var tmpStr = hq_str_"+nm+";");
121 var tmp = tmpStr.split(",");
122 var rowStr = rowHtml;
123 rowStr = rowStr.replace(new RegExp("{%Nm%}", 'g'), tmp[0]);
124 rowStr = rowStr.replace(new RegExp("{%Now%}", 'g'), tmp[3]);
125 rowStr = rowStr.replace(new RegExp("{%C%}", 'g'), (tmp[3]-tmp[2])0?"red":((tmp[3]-tmp[2])0?"green":"gray"));
126 rowStr = rowStr.replace(new RegExp("{%DiffPrice%}", 'g'), Math.round((tmp[3]-tmp[2])*100) / 100);
127 rowStr = rowStr.replace(new RegExp("{%DiffPer%}", 'g'), Math.round((tmp[3]-tmp[2])/tmp[2] * 10000) / 100 +"%");
128 rowStr = rowStr.replace(new RegExp("{%Vol%}", 'g'), tmp[8]/100);
129 rowStr = rowStr.replace(new RegExp("{%High%}", 'g'), tmp[4]);
130 rowStr = rowStr.replace(new RegExp("{%HighC%}", 'g'), (tmp[4]tmp[3])?"red":((tmp[4]tmp[3])?"green":"gray"));
131 rowStr = rowStr.replace(new RegExp("{%Low%}", 'g'), tmp[5]);
132 rowStr = rowStr.replace(new RegExp("{%LowC%}", 'g'), (tmp[5]tmp[3])?"red":((tmp[5]tmp[3])?"green":"gray"));
133 rowStr = rowStr.replace(new RegExp("{%delete%}", 'g'),"span title='删除' style='cursor:pointer;' οnclick='$(this).parent().parent().remove();delStock(\""+nm+"\")'删除/span");
134 //rowStr = rowStr.replace(new RegExp("{%More%}", 'g'), "img height='100' src='http://image.sinajs.cn/newchart/min/n/"+nm+".gif' /"); // 图片
135 rowStr = rowStr.replace(new RegExp("{%More%}", 'g'),"");
136
137 $("#infoTbl").append(rowStr);
138 $("#lastTime").html((new Date()).format("hh:mm:ss"));
139 //}catch(e){clearInterval(IntervalObj);}
140 }
141 }
142 function delStock(nm){
143 var delIndex = -1;
144 for(var i = 0; i stockList.length; i++){
145 if(stockList[i]==nm){
146 delIndex = i;
147 break;
148 }
149 }
150 if(delIndex != -1)
151 stockList.splice(delIndex,1);
152 }
153 function addStock(){
154 var delIndex = -1;
155 var cd = $("#market").val() + "" + $("#code").val();
156 for(var i = 0; i stockList.length; i++){
157 if(stockList[i]==cd){
158 delIndex = i;
159 break;
160 }
161 }
162 if(delIndex == -1){
163 stockList.push(cd);
164 $("#refresh").click().click();
165 console.log(cd);
166 }else{
167 alert("已存在");
168 }
169 }
170 /script
171 /body
172 /html
对于想自己制作新浪财经量化接口的小伙伴，小编最多就帮到这个程度了，大家也可以多研究研究，其实量化接口的数据源也不一定是新浪，东方财富、wind都是不错的选择，大家可以举一反三，多尝试一下不同的api接口效果有什么不同。
