序言
估计每个人都有中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走势，已经实现了一部分功能了。
包括还做了一些工具，比如复试拆分：
复式计算器
在线缩水
结束语
做这双色球走势，纯粹是为了为人的兴趣而已，感觉还是挺有趣的，涉及到很多年的算法和前端的技术，提升自己的前端技术是非常有用的，未来会利用业余时间进行研究，如各位有兴趣可以一起交流，如都有兴趣，下期介绍怎么爬虫双色球的数据和怎么去保存数据，这个也是要做好这个走势图的前提条件，我这个完全在网上进行爬虫下来的历史数据，一般的调用接口都是要收费的，所以逼得自己必须去其他官方的网站去爬取数据，这样就比较方便。
