html代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>X元素</title>
<script type="text/javascript" src="Public/Js/jquery.js"></script>
<script type="text/javascript" src="Public/Js/crossDomainLoad.js"></script>
<style type="text/css">
*{margin:0px;padding:0px;font:13px/22px 'Microsoft YaHei Light','Source Han Sans CN',Verdana,Helvetica,Arial;}
body{background-color: #e9e8e8;}
a{text-decoration:none;}
ul {list-style: none outside;display: block;}
.logo {float: left;width: 94px;height: 80px;line-height: 80px;font-size:26px;text-align:center;}
#navigation{background: #5B6073;width: 100%;height: 80px;z-index: 2000;min-width: 1080px;}
#navigation a, #navigation a:active, #navigation a:visited {color: #fff;padding-top: 25px;height: 70px;font-weight: bold;font-size: 14px;padding-bottom: 10px;}
#navigation ul {padding-top: 30px;float: left;margin-left: 100px;}
#navigation ul li {display: inline;margin-right: 30px;}
#navHead{width:1080px;margin:0 auto;}
#mainContent{width:1080px;margin:0 auto;}
#flagInfo{margin-top:15px;width:100%;height:30px;}
#flagInfo ul{margin-left:20px;}
#flagInfo ul li{float:left;margin-right: 30px;line-height: 30px;background:#FB767E;padding:0px 10px;color:#fff;border-radius: 3px;}
#shortTerm{margin-top:15px;overflow: hidden;}
#mediumTerm{margin-top:20px;overflow: hidden;}
.titleLabel{width:100%;height:35px;float:left;overflow: hidden;}
.termContent{padding-top:15px;clear:both;}
.titleName{color:#5B6073;font-weight: bold;font-size:30px;line-height: 35px;}
.termframe{width:240px;height:270px;margin-left:24px;border-radius: 3px;background-color:#FB767E;overflow: hidden;float:left;}
.termframe li{width:100%;float:left;display:block;color:#fff;}
.line1GP,.line2GP{height:40px;}
.line3GP{height:35px;}
.line4GP{height:80px;background:#fff;padding-top: 10px;}
.line5GP{height:100%;background:#fff;}
.guPiao,.xianJiaGP{font-size: 20px;line-height: 40px;padding-left:10px;}
.maiRuJiaGP{font-size: 14px;line-height: 35px;padding-left:10px;}
.reasonGP{font-size: 14px;line-height: 20px;padding-left:10px;padding-right:10px;color:#5B6073;}
.reasonGP{}
.yingLiGP{font-size: 14px;line-height: 35px;padding-right: 10px;float:right;}
.ziXuanGP,.zhangFuGP{font-size: 20px;line-height: 40px;padding-right: 10px;float:right;}
.ziXuanGP{font-weight: bold;cursor:pointer;}
.moreGP{width:100px;height:25px;line-height:25px;border:1px solid #ccc;margin:20px auto;display: block;text-align: center;border-radius:3px;background-color: #ccc;}
.moreGP a{color:#eee;}
.moreGP a:hover{color:#fff;}
</style>
</head>
<body>
<div id="navigation">
<div id="navHead">
<a href="javascript:;"><span class='logo'>X元素</span></a>
<ul >
<li><a href="javascript:;">短线</a></li>
<li><a href="javascript:;">中长线</a></li>
<li><a href="javascript:;">自选</a></li>
</ul>
</div>
</div>
<div id="mainContent">
<div id="flagInfo">
<ul>
<li id="000001">上证指数：3642.47 +1.77% 3983.17亿元</li>
<li id="399001">深证成指：13028.31 +1.54% 5444.67亿元</li>
<li id="399006">创业板指数P：2829.92 -0.01% 466.54亿元</li>
</ul>
</div>
<div id="shortTerm">
<div class="titleLabel">
<span class="titleName">短线</span>
</div>
<div class="termContent">
<ul class="termframe 300363">
<li class="line1GP"><span class="guPiao">博腾股份(300363)</span><span class="ziXuanGP">+</span></li>
<li class="line2GP"><span class="xianJiaGP">14.46</span><span class="zhangFuGP">-2.36%</span></li>
<li class="line3GP"><span class="maiRuJiaGP">买入价 14.45</span><span class="yingLiGP">盈利 0.35</span></li>
<li class="line4GP">
<p class="reasonGP">推荐理由</br>
虚实已久，量能放大。大数据时代,重新定义数据图表的时候到了 ECharts(Enterprise Charts 商业产品图表库) 是基于Canvas的,纯J avascript 的图表库,提供直</p>
</li>
<li class="line5GP"><span class="moreGP"><a href="javascript:;">查看详情</a></span></li>
</ul>
</div>
</div>
<div id="mediumTerm">
<div class="titleLabel">
<span class="titleName">中长线</span>
</div>
<div class="termContent">
<ul class="termframe 300392">
<li class="line1GP"><span class="guPiao">腾信股份(300392)</span><span class="ziXuanGP">+</span></li>
<li class="line2GP"><span class="xianJiaGP">14.46</span><span class="zhangFuGP">-2.36%</span></li>
<li class="line3GP"><span class="maiRuJiaGP">买入价 14.45</span><span class="yingLiGP">盈利 0.35</span></li>
<li class="line4GP">
<p class="reasonGP">推荐理由</br>
虚实已久，量能放大。大数据时代,重新定义数据图表的时候到了 ECharts(Enterprise Charts 商业产品图表库) 是基于Canvas的,纯J avascript 的图表库,提供直</p>
</li>
<li class="line5GP"><span class="moreGP"><a href="javascript:;">查看详情</a></span></li>
</ul>
</div>
</div>
</div>
</body>
<script type="text/javascript">
$(document).ready(function(){
//code为股票代码
//part为股票所占代码中的位置
//Type：1表示指数；2表示股票
//myPrice为股票的买入价
function sharesLoad(code,part,myPrice,iType)
{
code = code.toString();
code = code.split(',');
var sShares = '';
if (iType != 3) {
for (var i=0 ; i< code.length ; i++)
{
var sPre = code[i].substr(0,2);
sShares += (sPre == '60'?'sh':'sz')+code[i]+',';
}
} else {
for (var i=0 ; i< code.length ; i++)
{
sShares += 's_sh'+code[i]+',';
}
}
sShares = sShares.substr(0,(sShares.length-1));
Cme.loader.load({url: ['http://hq.sinajs.cn/list='+sShares]},function(){
sShares = sShares.split(',');
myPrice = myPrice.split(',');
for (var i=0 ; i< sShares.length ; i++)
{
var aShare = eval('hq_str_'+sShares[i]);
var code = sShares[i].substr(2,sShares[i].length);
aShare = aShare.split(',');
if (iType == 2) { //股票
aShare[1] = parseFloat(aShare[1]);//开盘价
aShare[2] = parseFloat(aShare[2]);//昨日收盘价
aShare[3] = parseFloat(aShare[3]);//当前价
var currentPrice = aShare[3].toFixed(2);//当前价格
var zhangFu = ((aShare[3]-aShare[2])/aShare[2]*100).toFixed(2);//涨幅
var maiRuJia = parseFloat(myPrice[i]);
var gained = ((aShare[3]-maiRuJia)/maiRuJia*100).toFixed(2);
aShare[2]<=aShare[3]?$('#'+part+' .'+code).css('background-color','#FB767E'):$('#'+part+' .'+code).css('background-color','#41C9A5');
$('#'+part+' .'+code+' .xianJiaGP').text(currentPrice);
$('#'+part+' .'+code+' .zhangFuGP').text(zhangFu.toString()+'%');
$('#'+part+' .'+code+' .maiRuJiaGP').text("买入价 "+maiRuJia);
$('#'+part+' .'+code+' .yingLiGP').text("盈利 "+gained.toString()+'%');
}
if (iType == 1) { //创业板和深证指数
aShare[3] = parseFloat(aShare[3]).toFixed(2);//开盘价
var zhangFu = (((aShare[3]-aShare[2])/aShare[2]*100)>=0?'+':'')+((aShare[3]-aShare[2])/aShare[2]*100).toFixed(2)+'%';//涨幅
$('#'+code).text(aShare[0]+': '+aShare[3]+' '+zhangFu+' '+parseFloat((aShare[9]/100000000)).toFixed(2)+'亿元');
aShare[2]<=aShare[3]?$('#'+code).css('background-color','#FB767E'):$('#'+code).css('background-color','#41C9A5');
}
if (iType == 3) { //上证指数
code = code.substr(2,code.length);
aShare[1] = parseFloat(aShare[1]).toFixed(2);//开盘价
aShare[3] = (parseFloat(aShare[3])>=0?'+':'')+aShare[3]+'%';
$('#'+code).text(aShare[0]+': '+aShare[1]+' '+aShare[3]+' '+parseFloat((aShare[5]/10000)).toFixed(2)+'亿元');
parseFloat(aShare[3])>=0?$('#'+code).css('background-color','#FB767E'):$('#'+code).css('background-color','#41C9A5');
}
}
});
}
ajax_all();
var sTIme = setInterval(ajax_all,3000);
function ajax_all(){
sharesLoad('300363','shortTerm','28.23',2);
sharesLoad('300392','mediumTerm','43.55',2);
sharesLoad('399001,399006','flagInfo','1',1);
sharesLoad('000001','flagInfo','1',3);
}
});
</script>
</html>
、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、crossDomainLoad.js、、、、、、、、、、、、、、、、、、、、、、、、、、、、、
//用于跨域请求
;(function(w){
var loader = function(){
var dc = document;
function createScript(url, callback){
var urls = url,
scripts = [],
completed = 0;
for( var i = 0, len = urls.length; i < len; i++ ){
scripts[i] = dc.createElement('script');
scripts[i].src = urls[i];
dc.getElementsByTagName('head')[0].appendChild(scripts[i]);
if( scripts[i].readyState ){ //ie
scripts[i].onreadystatechange = function(){
if( this.readyState == 'complete' || this.readyState == 'loaded' ){
this.onreadystatechange = null; //确保事件不被处理2次
completed++;
completed >= urls.length ? callback() : '';
}
}
}else{ //not ie
scripts[i].onload = function(){
completed++;
completed >= urls.length ? callback() : '';
}
}
}
}
function createLink(url, callback){
var urls = url,
links = [];
for( var i = 0, len = urls.length; i < len; i++ ){
links[i] = dc.createElement('link');
links[i].rel = 'stylesheet';
links[i].href = urls[i];
dc.getElementsByTagName('head')[0].appendChild(links[i]);
}
callback();
}
return {
load: function(option, callback){
var _type = option.type || 'js',
_url = option.url,
_callback = callback || function(){};
switch( _type ){
case 'js':
case 'javascript':
createScript(_url, _callback);
break;
case 'css':
createLink(_url, _callback);
break;
}
return this;
}
}
}();
w.Cme ? '' : w.Cme = {};
w.Cme.loader = loader;
})(window);
