把握全球金融状况
一个页面看全球金融，感觉不错
再加上以前做的，读取显示 新浪7*24财经直播数据页面
那看得就更舒服了
下面是新浪7*24财经直播数据 代码地址：
http://www.cnblogs.com/wangxinsheng/articles/4251228.html
效果图：
展开前
展开后
新浪7*24财经直播数据：在线Demohttp://wangxinsheng.herokuapp.com/sinaFinLive
东方财富网财经数据汇总：在线Demohttp://wangxinsheng.herokuapp.com/test
代码：
简单来说，就是使用jquery 的$.getScript()方法加载数据文件，在显示在页面上而已
现在的显示方法不好，比较冗余
因为数据格式相同，并且数据的名称也传了回来，其实可以一个循环搞定所有的数据
以后新加数据也就只用添加数据URL即可。
我太懒，不想改了，脑袋里的伪代码如下：
1.html单节点字符串，用于append到画面
2.循环数据url数组，获取数据（url里可以定义返回的数据放在那个变量里）
3.$.getScript的callBack里面，解析数据（目前不同指数，数据格式是一样的），可以一个方法解决
4.替换html单节点字符串的数据部分，append到画面
5.细节需要打磨一下，比如：如何append[我第一个想到的是：先看是否存在。存在的话，通过class标记并隐藏现有的节点后，在现有节点之前插入新节点，然后移除旧的节点即可......大家实现方法各有不同]
下面是目前的代码：[那是傻乎乎的用nodejs模拟referer，访问数据来源，而页面上则用json向nodejs请求数据。这种模式适合来抓去html页面上的数据。对于现在的情况，就大材小用，还浪费了服务器资源......]
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>财经数据汇总</title> 5 <meta charset='UTF-8'> 6 <script src="http://code.jquery.com/jquery-1.11.2.min.js"></script> 7 <style> 8 body { font-size:12px; margin:0px 0px;} 9 .outDiv {margin:0px 0px;} 10 ul {padding:0px;margin:0px;} 11 ul { list-style:none; /*margin-left:-40px;*/} 12 .bgWhite { background-color:white/*#FBD9F0*/;color:black;} 13 .bgBlue { background-color:#C3F7FF;color:black;} 14 .bgGray { background-color:#F2F2F2;color:black;} 15 .bgBlue2 { background-color:#E2FBFF;color:black;} 16 .bold{ font-weight:bold;} 17 .colorRed {color:red;} 18 .colorGreen {color:green;} 19 .colorGray {color:gray;} 20 .ul,.ul li {line-height:20px; cursor:pointer;} 21 .ul ul {margin-top:0px;margin-bottom:0px;} 22 .floatL {float:left;} 23 .floatR {float:right;} 24 .li_t1_1{width:80px; display:inline; float:left;} 25 .li_d1_1{width:100px; display:inline; float:left;} 26 .li_d1_2{width:90px; display:inline; float:left;} 27 .li_de_t{width:100px; display:inline; float:left;} 28 /*.li_pic{height:100%;}*/ 29 .li_de_pic{display:inline; float:left;} 30 .clear{clear:both;} 31 .smallPic{width:150px; margin-left:10px;} 32 .opp{border-radius:20px 20px 0px 0px;font-size:10px; text-align:center; background-color:gray;color:white;} 33 .opp span{cursor:pointer;} 34 </style> 35 </head> 36 <body> 37 <div class='opp'><span id='openAll'>全部展开</span> <span id='closeAll'>全部折叠</span> <span id='doRefresh'>刷新</span> <span id='ntime'></span></div> 38 <div class='outDiv'> 39 <div class='ul bgWhite'>道琼斯： <span class='DQSnowN'>--.--</span> <span class='DQSnowP'>--.--</span><span style='position:absolute;right:10px;'>美股</span> 40 41 <ul style='display:none'> 42 <!--道琼斯Start--> 43 <li> 44 <div class='ul bgGray'> 45 <div class='li_t1_1'>道琼斯：</div> 46 <div class='li_d1_1 DQSnowN'>--.--</div> 47 <div class='li_d1_1 DQSnowV'>--.--</div> 48 <div class='li_d1_1 DQSnowP'>--.--%</div> 49 <div class='clear'></div> 50 <ul style='display:none'> 51 <li> 52 <div class='li_de_t DQSnowO'>--.--</div> 53 <div class='li_de_t DQSnowL'>--.--</div> 54 <div class='li_de_t DQSnowH'>--.--</div> 55 <div class='li_de_t DQSnowYC'>--.--</div> 56 <div class='clear'></div> 57 </li> 58 <li> 59 <div class='li_de_pic'> 60 <img class='smallPic DQSpicTime' /> 61 </div> 62 <div class='li_de_pic'> 63 <img class='smallPic DQSpicDay' /> 64 </div> 65 <div class='clear'></div> 66 </li> 67 </ul> 68 </div> 69 </li> 70 <!--道琼斯End--> 71 <!--纳斯达克Start--> 72 <li> 73 <div class='ul bgWhite'> 74 <div class='li_t1_1'>纳斯达克：</div> 75 <div class='li_d1_1 NSDKnowN'>--.--</div> 76 <div class='li_d1_1 NSDKnowV'>--.--</div> 77 <div class='li_d1_1 NSDKnowP'>--.--%</div> 78 <div class='clear'></div> 79 <ul style='display:none'> 80 <li> 81 <div class='li_de_t NSDKnowO'>--.--</div> 82 <div class='li_de_t NSDKnowL'>--.--</div> 83 <div class='li_de_t NSDKnowH'>--.--</div> 84 <div class='li_de_t NSDKnowYC'>--.--</div> 85 <div class='clear'></div> 86 </li> 87 <li> 88 <div class='li_de_pic'> 89 <img class='smallPic NSDKpicTime' /> 90 </div> 91 <div class='li_de_pic'> 92 <img class='smallPic NSDKpicDay' /> 93 </div> 94 <div class='clear'></div> 95 </li> 96 </ul> 97 </div> 98 </li> 99 <!--纳斯达克End--> 100 <!--标准500Start--> 101 <li> 102 <div class='ul bgGray'> 103 <div class='li_t1_1'>标准500：</div> 104 <div class='li_d1_1 BZ500nowN'>--.--</div> 105 <div class='li_d1_1 BZ500nowV'>--.--</div> 106 <div class='li_d1_1 BZ500nowP'>--.--%</div> 107 <div class='clear'></div> 108 <ul style='display:none'> 109 <li> 110 <div class='li_de_t BZ500nowO'>--.--</div> 111 <div class='li_de_t BZ500nowL'>--.--</div> 112 <div class='li_de_t BZ500nowH'>--.--</div> 113 <div class='li_de_t BZ500nowYC'>--.--</div> 114 <div class='clear'></div> 115 </li> 11
新闻热点
疑难解答
