table02
1、table_02.css
/* 表格 大小定义: */ :root { /* ZC: 定义css变量 */ --z-bgc-td: #0097C5; --z-bgc-td-head: #D3DFF1; --z-border: 1px solid black; } .borderHead { border-left: var(--z-border); border-right: var(--z-border); border-top: var(--z-border); } .borderBody { border: var(--z-border); } .positionOffset { /* margin-left: 10px; margin-right: 10px; margin-top: 10px; margin-bottom: 10px; */ } .table01 { text-align: center; font-size: small; table-layout:fixed; /* 貌似这个属性也很关键，不设置的话，每个小格的宽度会不一样 */ /* 设置了该属性，每一小格格宽度不受其中内容的宽度影响(内容长度较长时，内容会跑到格子外面去...) */ white-space: nowrap; width :1045px;/* 这个值要自己算: 单元格的宽度+边框的宽度。我这里手动设置了4个宽度，剩下的就留给系统自动去均分了 */ /* (手动设置)80+40*3 (每个小方框宽是26)+40*20 +(边框)45= */ } .table01 td { height:20px; } .table01 .td01 { width:80px; } .table01 .td02 { width:40px; } .table01 tr:not(:last-child) td:not(:last-child) { border-right: var(--z-border); border-bottom: var(--z-border); } .table01 tr:not(:last-child) td:last-child { border-bottom: var(--z-border); } .table01 tr:last-child td:not(:last-child) { border-right: var(--z-border); } .table01 thead tr:first-child .td01, .table01 thead tr:first-child .td02 { border-bottom :none; } /* *** *** *** */ .table01 thead tr:nth-child(1) td { background-color: var(--z-bgc-td); color: white; /* 这样即可设置字体颜色 */ } .table01 thead tr:nth-child(2) td { font-weight:bold; } /* 下面两个，不知如何合并成一个... */ .table01 tbody td:nth-child(n+32):nth-child(-n+34) { background-color: var(--z-bgc-td-head); } .table01 tbody td:nth-child(1) { background-color: var(--z-bgc-td-head); }
2、table_02.html
<!DOCTYPE html> <html> <meta charset="UTF-8"> <body> <script type="text/javascript" src="table_02_canvas.js"></script> <script type="text/javascript" src="table_02_data.js"></script> <script type="text/javascript" src="table_02_tableOper.js"></script> <script type="text/javascript" > window.onload = function() { //DivPiao_relativePosition(); DivPiao_marginTop(); var divTableHead = document.getElementById("divTableHead"); var divTableBody = document.getElementById("divTableBody"); divTableHead.style.width = (divTableBody.clientWidth + 0) + "px"; // *** g_dataOper.Init(); g_tableOper.RowDelAll("tableZouShi"); for (var i=0; i<g_data.length; i++) { g_tableOper.ContentAdd("tableZouShi", i, 1, g_data[i].FiWan+""); } }; function DivPiao_marginTop() { var divPiao = document.getElementById("divPiao"); var tableZouShi = document.getElementById("tableZouShi"); var rtTable = tableZouShi.getBoundingClientRect(); var rtPiao = divPiao.getBoundingClientRect(); var iJianGe = rtPiao.top - (rtTable.top + rtTable.height);// tableZouShi底部 和 divPiao顶部 之间的间隔 divPiao.style.marginTop = - (rtTable.height + iJianGe) + "px"; divPiao.style.height = rtTable.height + "px"; divPiao.style.width = rtTable.width + "px"; /* console.log("rtTable.top : "+rtTable.top); console.log("rtTable.height : "+rtTable.height); console.log("rtPiao.top : "+rtPiao.top); console.log("iJianGe : "+iJianGe); console.log("divPiao.style.top : "+divPiao.style.top); */ } function DivTableBodyScroll(_event) { console.log(_event.target); console.log(""); console.log(_event.target.scrollTop); console.log(_event.target.scrollLeft); console.log(_event.target.scrollWidth); console.log(_event.target.scrollHeight); console.log(""); console.log(_event.target.clientTop); console.log(_event.target.clientLeft); console.log(_event.target.clientWidth); console.log(_event.target.clientHeight); var divTableHead = document.getElementById("divTableHead"); divTableHead.scrollLeft = _event.target.scrollLeft; /* for (var z in _event.target) { console.log(z); } //*/ } </script> <link rel="stylesheet" href="table_02.css"> <style type="text/css"> </style> <div> <div id="divTableHead" style="width:800px; overflow: hidden; background-color:silver;"> <table class="table01 positionOffset borderHead" cellspacing="0" cellpadding="0"> <thead> <tr> <td rowspan="2" class="td01">开奖号码</td><td colspan="10">百位</td><td colspan="10">十位</td><td colspan="10">个位</td> <td rowspan="2" class="td02">组三</td><td rowspan="2" class="td02">组六</td><td rowspan="2" class="td02">豹子</td><td colspan="10">0-9综合分布</td> </tr> <tr> <td>0</td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td> <td>0</td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td> <td>0</td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td> <td>0</td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td> </tr> </thead> </table> </div> <div id="divTableBody" style="width:800px; height:400px; overflow: auto; background-color:silver;" onscroll="DivTableBodyScroll(event)"> <table id="tableZouShi" class="table01 positionOffset borderBody" cellspacing="0" cellpadding="0" > <tbody> <tr> <!--第1行--> <td class="td01">6,1,0,0,2</td> <td>0</td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td> <td>10</td><td>11</td><td>12</td><td>13</td><td>14</td><td>15</td><td>16</td><td>17</td><td>18</td><td>19</td> <td>20</td><td>21</td><td>22</td><td>23</td><td>24</td><td>25</td><td>26</td><td>27</td><td>28</td><td>29</td> <td class="td02">组三</td><td class="td02">-</td><td class="td02">-</td> <td>0</td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td> </tr> <tr> <!--第2行--> <td>5,3,6,5,7</td> <td>0</td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td> <td>10</td><td>11</td><td>12</td><td>13</td><td>14</td><td>15</td><td>16</td><td>17</td><td>18</td><td>19</td> <td>20</td><td>21</td><td>22</td><td>23</td><td>24</td><td>25</td><td>26</td><td>27</td><td>28</td><td>29</td> <td>-</td><td>组六</td><td>-</td> <td>0</td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td> </tr> <tr> <!--第3行--> <td>4,8,4,4,5</td> <td>0</td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td> <td>10</td><td>11</td><td>12</td><td>13</td><td>14</td><td>15</td><td>16</td><td>17</td><td>18</td><td>19</td> <td>20</td><td>21</td><td>22</td><td>23</td><td>24</td><td>25</td><td>26</td><td>27</td><td>28</td><td>29</td> <td>组三</td><td>-</td><td>-</td> <td>0</td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td> </tr> <tr> <!--第4行--> <td>7,6,5,0,9</td> <td>0</td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td> <td>10</td><td>11</td><td>12</td><td>13</td><td>14</td><td>15</td><td>16</td><td>17</td><td>18</td><td>19</td> <td>20</td><td>21</td><td>22</td><td>23</td><td>24</td><td>25</td><td>26</td><td>27</td><td>28</td><td>29</td> <td>-</td><td>组六</td><td>-</td> <td>0</td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td> </tr> </tr> <!--第5行--> <td>9,0,7,3,2</td> <td>0</td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td> <td>10</td><td>11</td><td>12</td><td>13</td><td>14</td><td>15</td><td>16</td><td>17</td><td>18</td><td>19</td> <td>20</td><td>21</td><td>22</td><td>23</td><td>24</td><td>25</td><td>26</td><td>27</td><td>28</td><td>29</td> <td>-</td><td>组六</td><td>-</td> <td>0</td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td> </tr> <tr> <!--第6行--> <td>7,1,5,3,7</td> <td>0</td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td> <td>10</td><td>11</td><td>12</td><td>13</td><td>14</td><td>15</td><td>16</td><td>17</td><td>18</td><td>19</td> <td>20</td><td>21</td><td>22</td><td>23</td><td>24</td><td>25</td><td>26</td><td>27</td><td>28</td><td>29</td> <td>-</td><td>组六</td><td>-</td> <td>0</td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td> </tr> <tr> <!--第7行--> <td>7,4,6,3,8</td> <td>0</td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td> <td>10</td><td>11</td><td>12</td><td>13</td><td>14</td><td>15</td><td>16</td><td>17</td><td>18</td><td>19</td> <td>20</td><td>21</td><td>22</td><td>23</td><td>24</td><td>25</td><td>26</td><td>27</td><td>28</td><td>29</td> <td>-</td><td>组六</td><td>-</td> <td>0</td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td> </tr> <tr> <!--第8行--> <td>4,9,4,5,9</td> <td>0</td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td> <td>10</td><td>11</td><td>12</td><td>13</td><td>14</td><td>15</td><td>16</td><td>17</td><td>18</td><td>19</td> <td>20</td><td>21</td><td>22</td><td>23</td><td>24</td><td>25</td><td>26</td><td>27</td><td>28</td><td>29</td> <td>-</td><td>组六</td><td>-</td> <td>0</td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td> </tr> <tr> <!--第9行--> <td>3,4,6,6,4</td> <td>0</td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td> <td>10</td><td>11</td><td>12</td><td>13</td><td>14</td><td>15</td><td>16</td><td>17</td><td>18</td><td>19</td> <td>20</td><td>21</td><td>22</td><td>23</td><td>24</td><td>25</td><td>26</td><td>27</td><td>28</td><td>29</td> <td>组三</td><td>-</td><td>-</td> <td>0</td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td> </tr> </tr> <!--第10行--> <td>4,8,4,0,1</td> <td>0</td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td> <td>10</td><td>11</td><td>12</td><td>13</td><td>14</td><td>15</td><td>16</td><td>17</td><td>18</td><td>19</td> <td>20</td><td>21</td><td>22</td><td>23</td><td>24</td><td>25</td><td>26</td><td>27</td><td>28</td><td>29</td> <td>-</td><td>组六</td><td>-</td> <td>0</td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td> </tr> </tr> <!--第11行--> <td>8,2,1,1,5</td> <td>0</td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td> <td>10</td><td>11</td><td>12</td><td>13</td><td>14</td><td>15</td><td>16</td><td>17</td><td>18</td><td>19</td> <td>20</td><td>21</td><td>22</td><td>23</td><td>24</td><td>25</td><td>26</td><td>27</td><td>28</td><td>29</td> <td>组三</td><td>-</td><td>-</td> <td>0</td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td> </tr> </tr> <!--第12行--> <td>3,3,0,4,7</td> <td>0</td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td> <td>10</td><td>11</td><td>12</td><td>13</td><td>14</td><td>15</td><td>16</td><td>17</td><td>18</td><td>19</td> <td>20</td><td>21</td><td>22</td><td>23</td><td>24</td><td>25</td><td>26</td><td>27</td><td>28</td><td>29</td> <td>-</td><td>组六</td><td>-</td> <td>0</td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td> </tr> </tr> <!--第13行--> <td>8,3,4,3,9</td> <td>0</td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td> <td>10</td><td>11</td><td>12</td><td>13</td><td>14</td><td>15</td><td>16</td><td>17</td><td>18</td><td>19</td> <td>20</td><td>21</td><td>22</td><td>23</td><td>24</td><td>25</td><td>26</td><td>27</td><td>28</td><td>29</td> <td>-</td><td>组六</td><td>-</td> <td>0</td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td> </tr> </tr> <!--第14行--> <td>3,7,3,9,6</td> <td>0</td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td> <td>10</td><td>11</td><td>12</td><td>13</td><td>14</td><td>15</td><td>16</td><td>17</td><td>18</td><td>19</td> <td>20</td><td>21</td><td>22</td><td>23</td><td>24</td><td>25</td><td>26</td><td>27</td><td>28</td><td>29</td> <td>-</td><td>组六</td><td>-</td> <td>0</td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td> </tr> </tr> <!--第15行--> <td>2,2,5,4,6</td> <td>0</td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td> <td>10</td><td>11</td><td>12</td><td>13</td><td>14</td><td>15</td><td>16</td><td>17</td><td>18</td><td>19</td> <td>20</td><td>21</td><td>22</td><td>23</td><td>24</td><td>25</td><td>26</td><td>27</td><td>28</td><td>29</td> <td>-</td><td>组六</td><td>-</td> <td>0</td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td> </tr> </tr> <!--第16行--> <td>5,1,2,2,4</td> <td>0</td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td> <td>10</td><td>11</td><td>12</td><td>13</td><td>14</td><td>15</td><td>16</td><td>17</td><td>18</td><td>19</td> <td>20</td><td>21</td><td>22</td><td>23</td><td>24</td><td>25</td><td>26</td><td>27</td><td>28</td><td>29</td> <td>组三</td><td>-</td><td>-</td> <td>0</td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td> </tr> </tr> <!--第17行--> <td>3,1,8,4,6</td> <td>0</td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td> <td>10</td><td>11</td><td>12</td><td>13</td><td>14</td><td>15</td><td>16</td><td>17</td><td>18</td><td>19</td> <td>20</td><td>21</td><td>22</td><td>23</td><td>24</td><td>25</td><td>26</td><td>27</td><td>28</td><td>29</td> <td>-</td><td>组六</td><td>-</td> <td>0</td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td> </tr> </tr> <!--第18行--> <td>6,4,2,3,6</td> <td>0</td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td> <td>10</td><td>11</td><td>12</td><td>13</td><td>14</td><td>15</td><td>16</td><td>17</td><td>18</td><td>19</td> <td>20</td><td>21</td><td>22</td><td>23</td><td>24</td><td>25</td><td>26</td><td>27</td><td>28</td><td>29</td> <td>-</td><td>组六</td><td>-</td> <td>0</td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td> </tr> </tr> <!--第19行--> <td>6,8,5,7,4</td> <td>0</td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td> <td>10</td><td>11</td><td>12</td><td>13</td><td>14</td><td>15</td><td>16</td><td>17</td><td>18</td><td>19</td> <td>20</td><td>21</td><td>22</td><td>23</td><td>24</td><td>25</td><td>26</td><td>27</td><td>28</td><td>29</td> <td>-</td><td>组六</td><td>-</td> <td>0</td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td> </tr> </tr> <!--第20行--> <td>6,1,1,1,9</td> <td>0</td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td> <td>10</td><td>11</td><td>12</td><td>13</td><td>14</td><td>15</td><td>16</td><td>17</td><td>18</td><td>19</td> <td>20</td><td>21</td><td>22</td><td>23</td><td>24</td><td>25</td><td>26</td><td>27</td><td>28</td><td>29</td> <td>组三</td><td>-</td><td>-</td> <td>0</td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td> </tr> </tbody> </table> <div id="divPiao" style="background: blue; -webkit-opacity:0.5; width:200px; height:100px; left:0px; top:0px;"></div> <!-- position: fixed relative --> <!-- <div id="divPiao" style="border:1px solid red; width:80px; height:30px; position: absolute; left:80px; top:50px;"> </div> --> </div> </div> </body> </html>
3、table_02_canvas.js
function DrawImage(_canvas, _strImage, _iWidth, _iHeight) { var cxt= _canvas.getContext("2d"); var img = new Image(); img.src = _strImage; cxt.drawImage(img, _iWidth, _iHeight); } // 可变参数 function DrawLine(_canvas, _strCtxStrokeStyle, _iXmove2, _iYmove2, _iXline2, _iYline2) { //简单地检测当前浏览器是否支持Canvas对象，以免在一些不支持html5的浏览器中提示语法错误 if(_canvas.getContext) { //获取对应的CanvasRenderingContext2D对象(画笔) var ctx = canvas.getContext("2d"); //开始一个新的绘制路径 ctx.beginPath(); ctx.strokeStyle = _strCtxStrokeStyle; ctx.moveTo(_iXmove2, _iYmove2); ctx.lineTo(_iXline2, _iYline2); if (arguments.length > 6) { var iXline2 = 0; var iYline2 = 0; for(var i=6; i<(arguments.length-1); i=i+2 ) { iXline2 = arguments[i]; iYline2 = arguments[i+1]; ctx.lineTo(iXline2, iYline2); } } //沿着坐标点顺序的路径绘制直线 ctx.stroke(); //关闭当前的绘制路径 ctx.closePath(); } } function DrawText(_canvas, _strFillStyle, _strText, _iX, _iY) { if(_canvas.getContext) { //获取对应的CanvasRenderingContext2D对象(画笔) var ctx = canvas.getContext("2d"); //#EEB23E ctx.fillStyle = _strFillStyle; ctx.fillText(_strText, _iX, _iY); } } // *** *** *** *** *** function DrawNum(_strCanvasId, _strColorFolder, _strBmp) { var canvas = document.getElementById(_strCanvasId); var strImage = "./pics/"+_strColorFolder+"/"+_strBmp; DrawImage(canvas, strImage, 24, 24); }
4、table_02_data.js
var g_data = new Array(); var g_dataOper = new TDataOper(); function Tdata() { this.FiWan = 0; // 万位 this.FiQian = 0;// 千位 this.FiBai = 0; // 百位 this.FiShi = 0; // 十位 this.FiGe = 0; // 个位 this.FstrKaiJiangHaoMa = null; this.FstrZu3Zu6BaoZi = null; } function TDataOper() { this.Init = function() { for (var i=0; i<20; i++) { var data = new Tdata(); var f = Math.random() * 10; // Math.random(): 返回0和1间(包括0,不包括1)的一个随机数。 var n = Math.round(f); // 参数为一个数值，函数结果为四舍五入后的整数。 data.FiWan = n; f = Math.random() * 10; n = Math.round(f); data.FiQian = n; f = Math.random() * 10; n = Math.round(f); data.FiBai = n; f = Math.random() * 10; n = Math.round(f); data.FiShi = n; f = Math.random() * 10; n = Math.round(f); data.FiGe = n; data.FstrKaiJiangHaoMa = data.FiWan+","+data.FiQian+","+data.FiBai+","+data.FiShi+","+data.FiGe; this.Zu3Zu6BaoZi(data); g_data[i] = data; } }; this.Zu3Zu6BaoZi = function(_data) { _data }; }
5、table_02_tableOper.js
// 对表格的 添加/删除 等的操作 var g_iColCntInRow = 44; var g_tableOper = new TtableOper(); function TtableOper() { this.ContentAdd = function(_strTableId, _iRowIdx, _iColIdx, _strCell_innerHTML) { var table = document.getElementById(_strTableId); if (_iRowIdx >= table.rows.length) { var iExtra = (_iRowIdx+1) - table.rows.length; for (var i=1; i<=iExtra; i++) this.RowAdd(table, table.rows.length); } table.rows[_iRowIdx].cells[_iColIdx].innerHTML = _strCell_innerHTML; }; // *** *** *** *** *** // ZC: 添加一个新行(并且 添加里面的列) this.RowAdd = function(_table, _iNewRowIdx) { var tableRowNew = _table.insertRow(_iNewRowIdx); for (var i=0; i<g_iColCntInRow; i++) { var tableCell = tableRowNew.insertCell(); if (_iNewRowIdx == 0) { if (i == 0) tableCell.className = "td01"; if ( (i==31) || (i==32) || (i==33) ) tableCell.className = "td02"; } } }; this.RowDel = function(_table, _iDelRowIdx) { _table.deleteRow(_iDelRowIdx); }; this.RowDelAll = function(_strTableId) { var table = document.getElementById(_strTableId); while (table.rows.length > 0) table.deleteRow(0); }; }
6、
7、
8、
