今日闲来无事,把上次写的代码稍微改了改。增加了动态追加和删除股票信息的功能(代码基于jquery运行:http://jquery.com/) 。由于对Ajax技术的认识还只是在初级阶段,总觉得这么些有点别扭,希望大虾能够指点一二。
<
html
>
< head >
< title > ajax test </ title >
< meta http-equiv ="Content-Type" content ="text/html; charset=UTF-8" />
< script type ="text/javascript" src ="jquery.js" ></ script >
< script type ="text/javascript" > ...
function ajaxRequest()...{
var url = $("#stockurl").val() + $("#stockinit").val();
$.ajax(...{
url: url,
type: 'GET',
dataType: 'html',
timeout: 2000,
success: function(response)...{
var stocks = response.split(';');
for(var i=0; i<stocks.length-1; i++)...{
var content = stocks[i];
var temp1 = content.split('=')[0];
var temp2 = content.split('=')[1];
var code = temp1.substr(temp1.length - 6, 6);
var temp3 = temp2.replace('"', '');
var name = temp3.split(',')[0];
var tday_f = temp3.split(',')[1];
var yest_f = temp3.split(',')[2];
var curr_f = temp3.split(',')[3];
var temp_f = curr_f - yest_f;
$('#a'+i).html(code);
$('#b'+i).html(name);
if(curr_f > yest_f) ...{
$('#c'+i).html("<font color='red'>" + curr_f + "</font>");
} else if(curr_f < yest_f) ...{
$('#c'+i).html("<font color='green'>" + curr_f + "</font>");
} else ...{
$('#c'+i).html(curr_f);
}
$('#d'+i).html(tday_f);
$('#e'+i).html(yest_f);
if(temp_f > 0) ...{
$('#f'+i).html("<font color='red'>" + temp_f.toFixed(2) + "</font>");
$('#g'+i).html("<font color='red'>" + ((temp_f / yest_f) * 100).toFixed(2) + "</font> % ");
} else if(temp_f < 0) ...{
$('#f'+i).html("<font color='green'>" + temp_f.toFixed(2) + "</font>");
$('#g'+i).html("<font color='green'>" + ((temp_f / yest_f) * 100).toFixed(2) + "</font> % ");
} else ...{
$('#f'+i).html(temp_f.toFixed(2));
$('#g'+i).html(((temp_f / yest_f) * 100).toFixed(2) + " % ");
}
$('#h'+i).html(temp3.split(',')[4]);
$('#i'+i).html(temp3.split(',')[5]);
}
}
});
}
$(document).ready(function()...{
var stocks = $("#stockinit").val().split(',');
for(var i=0; i<stocks.length; i++)...{
addRows();
}
$("#insrow").click(function()...{
var stockcd = $("#stockid").val();
if(stockcd == "")...{
alert("股票代号不能为空!");
$("#stockid").focus();
return;
}
if(stockcd.length != 6)...{
alert("股票代号只能是6位!");
$("#stockid").focus();
return;
}
var div = 'sh';
if(document.getElementById("sz_id").checked)...{ div = "sz";}
var stocks = $("#stockinit").val();
$("#stockinit").val(stocks + "," + div + stockcd);
addRows();
});
$("#delrow").click(function()...{
var table = document.getElementById("tableId");
var index = table.rows.length;
if (index < 2)...{
alert("已经没有可删除的行了!");
} else ...{
table.deleteRow(index - 1);
var stockvalue = $("#stockinit").val();
var count = stockvalue.split(',').length;
if(count == 1) ...{
stockvalue = "";
} else ...{
stockvalue = stockvalue.substr(0, stockvalue.length - 9);
}
$("#stockinit").val(stockvalue);
}
});
window.setInterval("ajaxRequest()",3000);
});
function addRows()...{
var table = document.getElementById("tableId");
var index = table.rows.length;
var str="";
var row = index - 1;
str+='<tr class="tr_cls">'
str+='<td align="center"><span id="' + "a" + row + '"></span></td>'
str+='<td align="center"><span id="' + "b" + row + '"></span></td>'
str+='<td align="center"><span id="' + "c" + row + '"></span></td>'
str+='<td align="center"><span id="' + "d" + row + '"></span></td>'
str+='<td align="center"><span id="' + "e" + row + '"></span></td>'
str+='<td align="center"><span id="' + "f" + row + '"></span></td>'
str+='<td align="center"><span id="' + "g" + row + '"></span></td>'
str+='<td align="center"><span id="' + "h" + row + '"></span></td>'
str+='<td align="center"><span id="' + "i" + row + '"></span></td>'
str+='</tr>';
$("#tablebody").append(str);
}
</ script >
< style > ...
.tr_cls {...}{
height:30px;
font-size:16px;
font-family:"Times New Roman", Times, serif;
background-color:#FFFFCC
}
</ style >
</ head >
< body >
< form >
< input type ="hidden" id ="stockurl" value ="http://hq.sinajs.cn/list=" />
< input type ="hidden" id ="stockinit" value ="sh000001,sz399001,sh601939,sh600016,sh600528,sh600667,sh601390,sh601857,sz000532,sh600019,sh601111,sh601600,sh601006,sh601333,sh601398,sh601988,sh601328" />
< table width ="800" border ="0" align ="center" cellpadding ="0" cellspacing ="0" >
< tr >
< td width ="115px" >
代号: < input type ="text" id ="stockid" size ="6" >
</ td >
< td width ="150px" >
区分:上海 < input type ="radio" name ="rad" id ="sh_id" checked > 深证 < input type ="radio" name ="rad" id ="sz_id" >
</ td >
< td width ="40px" >
< input type ="button" id ="insrow" value ="行追加" >
</ td >
< td width ="495px" >
< input type ="button" id ="delrow" value ="行削除" >
</ td >
</ tr >
< tr >
< td colspan ="4" >
< div style ="overflow-y:scroll; overflow-x:auto; height:392px; width:817px" >
< table id ="tableId" width ="800" border ="1" align ="center" cellpadding ="0" cellspacing ="0" bordercolor ="#000000" >
< tr bgcolor ="#3399FF" height ="30px" >
< th scope ="col" > 股票代号 </ th >
< th scope ="col" > 股票名称 </ th >
< th scope ="col" > 当前价格 </ th >
< th scope ="col" > 今日开盘 </ th >
< th scope ="col" > 昨日收盘 </ th >
< th scope ="col" > 当前差价 </ th >
< th scope ="col" > 涨跌幅度 </ th >
< th scope ="col" > 最高价格 </ th >
< th scope ="col" > 最低价格 </ th >
</ tr >
< tbody id ="tablebody" >
</ tbody >
</ table >
</ div >
</ td >
</ tr >
</ table >
</ form >
</ body >
</ html >
< head >
< title > ajax test </ title >
< meta http-equiv ="Content-Type" content ="text/html; charset=UTF-8" />
< script type ="text/javascript" src ="jquery.js" ></ script >
< script type ="text/javascript" > ...
function ajaxRequest()...{
var url = $("#stockurl").val() + $("#stockinit").val();
$.ajax(...{
url: url,
type: 'GET',
dataType: 'html',
timeout: 2000,
success: function(response)...{
var stocks = response.split(';');
for(var i=0; i<stocks.length-1; i++)...{
var content = stocks[i];
var temp1 = content.split('=')[0];
var temp2 = content.split('=')[1];
var code = temp1.substr(temp1.length - 6, 6);
var temp3 = temp2.replace('"', '');
var name = temp3.split(',')[0];
var tday_f = temp3.split(',')[1];
var yest_f = temp3.split(',')[2];
var curr_f = temp3.split(',')[3];
var temp_f = curr_f - yest_f;
$('#a'+i).html(code);
$('#b'+i).html(name);
if(curr_f > yest_f) ...{
$('#c'+i).html("<font color='red'>" + curr_f + "</font>");
} else if(curr_f < yest_f) ...{
$('#c'+i).html("<font color='green'>" + curr_f + "</font>");
} else ...{
$('#c'+i).html(curr_f);
}
$('#d'+i).html(tday_f);
$('#e'+i).html(yest_f);
if(temp_f > 0) ...{
$('#f'+i).html("<font color='red'>" + temp_f.toFixed(2) + "</font>");
$('#g'+i).html("<font color='red'>" + ((temp_f / yest_f) * 100).toFixed(2) + "</font> % ");
} else if(temp_f < 0) ...{
$('#f'+i).html("<font color='green'>" + temp_f.toFixed(2) + "</font>");
$('#g'+i).html("<font color='green'>" + ((temp_f / yest_f) * 100).toFixed(2) + "</font> % ");
} else ...{
$('#f'+i).html(temp_f.toFixed(2));
$('#g'+i).html(((temp_f / yest_f) * 100).toFixed(2) + " % ");
}
$('#h'+i).html(temp3.split(',')[4]);
$('#i'+i).html(temp3.split(',')[5]);
}
}
});
}
$(document).ready(function()...{
var stocks = $("#stockinit").val().split(',');
for(var i=0; i<stocks.length; i++)...{
addRows();
}
$("#insrow").click(function()...{
var stockcd = $("#stockid").val();
if(stockcd == "")...{
alert("股票代号不能为空!");
$("#stockid").focus();
return;
}
if(stockcd.length != 6)...{
alert("股票代号只能是6位!");
$("#stockid").focus();
return;
}
var div = 'sh';
if(document.getElementById("sz_id").checked)...{ div = "sz";}
var stocks = $("#stockinit").val();
$("#stockinit").val(stocks + "," + div + stockcd);
addRows();
});
$("#delrow").click(function()...{
var table = document.getElementById("tableId");
var index = table.rows.length;
if (index < 2)...{
alert("已经没有可删除的行了!");
} else ...{
table.deleteRow(index - 1);
var stockvalue = $("#stockinit").val();
var count = stockvalue.split(',').length;
if(count == 1) ...{
stockvalue = "";
} else ...{
stockvalue = stockvalue.substr(0, stockvalue.length - 9);
}
$("#stockinit").val(stockvalue);
}
});
window.setInterval("ajaxRequest()",3000);
});
function addRows()...{
var table = document.getElementById("tableId");
var index = table.rows.length;
var str="";
var row = index - 1;
str+='<tr class="tr_cls">'
str+='<td align="center"><span id="' + "a" + row + '"></span></td>'
str+='<td align="center"><span id="' + "b" + row + '"></span></td>'
str+='<td align="center"><span id="' + "c" + row + '"></span></td>'
str+='<td align="center"><span id="' + "d" + row + '"></span></td>'
str+='<td align="center"><span id="' + "e" + row + '"></span></td>'
str+='<td align="center"><span id="' + "f" + row + '"></span></td>'
str+='<td align="center"><span id="' + "g" + row + '"></span></td>'
str+='<td align="center"><span id="' + "h" + row + '"></span></td>'
str+='<td align="center"><span id="' + "i" + row + '"></span></td>'
str+='</tr>';
$("#tablebody").append(str);
}
</ script >
< style > ...
.tr_cls {...}{
height:30px;
font-size:16px;
font-family:"Times New Roman", Times, serif;
background-color:#FFFFCC
}
</ style >
</ head >
< body >
< form >
< input type ="hidden" id ="stockurl" value ="http://hq.sinajs.cn/list=" />
< input type ="hidden" id ="stockinit" value ="sh000001,sz399001,sh601939,sh600016,sh600528,sh600667,sh601390,sh601857,sz000532,sh600019,sh601111,sh601600,sh601006,sh601333,sh601398,sh601988,sh601328" />
< table width ="800" border ="0" align ="center" cellpadding ="0" cellspacing ="0" >
< tr >
< td width ="115px" >
代号: < input type ="text" id ="stockid" size ="6" >
</ td >
< td width ="150px" >
区分:上海 < input type ="radio" name ="rad" id ="sh_id" checked > 深证 < input type ="radio" name ="rad" id ="sz_id" >
</ td >
< td width ="40px" >
< input type ="button" id ="insrow" value ="行追加" >
</ td >
< td width ="495px" >
< input type ="button" id ="delrow" value ="行削除" >
</ td >
</ tr >
< tr >
< td colspan ="4" >
< div style ="overflow-y:scroll; overflow-x:auto; height:392px; width:817px" >
< table id ="tableId" width ="800" border ="1" align ="center" cellpadding ="0" cellspacing ="0" bordercolor ="#000000" >
< tr bgcolor ="#3399FF" height ="30px" >
< th scope ="col" > 股票代号 </ th >
< th scope ="col" > 股票名称 </ th >
< th scope ="col" > 当前价格 </ th >
< th scope ="col" > 今日开盘 </ th >
< th scope ="col" > 昨日收盘 </ th >
< th scope ="col" > 当前差价 </ th >
< th scope ="col" > 涨跌幅度 </ th >
< th scope ="col" > 最高价格 </ th >
< th scope ="col" > 最低价格 </ th >
</ tr >
< tbody id ="tablebody" >
</ tbody >
</ table >
</ div >
</ td >
</ tr >
</ table >
</ form >
</ body >
</ html >