一款強大的雙色球走勢圖，助你500W夢想，js+mvc+html
序言
估計每個人都有中500W的夢想，我關注雙色球也有一定年數了，可最多中也只有10塊錢，這已經算是最大的獎，最近閑來無事，研究下怎麼去開發雙色球的走勢圖，覺得還是蠻有意思的，用MVC+JS+HTMl來實現的。做了非常多的走勢圖，還可以進行選號，還做了一些工具來幫助選號，O(∩_∩)O哈哈~純粹個人興趣來做的。下面來詳細介紹怎麼去實現的，還是相當有技術含量的。
實現出來效果
以上隨便挑選了4個效果圖，一起實現了20多種的效果，就不一一展示了。
怎麼實現這走勢圖
查詢條件的實現
function GetcxqsSelect() { var obj = document.getElementById('cxqs'); obj.options.add(new Option("最新10期", "10")); obj.options.add(new Option("最新20期", "20")); obj.options.add(new Option("最新30期", "30", true, true)); obj.options.add(new Option("最新50期", "50")); obj.options.add(new Option("最新80期", "80")); obj.options.add(new Option("最新100期", "100")); obj.options.add(new Option("最新150期", "150")); obj.options.add(new Option("最新200期", "200")); obj.options.add(new Option("最新300期", "300")); obj.options.add(new Option("2003年", "2003")); obj.options.add(new Option("2004年", "2004")); obj.options.add(new Option("2005年", "2005")); obj.options.add(new Option("2006年", "2006")); obj.options.add(new Option("2007年", "2007")); obj.options.add(new Option("2008年", "2008")); obj.options.add(new Option("2009年", "2009")); obj.options.add(new Option("2010年", "2010")); obj.options.add(new Option("2011年", "2011")); obj.options.add(new Option("2012年", "2012")); obj.options.add(new Option("2013年", "2013")); obj.options.add(new Option("2014年", "2014")); obj.options.add(new Option("2015年", "2015")); obj.options.add(new Option("2016年", "2016")); obj.options.add(new Option("2017年", "2017")); obj.options.add(new Option("2018年", "2018")); obj.options.add(new Option("2019年", "2019")); var myDate = new Date(); var tYear = myDate.getFullYear(); if (tYear > 2019) obj.options.add(new Option("2020年", "2020")); if (tYear > 2020) obj.options.add(new Option("2021年", "2021")); if (tYear > 2021) obj.options.add(new Option("2022年", "2022")); if (tYear > 2022) obj.options.add(new Option("2023年", "2023")); if (tYear > 2023) obj.options.add(new Option("2024年", "2024")); if (tYear > 2024) obj.options.add(new Option("2025年", "2025")); if (tYear > 2025) obj.options.add(new Option("2026年", "2026")); if (tYear > 2026) obj.options.add(new Option("2027年", "2027")); if (tYear > 2027) obj.options.add(new Option("2028年", "2028")); if (tYear > 2028) obj.options.add(new Option("2029年", "2029")); if (tYear > 2029) obj.options.add(new Option("2030年", "2030")); if (tYear > 2030) obj.options.add(new Option("2031年", "2031")); if (tYear > 2031) obj.options.add(new Option("2032年", "2032")); }
<tr> <td height="35" bgcolor="#FFFFFF" valign="top"> <div align="center"> 查詢 <select name="cxqs" id="cxqs"> </select> <input type="button" name="zuobiao" value="開始查詢" onclick="clientssq()"> </div> </td> </tr>
怎麼實現表格下發的標記選號功能。
實現的樣式：
function Style(obj) {
debugger;
if (obj.style.backgroundColor == "") {
obj.style.backgroundColor = "#dd0000";
obj.style.color = "#FFFFFF";
} else {
obj.style.backgroundColor = "";
obj.style.color = "#ffffff";
}
}
html程式碼如下：
for (var i = 0; i < 5; i++) { html += '<tr title="點擊空格可以幫助記錄選號" align="center" class="chart_record">' html += '<td></td>' html += '<td width="19"></td>' html += '<td width="19"></td>' html += '<td width="19"></td>' html += '<td width="19"></td>' html += '<td width="19"></td>' html += '<td width="19"></td>' html += '<td></td>' html += '<td onclick="Style(this)">01</td>' html += '<td onclick="Style(this)">02</td>' html += '<td onclick="Style(this)">03</td>' html += '<td onclick="Style(this)">04</td>' html += '<td onclick="Style(this)">05</td>' html += '<td onclick="Style(this)">06</td>' html += '<td onclick="Style(this)">07</td>' html += '<td onclick="Style(this)">08</td>' html += '<td onclick="Style(this)">09</td>' html += '<td onclick="Style(this)">10</td>' html += '<td onclick="Style(this)">11</td>' html += '<td onclick="Style(this)">12</td>' html += '<td onclick="Style(this)">13</td>' html += '<td onclick="Style(this)">14</td>' html += '<td onclick="Style(this)">15</td>' html += '<td onclick="Style(this)">16</td>' html += '<td onclick="Style(this)">17</td>' html += '<td onclick="Style(this)">18</td>' html += '<td onclick="Style(this)">19</td>' html += '<td onclick="Style(this)">20</td>' html += '<td onclick="Style(this)">21</td>' html += '<td onclick="Style(this)">22</td>' html += '<td onclick="Style(this)">23</td>' html += '<td onclick="Style(this)">24</td>' html += '<td onclick="Style(this)">25</td>' html += '<td onclick="Style(this)">26</td>' html += '<td onclick="Style(this)">27</td>' html += '<td onclick="Style(this)">28</td>' html += '<td onclick="Style(this)">29</td>' html += '<td onclick="Style(this)">30</td>' html += '<td onclick="Style(this)">31</td>' html += '<td onclick="Style(this)">32</td>' html += '<td onclick="Style(this)">33</td>' html += '<td></td>' html += '<td></td>' html += '<td></td>' html += '<td></td>' html += '<td></td>' html += '</tr>' }
這樣就可以實現標記號碼功能。
計算連號
function checkdata(arr, num) { var bool = false; for (var i = 0; i < arr.length; i++) { if (arr[i] - num == 1 || arr[i] - num == -1) { bool = true; break; } } return bool; }
計算重號
function array_diff(array1, array2) { var o = {};//轉成hash可以減少運算量，數據量越大，優勢越明顯。 for (var i = 0, len = array2.length; i < len; i++) { o[array2[i]] = true; } var result = []; for (i = 0, len = array1.length; i < len; i++) { var v = array1[i]; if (o[v]) continue; result.push(v); } return result; }
還是有非常多的演算法，比如每個號碼出現的次數。
這個都是在JS實現，統計每個號碼出現的次數。
var arr = [count1, count2, count3, count4, count5, count6, count7, count8, count9, count10, count11, count12, count13, count14, count15, count16, count17, count18, count19, count20, count21, count22, count23, count24, count25, count26, count27, count28, count29, count30, count31, count32, count33]; var max = Math.max.apply(null, arr); var unitcount = 50.00 / max; html += '<tr align="center" bgcolor="#ffffff">' html += '<td height="60">統計</td>' html += '<td></td>' html += '<td></td>' html += '<td></td>' html += '<td></td>' html += '<td></td>' html += '<td></td>' html += '<td></td>' html += '<td height="60" align="center" class="statistics" valign="bottom">' + count1 + '<br><img width="8" height=' + count1 * unitcount + ' title="紅球號碼01出現' + count1 + '次" src="../image/01.gif"></td>' html += '<td height="60" align="center" class="statistics" valign="bottom">' + count2 + '<br><img width="8" height=' + count2 * unitcount + ' title="紅球號碼02出現' + count2 + '次" src="../image/01.gif"></td>' html += '<td height="60" align="center" class="statistics" valign="bottom">' + count3 + '<br><img width="8" height=' + count3 * unitcount + ' title="紅球號碼03出現' + count3 + '次" src="../image/01.gif"></td>' html += '<td height="60" align="center" class="statistics" valign="bottom">' + count4 + '<br><img width="8" height=' + count4 * unitcount + ' title="紅球號碼04出現' + count4 + '次" src="../image/01.gif"></td>' html += '<td height="60" align="center" class="statistics" valign="bottom">' + count5 + '<br><img width="8" height=' + count5 * unitcount + ' title="紅球號碼05出現' + count5 + '次" src="../image/01.gif"></td>' html += '<td height="60" align="center" class="statistics" valign="bottom">' + count6 + '<br><img width="8" height=' + count6 * unitcount + ' title="紅球號碼06出現' + count6 + '次" src="../image/01.gif"></td>' html += '<td height="60" align="center" class="statistics" valign="bottom">' + count7 + '<br><img width="8" height=' + count7 * unitcount + ' title="紅球號碼07出現' + count7 + '次" src="../image/01.gif"></td>' html += '<td height="60" align="center" class="statistics" valign="bottom">' + count8 + '<br><img width="8" height=' + count8 * unitcount + ' title="紅球號碼08出現' + count8 + '次" src="../image/01.gif"></td>' html += '<td height="60" align="center" class="statistics" valign="bottom">' + count9 + '<br><img width="8" height=' + count9 * unitcount + ' title="紅球號碼09出現' + count9 + '次" src="../image/01.gif"></td>' html += '<td height="60" align="center" class="statistics" valign="bottom">' + count10 + '<br><img width="8" height=' + count10 * unitcount + ' title="紅球號碼10出現' + count10 + '次" src="../image/01.gif"></td>' html += '<td height="60" align="center" class="statistics" valign="bottom">' + count11 + '<br><img width="8" height=' + count11 * unitcount + ' title="紅球號碼11出現' + count11 + '次" src="../image/01.gif"></td>' html += '<td height="60" align="center" class="statistics" valign="bottom">' + count12 + '<br><img width="8" height=' + count12 * unitcount + ' title="紅球號碼12出現' + count12 + '次" src="../image/01.gif"></td>' html += '<td height="60" align="center" class="statistics" valign="bottom">' + count13 + '<br><img width="8" height=' + count13 * unitcount + ' title="紅球號碼13出現' + count13 + '次" src="../image/01.gif"></td>' html += '<td height="60" align="center" class="statistics" valign="bottom">' + count14 + '<br><img width="8" height=' + count14 * unitcount + ' title="紅球號碼14出現' + count14 + '次" src="../image/01.gif"></td>' html += '<td height="60" align="center" class="statistics" valign="bottom">' + count15 + '<br><img width="8" height=' + count15 * unitcount + ' title="紅球號碼15出現' + count15 + '次" src="../image/01.gif"></td>' html += '<td height="60" align="center" class="statistics" valign="bottom">' + count16 + '<br><img width="8" height=' + count16 * unitcount + ' title="紅球號碼16出現' + count16 + '次" src="../image/01.gif"></td>' html += '<td height="60" align="center" class="statistics" valign="bottom">' + count17 + '<br><img width="8" height=' + count17 * unitcount + ' title="紅球號碼17出現' + count17 + '次" src="../image/01.gif"></td>' html += '<td height="60" align="center" class="statistics" valign="bottom">' + count18 + '<br><img width="8" height=' + count18 * unitcount + ' title="紅球號碼18出現' + count18 + '次" src="../image/01.gif"></td>' html += '<td height="60" align="center" class="statistics" valign="bottom">' + count19 + '<br><img width="8" height=' + count19 * unitcount + ' title="紅球號碼19出現' + count19 + '次" src="../image/01.gif"></td>' html += '<td height="60" align="center" class="statistics" valign="bottom">' + count20 + '<br><img width="8" height=' + count20 * unitcount + ' title="紅球號碼20出現' + count20 + '次" src="../image/01.gif"></td>' html += '<td height="60" align="center" class="statistics" valign="bottom">' + count21 + '<br><img width="8" height=' + count21 * unitcount + ' title="紅球號碼21出現' + count21 + '次" src="../image/01.gif"></td>' html += '<td height="60" align="center" class="statistics" valign="bottom">' + count22 + '<br><img width="8" height=' + count22 * unitcount + ' title="紅球號碼22出現' + count22 + '次" src="../image/01.gif"></td>' html += '<td height="60" align="center" class="statistics" valign="bottom">' + count23 + '<br><img width="8" height=' + count23 * unitcount + ' title="紅球號碼23出現' + count23 + '次" src="../image/01.gif"></td>' html += '<td height="60" align="center" class="statistics" valign="bottom">' + count24 + '<br><img width="8" height=' + count24 * unitcount + ' title="紅球號碼24出現' + count24 + '次" src="../image/01.gif"></td>' html += '<td height="60" align="center" class="statistics" valign="bottom">' + count25 + '<br><img width="8" height=' + count25 * unitcount + ' title="紅球號碼25出現' + count25 + '次" src="../image/01.gif"></td>' html += '<td height="60" align="center" class="statistics" valign="bottom">' + count26 + '<br><img width="8" height=' + count26 * unitcount + ' title="紅球號碼26出現' + count26 + '次" src="../image/01.gif"></td>' html += '<td height="60" align="center" class="statistics" valign="bottom">' + count27 + '<br><img width="8" height=' + count27 * unitcount + ' title="紅球號碼27出現' + count27 + '次" src="../image/01.gif"></td>' html += '<td height="60" align="center" class="statistics" valign="bottom">' + count28 + '<br><img width="8" height=' + count28 * unitcount + ' title="紅球號碼28出現' + count28 + '次" src="../image/01.gif"></td>' html += '<td height="60" align="center" class="statistics" valign="bottom">' + count29 + '<br><img width="8" height=' + count29 * unitcount + ' title="紅球號碼29出現' + count29 + '次" src="../image/01.gif"></td>' html += '<td height="60" align="center" class="statistics" valign="bottom">' + count30 + '<br><img width="8" height=' + count30 * unitcount + ' title="紅球號碼30出現' + count30 + '次" src="../image/01.gif"></td>' html += '<td height="60" align="center" class="statistics" valign="bottom">' + count31 + '<br><img width="8" height=' + count31 * unitcount + ' title="紅球號碼31出現' + count31 + '次" src="../image/01.gif"></td>' html += '<td height="60" align="center" class="statistics" valign="bottom">' + count32 + '<br><img width="8" height=' + count32 * unitcount + ' title="紅球號碼32出現' + count32 + '次" src="../image/01.gif"></td>' html += '<td height="60" align="center" class="statistics" valign="bottom">' + count33 + '<br><img width="8" height=' + count33 * unitcount + ' title="紅球號碼33出現' + count33 + '次" src="../image/01.gif"></td>' html += '<td></td>' html += '<td></td>' html += '<td></td>' html += '<td></td>' html += '<td></td>' html += '</tr>' html += '<tr height="20" align="center" bgcolor="#e8f3ff">' html += '<td></td>' html += '<td></td>' html += '<td></td>' html += '<td></td>' html += '<td></td>' html += '<td></td>' html += '<td></td>' html += '<td></td>' html += '<td class="red">01</td>' html += '<td class="red">02</td>' html += '<td class="red">03</td>' html += '<td class="red">04</td>' html += '<td class="red">05</td>' html += '<td class="red">06</td>' html += '<td class="red">07</td>' html += '<td class="red">08</td>' html += '<td class="red">09</td>' html += '<td class="red">10</td>' html += '<td class="red">11</td>' html += '<td class="red">12</td>' html += '<td class="red">13</td>' html += '<td class="red">14</td>' html += '<td class="red">15</td>' html += '<td class="red">16</td>' html += '<td class="red">17</td>' html += '<td class="red">18</td>' html += '<td class="red">19</td>' html += '<td class="red">20</td>' html += '<td class="red">21</td>' html += '<td class="red">22</td>' html += '<td class="red">23</td>' html += '<td class="red">24</td>' html += '<td class="red">25</td>' html += '<td class="red">26</td>' html += '<td class="red">27</td>' html += '<td class="red">28</td>' html += '<td class="red">29</td>' html += '<td class="red">30</td>' html += '<td class="red">31</td>' html += '<td class="red">32</td>' html += '<td class="red">33</td>' html += '<td></td>' html += '<td></td>' html += '<td></td>' html += '<td></td>' html += '<td></td>' html += '</tr>' html += '<tr><td class="chart_bottom" colspan="46">說明：點擊最後空行上的空格，可以幫助記錄選號。</td></tr>' html += '</tbody>' html += '</table>';
計算每個號碼出現次數，並且顯示紅色柱狀圖效果，以上即是實現的源碼。
包括計算和值、大小比、奇偶比、尾和等等都有實現，相對而言還比較複雜。
相對而言實現豎三還是比較複雜的，如下：
var temp1 = []; var temp2 = []; if (parseInt(i) + 2 < data.length) { var arr1 = [data[i].R1, data[i].R2, data[i].R3, data[i].R4, data[i].R5, data[i].R6]; var arr2 = [data[parseInt(i) + 1].R1, data[parseInt(i) + 1].R2, data[parseInt(i) + 1].R3, data[parseInt(i) + 1].R4, data[parseInt(i) + 1].R5, data[parseInt(i) + 1].R6]; var arr3 = [data[parseInt(i) + 2].R1, data[parseInt(i) + 2].R2, data[parseInt(i) + 2].R3, data[parseInt(i) + 2].R4, data[parseInt(i) + 2].R5, data[parseInt(i) + 2].R6]; temp1 = repetition(arr1, arr2); temp2 = repetition(temp1, arr3); } var temp3 = []; var temp4 = []; if (i > 0 && parseInt(i) + 1 < data.length) { var arr1 = [data[parseInt(i) - 1].R1, data[parseInt(i) - 1].R2, data[parseInt(i) - 1].R3, data[parseInt(i) - 1].R4, data[parseInt(i) - 1].R5, data[parseInt(i) - 1].R6]; var arr2 = [data[i].R1, data[i].R2, data[i].R3, data[i].R4, data[i].R5, data[i].R6]; var arr3 = [data[parseInt(i) + 1].R1, data[parseInt(i) + 1].R2, data[parseInt(i) + 1].R3, data[parseInt(i) + 1].R4, data[parseInt(i) + 1].R5, data[parseInt(i) + 1].R6]; temp3 = repetition(arr1, arr2); temp4 = repetition(temp3, arr3); } var temp5 = []; var temp6 = []; if (i > 1 && i < data.length) { var arr1 = [data[parseInt(i) - 2].R1, data[parseInt(i) - 2].R2, data[parseInt(i) - 2].R3, data[parseInt(i) - 2].R4, data[parseInt(i) - 2].R5, data[parseInt(i) - 2].R6]; var arr2 = [data[parseInt(i) - 1].R1, data[parseInt(i) - 1].R2, data[parseInt(i) - 1].R3, data[parseInt(i) - 1].R4, data[parseInt(i) - 1].R5, data[parseInt(i) - 1].R6]; var arr3 = [data[i].R1, data[i].R2, data[i].R3, data[i].R4, data[i].R5, data[i].R6]; temp5 = repetition(arr1, arr2); temp6 = repetition(temp5, arr3); }
function repetition(arr, brr) { //定義一個新的數組，存入重複的數組 var newArr = []; //循環兩個數組，外循環循環一圈，內循環一輪，用外循環的一個去和內循環的每一個作比較 //如果相等說明就是重複的，然後再新數組裡查找一下，這個數是否存在，如果兩個條件都滿足，則存入新數組 //循環第一個數組 for (var i = 0; i < arr.length; i++) { //循環第二個數組 for (var j = 0; j < brr.length; j++) { //避免新數組中出現重複的數 if (arr[i] - brr[j] == 0) { newArr.push(arr[i]); } } } //返回新數組 return newArr; } function checkdata(arr, num) { var bool = false; for (var i = 0; i < arr.length; i++) { if (arr[i] == num) { bool = true; break; } } return bool; }
怎麼計算斜三走勢圖
var temp1 = []; if (parseInt(i) + 2 < data.length) { var arr1 = [data[i].R1, data[i].R2, data[i].R3, data[i].R4, data[i].R5, data[i].R6]; var arr2 = [data[parseInt(i) + 1].R1, data[parseInt(i) + 1].R2, data[parseInt(i) + 1].R3, data[parseInt(i) + 1].R4, data[parseInt(i) + 1].R5, data[parseInt(i) + 1].R6]; var arr3 = [data[parseInt(i) + 2].R1, data[parseInt(i) + 2].R2, data[parseInt(i) + 2].R3, data[parseInt(i) + 2].R4, data[parseInt(i) + 2].R5, data[parseInt(i) + 2].R6]; temp1 = repetition(arr1, arr2, arr3,1); } var temp2 = []; if (i > 0 && parseInt(i) + 1 < data.length) { var arr1 = [data[parseInt(i) - 1].R1, data[parseInt(i) - 1].R2, data[parseInt(i) - 1].R3, data[parseInt(i) - 1].R4, data[parseInt(i) - 1].R5, data[parseInt(i) - 1].R6]; var arr2 = [data[i].R1, data[i].R2, data[i].R3, data[i].R4, data[i].R5, data[i].R6]; var arr3 = [data[parseInt(i) + 1].R1, data[parseInt(i) + 1].R2, data[parseInt(i) + 1].R3, data[parseInt(i) + 1].R4, data[parseInt(i) + 1].R5, data[parseInt(i) + 1].R6]; temp2 = repetition(arr1, arr2, arr3,2); } var temp3 = []; if (i > 1 && i < data.length) { var arr1 = [data[parseInt(i) - 2].R1, data[parseInt(i) - 2].R2, data[parseInt(i) - 2].R3, data[parseInt(i) - 2].R4, data[parseInt(i) - 2].R5, data[parseInt(i) - 2].R6]; var arr2 = [data[parseInt(i) - 1].R1, data[parseInt(i) - 1].R2, data[parseInt(i) - 1].R3, data[parseInt(i) - 1].R4, data[parseInt(i) - 1].R5, data[parseInt(i) - 1].R6]; var arr3 = [data[i].R1, data[i].R2, data[i].R3, data[i].R4, data[i].R5, data[i].R6]; temp3 = repetition(arr1, arr2, arr3,3); }
function repetition(arr, brr, crr,index) { //定義一個新的數組，存入重複的數組 var newArr = []; //循環兩個數組，外循環循環一圈，內循環一輪，用外循環的一個去和內循環的每一個作比較 //如果相等說明就是重複的，然後再新數組裡查找一下，這個數是否存在，如果兩個條件都滿足，則存入新數組 //循環第一個數組 for (var i = 0; i < arr.length; i++) { //循環第二個數組 for (var j = 0; j < brr.length; j++) { for (var x = 0; x < crr.length; x++) { //避免新數組中出現重複的數 if ((arr[i] - brr[j] == 1 && brr[j] - crr[x] == 1 && arr[i] - crr[x] == 2) || (arr[i] - brr[j] == -1 && brr[j] - crr[x] == -1 && arr[i] - crr[x] == -2)) { if (index == 1) { newArr.push(arr[i]); } if (index == 2) { newArr.push(brr[j]); } if (index == 3) { newArr.push(crr[x]); } } } } } //返回新數組 return newArr; } function checkdata(arr, num) { var bool = false; for (var i = 0; i < arr.length; i++) { if (arr[i] == num) { bool = true; break; } } return bool; }
現在已經實現了一些彩票的走勢圖，未來還會做福彩3D、福彩七樂彩、超級大樂透、體綵排列三、排列五、體彩七星彩等等熱門彩票，目前已經在做福彩3D走勢，已經實現了一部分功能了。
包括還做了一些工具，比如複試拆分：
複式計算器
在線縮水
結束語
做這雙色球走勢，純粹是為了為人的興趣而已，感覺還是挺有趣的，涉及到很多年的演算法和前端的技術，提升自己的前端技術是非常有用的，未來會利用業餘時間進行研究，如各位有興趣可以一起交流，如都有興趣，下期介紹怎麼爬蟲雙色球的數據和怎麼去保存數據，這個也是要做好這個走勢圖的前提條件，我這個完全在網上進行爬蟲下來的歷史數據，一般的調用介面都是要收費的，所以逼得自己必須去其他官方的網站去爬取數據，這樣就比較方便。
