<!DOCTYPE html> <html> <head> <title>前端编程</title> <meta charset="utf-8"> <meta name="renderer" content="webkit" /> <meta name="force-rendering" content="webkit" /> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <style type="text/css"> .tb1 { width: 80%; min-width:800px; height: auto; margin: 10px auto; font-family: verdana,arial,sans-serif; font-size: 12px; color: #333333; border-width: 1px; border-color: #666666; border-collapse: collapse; } .tb1 th { border-width: 1px; padding: 8px; border-style: solid; border-color: #666666; background-color: #dedede; text-align: center; } .tb1 td { border-width: 1px; padding: 8px; border-style: solid; border-color: #666666; background-color: #ffffff; text-align:center; } </style> </head> <body> <table class="tb1"> <thead> <tr> <th>标题</th> <th>运行状态</th> <th>净仓位net值</th> <th>成交量vol值</th> <th>盈亏pnl值</th> <th>平均每手盈</th> </tr> </thead> <tbody id="tbody1"> <tr> <td>加载中</td> <td>加载中</td> <td>加载中</td> <td>加载中</td> <td>加载中</td> <td>加载中</td> </tr> </tbody> </table> <script> function jsonpX(obj) { var callbackName = 'jsonp'; var scriptObj = document.createElement("script"); obj.parames = obj.parames || ''; if (typeof obj.parames == 'object') { var arr = new Array(); for (var key in obj.parames) { arr.push(key + '=' + obj.parames[key]) } obj.parames = arr.join('&'); } scriptObj.src = obj.url; document.head.appendChild(scriptObj); window[callbackName] = function (res) { obj.success(res); delete window.callbackName; document.head.removeChild(scriptObj); } } </script> <script type="text/javascript"> var fileid = 1; var arr_files = ["p1.json", "p2.json", "p3.json", "p4.json", "p5.json"]; function loadData() { if (fileid >= arr_files.length) { fileid = 1; } else { fileid ++; } var jsonfile = "./p" + fileid + ".json?t=" + new Date().getTime(); jsonpX({ url: jsonfile, success: function (arr) { fillTable(arr) } }) } function fillTable(arr) { var tbody = document.getElementById('tbody1'); // 删除界面上原来有的数据 var childs = tbody.childNodes; for (var i = childs.length - 1; i >= 0; i--) { tbody.removeChild(childs[i]); } for (var i = 0; i < arr.length; i++) { var tr = document.createElement('tr'); var row = arr[i]; // 1）表格标题，显示title值，即目标合约 var td1 = document.createElement('td'); td1.innerText = row.title; // 2）运行状态，pause=0为运行，pause=1为暂停，运行状态为暂停时需以红字显示， var td2 = document.createElement('td'); var pause = row.quote.pause; td2.innerText = pause == 1 ? "暂停" : (pause == 0 ? "运行" : "") if (pause == 1) { td2.style.color = "red"; } // 3）净仓位net值，如不为0时需以红字显示 var td3 = document.createElement('td'); var net = row.quote.net; td3.innerText = net if (net != 0) { td3.style.color = "red"; } // 4）成交量vol值 var td4 = document.createElement('td'); var vol = row.quote.vol td4.innerText = vol; // 5）盈亏pnl值 var td5 = document.createElement('td'); var pnl = row.quote.pnl; td5.innerText = pnl; // 6）平均每手盈亏，即pnl/vol，小数点后只保留3位数字。 var td6 = document.createElement('td'); if (vol == 0) { td6.innerText = ""; } else { var val = (pnl / vol).toFixed(3); td6.innerText = val; } var arrTd = []; arrTd.push(td1); arrTd.push(td2); arrTd.push(td3); arrTd.push(td4); arrTd.push(td5); arrTd.push(td6); for (var d = 0; d < arrTd.length; d++) { tr.appendChild(arrTd[d]) } tbody.appendChild(tr); } } loadData(); setInterval(function () { loadData(); }, 1 * 2000);// 2秒1次 </script> </body> </html>
