网格4*4，每个网格中存在小网格为8*8

支持从左上角拖拽选中，以及右下角拖拽选中

导出的数据含义，从右下角8*8网格开始每列自上向下，从左到右，

对于4*4网格，如图一顺序

code

  1. <!doctype html>
  2. <html lang="en">
  3.  <head>
  4.   <meta charset="UTF-8">
  5.   <meta name="Generator" content="EditPlus®">
  6.   <meta name="Author" content="">
  7.   <meta name="Keywords" content="">
  8.   <meta name="Description" content="">
  9.   <title>Document</title>
  10.   <style>
  11. .box1{
  12.      width:380px;
  13.      position: fixed;
  14.      z-index:;
  15.      border:1px solid #ccc;
  16.      left:;
  17.      right:;
  18.      margin:% auto auto auto;
  19.      background-color:#fff;
  20.      padding:6px;
  21.     }
  22. .closeBtn{
  23.   float:right;
  24.   margin-right:%;
  25.   cursor: pointer;
  26. }
  27. .title{
  28.   height: 20px;
  29. }
  30. p{
  31. padding:3px;
  32. border-top:1px solid #ccc;
  33. word-break:normal;
  34. white-space:pre-warp;
  35. word-wrap:break-word;
  36. }
  37.  #active_box{
  38.     border:1px solid black;
  39.     width: 0px;
  40.     height: 0px;
  41.     position: absolute;
  42.     z-index:-;
  43.   }
  44.   table{
  45.   border-style: ridge;
  46.   position: positive;
  47.   opacity:0.75;
  48.   display:inline;
  49.   border-collapse:collapse;
  50.   }
  51.   table:hover{
  52.     cursor:pointer;
  53.   }
  54.   td
  55.   {
  56.   border: 1px solid black;
  57.   }
  58.   #d{
  59.   float:right;
  60.   }
  61.   #p{
  62.   float:left;
  63.   }
  64.   #tablelist{
  65.   opacity:;
  66.   width:%;
  67.   margin-left:%;
  68.   }
  69.   .white{
  70.   background-color:#ffffff;
  71.   }
  72.   .yellow{
  73.   background-color:#FFFF00;
  74.   border-radius:%;
  75.   }
  76.   #ddiv{
  77.   opacity:;
  78.   z-index:-;
  79.   }
  80.   button:hover{
  81.     cursor:pointer;
  82.   }
  83. input:hover{
  84.     cursor:pointer;
  85. }
  86. .control{
  87.     text-align: center;
  88.     text-decoration: none;
  89.     background-color: #4CAF50; /* Green */
  90.     border: none;
  91.     color: white;
  92.     border-radius: 2px;
  93.     margin:%;
  94. }
  95.   </style>
  96.   <script>
  97.   var is_down=;
  98.   var down_id="";
  99.   var up_id="";
  100.   var startX, startY;
  101.   var is_follow=;
  102.   var isExist=null;
  103. // 鼠标移动
  104. function mousemove(e){
  105.     if(is_down){
  106.          // 更新 box 尺寸
  107.         if(document.getElementById("active_box") !== null) {
  108.             var ab = document.getElementById("active_box");
  109.             if(e.pageX>startX){
  110.                 if(e.pageY>startY){
  111.                     ab.style.top = startY + 'px';
  112.                     ab.style.left = startX + 'px';
  113.                     ab.style.width = Math.abs(e.pageX - startX) + 'px';
  114.                     ab.style.height = Math.abs(e.pageY - startY) + 'px';
  115.                 }else if(e.pageY==startY){
  116.                     ab.style.top = startY + 'px';
  117.                     ab.style.left = startX + 'px';
  118.                     ab.style.width = Math.abs(e.pageX - startX) + 'px';
  119.                     ab.style.height = Math.abs(e.pageY - startY) + 'px';
  120.                 }else{
  121.                     ab.style.top = e.pageY + 'px';
  122.                     ab.style.left = startX + 'px';
  123.                     ab.style.width = Math.abs(e.pageX - startX) + 'px';
  124.                     ab.style.height = Math.abs(e.pageY - startY) + 'px';
  125.                 }
  126.             }else if(e.pageX==startX){
  127.                 if(e.pageY>startY){
  128.                     ab.style.top = startY + 'px';
  129.                     ab.style.left = startX + 'px';
  130.                     ab.style.width = Math.abs(e.pageX - startX) + 'px';
  131.                     ab.style.height = Math.abs(e.pageY - startY) + 'px';
  132.                 }else if(e.pageY==startY){
  133.                     ab.style.top = startY + 'px';
  134.                     ab.style.left = startX + 'px';
  135.                     ab.style.width = Math.abs(e.pageX - startX) + 'px';
  136.                     ab.style.height = Math.abs(e.pageY - startY) + 'px';
  137.                 }else{
  138.                     ab.style.top = e.pageY + 'px';
  139.                     ab.style.left = startX + 'px';
  140.                     ab.style.width = Math.abs(e.pageX - startX) + 'px';
  141.                     ab.style.height = Math.abs(e.pageY - startY) + 'px';
  142.                 }
  143.             }else{
  144.                 if(e.pageY>startY){
  145.                     ab.style.top = startY + 'px';
  146.                     ab.style.left = e.pageX + 'px';
  147.                     ab.style.width = Math.abs(e.pageX - startX) + 'px';
  148.                     ab.style.height = Math.abs(e.pageY - startY) + 'px';
  149.                 }else if(e.pageY==startY){
  150.                     ab.style.top = e.pageY + 'px';
  151.                     ab.style.left = e.pageX + 'px';
  152.                     ab.style.width = Math.abs(e.pageX - startX) + 'px';
  153.                     ab.style.height = Math.abs(e.pageY - startY) + 'px';
  154.                 }else{
  155.                     ab.style.top = e.pageY + 'px';
  156.                     ab.style.left = e.pageX + 'px';
  157.                     ab.style.width = Math.abs(e.pageX - startX) + 'px';
  158.                     ab.style.height = Math.abs(e.pageY - startY) + 'px';
  159.                 }
  160.             }
  161.         }
  162.     }else{
  163.         if(document.getElementById("active_box") !== null){
  164.             var ab = document.getElementById("active_box");
  165.             document.body.removeChild(ab);
  166.         }
  167.     }
  168. }
  169. function mouseDown(e,d)
  170. {
  171.     down_id=e.id;
  172.     startX = d.pageX;
  173.     startY = d.pageY;
  174.     // 在页面创建 box
  175.     var active_box = document.createElement("div");
  176.     active_box.id = "active_box";
  177.     active_box.className = "box";
  178.     document.body.appendChild(active_box);
  179.     active_box.style.top = startY + 'px';
  180.     active_box.style.left = startX + 'px';
  181.     active_box = null;
  182.     is_down=;
  183. }
  184. function mouseUp(e,d)
  185. {
  186.     is_down=;
  187.     if(document.getElementById("active_box") !== null){
  188.             var ab = document.getElementById("active_box");
  189.             document.body.removeChild(ab);
  190.     }
  191.     up_id=e.id;
  192.     tname_up=up_id.split(",")[];
  193.     tname_down=down_id.split(",")[];
  194.     x_up=parseInt(up_id.split(",")[]);
  195.     y_up=parseInt(up_id.split(",")[]);
  196.     x_down=parseInt(down_id.split(",")[]);
  197.     y_down=parseInt(down_id.split(",")[]);
  198.     if(down_id==up_id){
  199.         if(tname_up==tname_down&&tname_up=="p"){
  200.             //console.log("p");
  201.             if(e.className=="white"){
  202.                 a=document.getElementById("p,"+x_up+","+y_up);
  203.                 a.className = "yellow";
  204.                 if(is_follow){
  205.                     b=document.getElementById("d,"+x_down+","+y_down);
  206.                     b.className = "yellow";
  207.                 }
  208.             }else{
  209.                 a=document.getElementById("p,"+x_up+","+y_up);
  210.                 a.className = "white";
  211.                 if(is_follow){
  212.                     b=document.getElementById("d,"+x_down+","+y_down);
  213.                     b.className = "white";
  214.                 }
  215.             }
  216.         }else if(tname_up==tname_down&&tname_up=="d"){
  217.             if(e.className=="white"){
  218.                 a=document.getElementById("d,"+x_up+","+y_up);
  219.                 a.className = "yellow";
  220.                 if(is_follow){
  221.                     b=document.getElementById("p,"+x_down+","+y_down);
  222.                     b.className = "yellow";
  223.                 }
  224.             }else{
  225.                 a=document.getElementById("d,"+x_up+","+y_up);
  226.                 a.className = "white";
  227.                 if(is_follow){
  228.                     b=document.getElementById("p,"+x_down+","+y_down);
  229.                     b.className = "white";
  230.                 }
  231.             }
  232.         }
  233.     }else{
  234.         if(y_up>y_down){
  235.             if(x_up>=x_down){
  236.                 for(i=x_down;i<=x_up;i++){
  237.                     for(j=y_down;j<=y_up;j++){
  238.                         //console.log("p,"+i+","+j);
  239.                         if(tname_up==tname_down&&tname_up=="p"){
  240.                             a=document.getElementById("p,"+i+","+j);
  241.                             a.className = "yellow";
  242.                             if(is_follow){
  243.                                 b=document.getElementById("d,"+i+","+j);
  244.                                 b.className = "yellow";
  245.                             }
  246.                         }else if(tname_up==tname_down&&tname_up=="d"){
  247.                             a=document.getElementById("d,"+i+","+j);
  248.                             a.className = "yellow";
  249.                             if(is_follow){
  250.                                 b=document.getElementById("p,"+i+","+j);
  251.                                 b.className = "yellow";
  252.                             }
  253.                         }
  254.                     }
  255.                 }
  256.             }else {
  257.                 for(i=x_up;i<=x_down;i++){
  258.                     for(j=y_down;j<=y_up;j++){
  259.                         //console.log(i+","+j);
  260.                         if(tname_up==tname_down&&tname_up=="p"){
  261.                             a=document.getElementById("p,"+i+","+j);
  262.                             a.className = "white";
  263.                             if(is_follow){
  264.                                 b=document.getElementById("d,"+i+","+j);
  265.                                 b.className = "white";
  266.                             }
  267.                         }else if(tname_up==tname_down&&tname_up=="d"){
  268.                             a=document.getElementById("d,"+i+","+j);
  269.                             a.className = "white";
  270.                             if(is_follow){
  271.                                 b=document.getElementById("p,"+i+","+j);
  272.                                 b.className = "white";
  273.                             }
  274.                         }
  275.                     }
  276.                 }
  277.             }
  278.         }else if(y_up==y_down){
  279.             if(x_up>x_down){
  280.                 for(i=x_down;i<=x_up;i++){
  281.                     for(j=y_down;j<=y_up;j++){
  282.                         //console.log(i+","+j);
  283.                         if(tname_up==tname_down&&tname_up=="p"){
  284.                             a=document.getElementById("p,"+i+","+j);
  285.                             a.className = "yellow";
  286.                             if(is_follow){
  287.                                 b=document.getElementById("d,"+i+","+j);
  288.                                 b.className = "yellow";
  289.                             }
  290.                         }else if(tname_up==tname_down&&tname_up=="d"){
  291.                             a=document.getElementById("d,"+i+","+j);
  292.                             a.className = "yellow";
  293.                             if(is_follow){
  294.                                 b=document.getElementById("p,"+i+","+j);
  295.                                 b.className = "yellow";
  296.                             }
  297.                         }
  298.                     }
  299.                 }
  300.             }else {
  301.                 for(i=x_up;i<=x_down;i++){
  302.                     for(j=y_down;j<=y_up;j++){
  303.                         //console.log(i+","+j);
  304.                         if(tname_up==tname_down&&tname_up=="p"){
  305.                             a=document.getElementById("p,"+i+","+j);
  306.                             a.className = "white";
  307.                             if(is_follow){
  308.                                 b=document.getElementById("d,"+i+","+j);
  309.                                 b.className = "white";
  310.                             }
  311.                         }else if(tname_up==tname_down&&tname_up=="d"){
  312.                             a=document.getElementById("d,"+i+","+j);
  313.                             a.className = "white";
  314.                             if(is_follow){
  315.                                 b=document.getElementById("p,"+i+","+j);
  316.                                 b.className = "white";
  317.                             }
  318.                         }
  319.                     }
  320.                 }
  321.             }
  322.         }else{
  323.             if(x_up>=x_down){
  324.                 for(i=x_down;i<=x_up;i++){
  325.                     for(j=y_up;j<=y_down;j++){
  326.                         //console.log(i+","+j);
  327.                         if(tname_up==tname_down&&tname_up=="p"){
  328.                             a=document.getElementById("p,"+i+","+j);
  329.                             a.className = "white";
  330.                             if(is_follow){
  331.                                 b=document.getElementById("d,"+i+","+j);
  332.                                 b.className = "white";
  333.                             }
  334.                         }else if(tname_up==tname_down&&tname_up=="d"){
  335.                             a=document.getElementById("d,"+i+","+j);
  336.                             a.className = "white";
  337.                             if(is_follow){
  338.                                 b=document.getElementById("p,"+i+","+j);
  339.                                 b.className = "white";
  340.                             }
  341.                         }
  342.                     }
  343.                 }
  344.             }else{
  345.                 for(i=x_up;i<=x_down;i++){
  346.                     for(j=y_up;j<=y_down;j++){
  347.                         //console.log(i+","+j);
  348.                         if(tname_up==tname_down&&tname_up=="p"){
  349.                             a=document.getElementById("p,"+i+","+j);
  350.                             a.className = "white";
  351.                             if(is_follow){
  352.                                 b=document.getElementById("d,"+i+","+j);
  353.                                 b.className = "white";
  354.                             }
  355.                         }else if(tname_up==tname_down&&tname_up=="d"){
  356.                             a=document.getElementById("d,"+i+","+j);
  357.                             a.className = "white";
  358.                             if(is_follow){
  359.                                 b=document.getElementById("p,"+i+","+j);
  360.                                 b.className = "white";
  361.                             }
  362.                         }
  363.                     }
  364.                 }
  365.             }
  366.         }
  367.     }
  368. }
  369. function load(){
  370.     var follow_Obj = document.getElementById("follow");
  371.     follow_Obj.checked = true;
  372.     is_follow=;
  373.     document.getElementById("EleIdr").style.display="none";
  374. }
  375. function change(obj){
  376.     if (obj.checked == true){
  377.         is_follow=;
  378.         document.getElementById("EleIdr").style.display="none";
  379.     }
  380.     else{
  381.         is_follow=;
  382.         document.getElementById("EleIdr").style.display="inline";
  383.     }
  384. }
  385. function emp(){
  386.     for(i=;i<;i++){
  387.         for(j=;j<;j++){
  388.             //console.log(i+","+j);
  389.             a=document.getElementById("p,"+i+","+j);
  390.             b=document.getElementById("d,"+i+","+j);
  391.             a.className = "white";
  392.             b.className = "white";
  393.         }
  394.     }
  395. }
  396. function bin_to_hex(str) {
  397.     let hex_array = [{key:,val:""},{key:,val:""},{key:,val:""},{key:,val:""},{key:,val:""},{key:,val:""},{key:,val:""},{key:,val:""},
  398.         {key:,val:""},{key:,val:""},{key:'a',val:""},{key:'b',val:""},{key:'c',val:""},{key:'d',val:""},{key:'e',val:""},{key:'f',val:""}]
  399.     let value = ''
  400.     let list=[]
  401.     //console.log(str)
  402.     if(str.length%!==){
  403.         let a = ""
  404.         let b=a.substring(,-str.length%)
  405.         str = b.concat(str)
  406.     }
  407.     //console.log(str)
  408.     while (str.length > ) {
  409.         list.push(str.substring(, ))
  410.         str = str.substring();
  411.     }
  412.     list.push(str)
  413.     //console.log(list)
  414.     for(let i=;i<list.length;i++){
  415.         for(let j=;j<hex_array.length;j++){
  416.             if(list[i]==hex_array[j].val){
  417.                 value = value.concat(hex_array[j].key)
  418.                 break
  419.             }
  420.         }
  421.     }
  422.     //console.log(value)
  423.     return value
  424. }
  425. function output(e){
  426.     var isExist = document.getElementById('boxId');
  427.     var arrayObj = new Array();
  428.     var ll=;
  429.     var pointcur=[,];
  430.     if(e.id=="EleIdr"){
  431.         for(i=;i<;i++){
  432.             if(ll==){
  433.                 for(j=;j<;j++){
  434.                       for(n=pointcur[];n<pointcur[]+;n++){
  435.                           var arraytmp = new Array();
  436.                           for(m=pointcur[];m<pointcur[]+;m++){
  437.                                 //console.log(m,n);
  438.                                 d=document.getElementById('d,'+m+","+n);
  439.                                 if(d.className =="white"){
  440.                                     arraytmp.push();
  441.                                 }else{
  442.                                     arraytmp.push();
  443.                                 }
  444.                           }
  445.                           hex=bin_to_hex(arraytmp.join(""));
  446.                           //console.log(hex);
  447.                           arrayObj.push("0x"+hex);
  448.                       }
  449.                 if(j!=){
  450.                     pointcur[]=pointcur[]-;
  451.                 }
  452.                 }
  453.             ll=;
  454.             pointcur[]=pointcur[]-;
  455.             }else{
  456.                 for(j=;j<;j++){
  457.                       for(n=pointcur[];n<pointcur[]+;n++){
  458.                           var arraytmp = new Array();
  459.                           for(m=pointcur[];m<pointcur[]+;m++){
  460.                                 //console.log(m,n);
  461.                                 d=document.getElementById('d,'+m+","+n);
  462.                                 if(d.className =="white"){
  463.                                     arraytmp.push();
  464.                                 }else{
  465.                                     arraytmp.push();
  466.                                 }
  467.                           }
  468.                           hex=bin_to_hex(arraytmp.join(""));
  469.                           arrayObj.push("0x"+hex);
  470.                       }
  471.                 if(j!=){
  472.                     pointcur[]=pointcur[]+;
  473.                 }
  474.                 }
  475.             ll=;
  476.             pointcur[]=pointcur[]-;
  477.             }
  478.         }
  479.     }else{
  480.         for(i=;i<;i++){
  481.             if(ll==){
  482.                 for(j=;j<;j++){
  483.                       for(n=pointcur[];n<pointcur[]+;n++){
  484.                           var arraytmp = new Array();
  485.                           for(m=pointcur[];m<pointcur[]+;m++){
  486.                                 //console.log(m,n);
  487.                                 d=document.getElementById('p,'+m+","+n);
  488.                                 if(d.className =="white"){
  489.                                     arraytmp.push();
  490.                                 }else{
  491.                                     arraytmp.push();
  492.                                 }
  493.                           }
  494.                           hex=bin_to_hex(arraytmp.join(""));
  495.                           arrayObj.push("0x"+hex);
  496.                       }
  497.                 if(j!=){
  498.                     pointcur[]=pointcur[]-;
  499.                 }
  500.                 }
  501.             ll=;
  502.             pointcur[]=pointcur[]-;
  503.             }else{
  504.                 for(j=;j<;j++){
  505.                       for(n=pointcur[];n<pointcur[]+;n++){
  506.                           var arraytmp = new Array();
  507.                           for(m=pointcur[];m<pointcur[]+;m++){
  508.                                 //console.log(m,n);
  509.                                 d=document.getElementById('p,'+m+","+n);
  510.                                 if(d.className =="white"){
  511.                                     arraytmp.push();
  512.                                 }else{
  513.                                     arraytmp.push();
  514.                                 }
  515.                           }
  516.                           hex=bin_to_hex(arraytmp.join(""));
  517.                           arrayObj.push("0x"+hex);
  518.                       }
  519.                 if(j!=){
  520.                     pointcur[]=pointcur[]+;
  521.                 }
  522.                 }
  523.             ll=;
  524.             pointcur[]=pointcur[]-;
  525.             }
  526.         }
  527.     }
  528.       //判断是否存在，防止重复添加
  529.       if( undefined == isExist || null == isExist ){
  530.         text="";
  531.         for (i = ; i < arrayObj.length; i++) {
  532.              text += arrayObj[i] + ",";
  533.              if((i+)%==){
  534.                 text +="<br>";
  535.              }
  536.         }
  537.         //生成一个div
  538.         var boxDiv = document.createElement('div');
  539.         boxDiv.className = 'box1'; //添加我们自定义的样式
  540.         boxDiv.id = 'boxId'; //给这个DIV添加一个ID,便于删除
  541.         boxDiv.innerHTML = "<div class='title'><span class='closeBtn' onclick='removeDiv()'>关闭</span></div><p>"+text+"</p>";
  542.         document.body.appendChild(boxDiv);
  543.     }
  544. }
  545.     //移除DIV事件
  546. function removeDiv(){
  547.     var boxDiv =  document.getElementById('boxId');
  548.     document.body.removeChild(boxDiv);
  549. }
  550.   </script>
  551.  </head>
  552.  <body ondragstart = "return false;" onload="load()">
  553.  <script>
  554.  var winHeight=;
  555.  var winWidth=;
  556.  if(window.innerHeight){
  557.     winHeight = window.innerHeight;
  558.     }
  559. else if((document.body) && (document.body.clientHeight)){
  560. winHeight = document.body.clientHeight;
  561. }
  562.  if(window.innerWidth){
  563.     winWidth = window.innerWidth;
  564.     }
  565. else if((document.body) && (document.body.clientWidth)){
  566. winWidth = document.body.clientWidth;
  567. }
  568. th_width=Math.ceil(0.45*(winHeight-)/);
  569. document.write("<div id='tablelist'"+">")
  570. document.write("<table id ='p'"+" onmousemove='mousemove(event)'"+">")
  571.   for (i = ; i <; i++){
  572.     document.write("<tr class='p,"+i+"'>")
  573.     for(j=;j<;j++){
  574.             document.write("<td id='p,"+i+","+j+"' "+"width="+th_width+" "+"height="+th_width+" class='white'"+" onmousedown='mouseDown(this,event)'"+" onmouseup='mouseUp(this,event)'"+"></td>")
  575.     }
  576.     document.write("</tr>")
  577.     }
  578.     for (i = ; i <; i++){
  579.         for (j = ; j <; j++){
  580.             if(i==){
  581.                 document.getElementById('p,'+i+","+j).style.borderBottom="1.2px solid #FF00FF";
  582.             }else if(j==){
  583.                 document.getElementById('p,'+i+","+j).style.borderRight="1.2px solid #FF00FF";
  584.             }else if(i==){
  585.                 document.getElementById('p,'+i+","+j).style.borderBottom="1.51px solid #FF00FF";
  586.             }else if(j==){
  587.                 document.getElementById('p,'+i+","+j).style.borderRight="1.51px solid #FF00FF";
  588.             }else if(j==){
  589.                 document.getElementById('p,'+i+","+j).style.borderRight="1.2px solid #FF00FF";
  590.             }else if(i==){
  591.                 document.getElementById('p,'+i+","+j).style.borderBottom="1.2px solid #FF00FF";
  592.             }
  593.         }
  594.     }
  595.     x=document.getElementById('p,'++","+);
  596.     x.style.cssText="border-right:1.2px solid #FF00FF;border-bottom:1.2px solid #FF00FF;";
  597.     x=document.getElementById('p,'++","+);
  598.     x.style.cssText="border-right:1.2px solid #FF00FF;border-bottom:1.2px solid #FF00FF;";
  599.     x=document.getElementById('p,'++","+);
  600.     x.style.cssText="border-right:1.2px solid #FF00FF;border-bottom:1.2px solid #FF00FF;";
  601.     x=document.getElementById('p,'++","+);
  602.     x.style.cssText="border-right:1.2px solid #FF00FF;border-bottom:1.2px solid #FF00FF;";
  603.     x=document.getElementById('p,'++","+);
  604.     x.style.cssText="border-right:1.2px solid #FF00FF;border-bottom:1.2px solid #FF00FF;";
  605.     x=document.getElementById('p,'++","+);
  606.     x.style.cssText="border-right:1.2px solid #FF00FF;border-bottom:1.2px solid #FF00FF;";
  607.     x=document.getElementById('p,'++","+);
  608.     x.style.cssText="border-right:1.2px solid #FF00FF;border-bottom:1.2px solid #FF00FF;";
  609.     x=document.getElementById('p,'++","+);
  610.     x.style.cssText="border-right:1.2px solid #FF00FF;border-bottom:1.2px solid #FF00FF;";
  611.     x=document.getElementById('p,'++","+);
  612.     x.style.cssText="border-right:1.2px solid #FF00FF;border-bottom:1.2px solid #FF00FF;";
  613.     document.write("</table>")
  614.     document.write("<table id ='d'"+" onmousemove='mousemove(event)'"+">")
  615.   for (i = ; i <; i++){
  616.     document.write("<tr class='d,"+i+"'>")
  617.     for(j=;j<;j++){
  618.             document.write("<td id='d,"+i+","+j+"' "+"width="+th_width+" "+"height="+th_width+" class='white'"+" onmousedown='mouseDown(this,event)'"+" onmouseup='mouseUp(this,event)'"+"></td>")
  619.     }
  620.     document.write("</tr>")
  621.     }
  622.     for (i = ; i <; i++){
  623.         for (j = ; j <; j++){
  624.             if(i==){
  625.                 document.getElementById('d,'+i+","+j).style.borderBottom="1.2px solid #FF00FF";
  626.             }else if(j==){
  627.                 document.getElementById('d,'+i+","+j).style.borderRight="1.2px solid #FF00FF";
  628.             }else if(i==){
  629.                 document.getElementById('d,'+i+","+j).style.borderBottom="1.51px solid #FF00FF";
  630.             }else if(j==){
  631.                 document.getElementById('d,'+i+","+j).style.borderRight="1.51px solid #FF00FF";
  632.             }else if(j==){
  633.                 document.getElementById('d,'+i+","+j).style.borderRight="1.2px solid #FF00FF";
  634.             }else if(i==){
  635.                 document.getElementById('d,'+i+","+j).style.borderBottom="1.2px solid #FF00FF";
  636.             }
  637.         }
  638.     }
  639.     x=document.getElementById('d,'++","+);
  640.     x.style.cssText="border-right:1.2px solid #FF00FF;border-bottom:1.2px solid #FF00FF;";
  641.     x=document.getElementById('d,'++","+);
  642.     x.style.cssText="border-right:1.2px solid #FF00FF;border-bottom:1.2px solid #FF00FF;";
  643.     x=document.getElementById('d,'++","+);
  644.     x.style.cssText="border-right:1.2px solid #FF00FF;border-bottom:1.2px solid #FF00FF;";
  645.     x=document.getElementById('d,'++","+);
  646.     x.style.cssText="border-right:1.2px solid #FF00FF;border-bottom:1.2px solid #FF00FF;";
  647.     x=document.getElementById('d,'++","+);
  648.     x.style.cssText="border-right:1.2px solid #FF00FF;border-bottom:1.2px solid #FF00FF;";
  649.     x=document.getElementById('d,'++","+);
  650.     x.style.cssText="border-right:1.2px solid #FF00FF;border-bottom:1.2px solid #FF00FF;";
  651.     x=document.getElementById('d,'++","+);
  652.     x.style.cssText="border-right:1.2px solid #FF00FF;border-bottom:1.2px solid #FF00FF;";
  653.     x=document.getElementById('d,'++","+);
  654.     x.style.cssText="border-right:1.2px solid #FF00FF;border-bottom:1.2px solid #FF00FF;";
  655.     x=document.getElementById('d,'++","+);
  656.     x.style.cssText="border-right:1.2px solid #FF00FF;border-bottom:1.2px solid #FF00FF;";
  657.     document.write("</table>")
  658.     document.write("<input type='checkbox' id='follow' onclick='change(this)'/>follow")
  659.     document.write("<button class='control' id='EleIdl' onclick='output(this)'>o_left</button>")
  660.     document.write("<button class='control' id='EleIdr' onclick='output(this)'>o_right</button>")
  661.     document.write("<button class='control' onclick='emp()'>clear</button>")
  662. document.write("</div>")
  663. </script>
  664. </body>
  665. </html>

html 绘制矩形轨迹，选中区域的更多相关文章

  1. opencv2 使用鼠标绘制矩形并截取和保存矩形区域图像

    前言 好长时间没写博文了,今天偷偷懒写篇关于opencv2中鼠标响应操作的文章. 鼠标操作属于用户接口设计,以前一直使用Qt来做,但是如果只需要简单的鼠标,键盘操作,直接调用opencv库的函数也未尝 ...

  2. 在OpenCV中利用鼠标绘制矩形和截取图像的矩形区域

    这是两个相关的程序,前者是后者的基础.实际上前一个程序也是在前面博文的基础上做的修改,请参考<在OpenCV中利用鼠标绘制直线> .下面贴出代码. 程序之一,在OpenCV中利用鼠标绘制矩 ...

  3. Skyline实现橡皮筋效果绘制矩形框

    这种类似于框选的效果用的比较普遍,一般三维平台和GIS平台都提供了支持接口,可是Skyline就是这么傲娇! 思路是这样的:绘制出的矩形框应该是一直与屏幕边框平行的,也就是矩形框的实际旋转角度是等于摄 ...

  4. vue cavnas绘制矩形，并解决由clearRec带来的闪屏问题

    起因:在cavnas绘制矩形时 鼠标移动一直在监测中,所以鼠标移动的轨迹会留下一个个的矩形框, 要想清除矩形框官方给出了ctx.clearRect() 但是这样是把整个画布给清空了,因此需要不断 向画 ...

  5. 获取IMap上绘制的Element的区域范围

    运行环境:开发环境:Windows7旗舰版64bit.VisualStudio2008 With SP1.ArcEngine10.0.NetFrameWork4.0.IIS7和C#开发语言. 问题描述 ...

  6. Python学习（一） —— matplotlib绘制三维轨迹图

    在研究SLAM时常常需要对其输出的位姿进行复现以检测算法效果,在ubuntu系统中使用Python可以很好的完成相关的工作. 一. Ubuntu下Python的使用 在Ubuntu下使用Python有 ...

  7. canvas学习总结六：绘制矩形

    在第三章中(canvas学习总结三:绘制路径-线段)我们提高Canvas绘图环境中有些属于立即绘制图形方法,有些绘图方法是基于路径的. 立即绘制图形方法仅有两个strokeRect(),fillRec ...

  8. Javascript高级编程学习笔记（86）—— Canvas(3)绘制矩形

    绘制矩形 矩形是唯一一种可以直接在2D上下文中绘制的形状. 与矩形有关的方法包括: fillRect() strokeRect() clearRect() 上述方法都接收四个参数: 绘制矩形的 X 坐 ...

  9. canvas绘制矩形

    canvas绘制矩形 方法 fillRect(x, y, width, height) 画一个实心的矩形 clearRect(x, y, width, height) 清除一块儿矩形区域 stroke ...

随机推荐

  1. [LeetCode] 181. Employees Earning More Than Their Managers_Easy tag: SQL

    The Employee table holds all employees including their managers. Every employee has an Id, and there ...

  2. ShuffleElements（随机打乱数组中的元素）

    给定一个数组,随机打乱数组中的元素,题意很简单直接上代码: package Array; import java.util.Arrays; import java.util.Collections; ...

  3. #C++初学记录（算法2）

    A - Game 23 Polycarp plays "Game 23". Initially he has a number n and his goal is to trans ...

  4. html5<embed>的完整属性

    问题起因:网页中插入Flash,看了代码,然后呢,小小的学习下 <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000& ...

  5. Object-C-复制

    copy 减少对象上下文依赖 copy 创建一个新对象,copy得到的副本对象与原来内容相同,新的对象retain为1,与旧有对象的引用计数无关,旧有对象没有变化 使用 copy 创建出来的对象是不可 ...

  6. click 在网页测试手机模式下无效，不能执行。调成非手机模式即可

    click  在网页测试手机模式下无效,不能执行. 调成非手机模式即可

  7. ThinkPHP CURD mysql操作

    ThinkPHP CURD操作 ThinkPHP提供了灵活和方便的数据操作方法,对数据库操作的四个基本操作(CURD):创建.更新.读取和删除的实现是最基本的,也是必须掌握的,在这基础之上才能熟悉更多 ...

  8. Redis 如何保持和MySQL数据一致【一】

    1. MySQL持久化数据,Redis只读数据redis在启动之后,从数据库加载数据.读请求:不要求强一致性的读请求,走redis,要求强一致性的直接从mysql读取写请求:数据首先都写到数据库,之后 ...

  9. PHP实现多进程并行操作，可做守护进程(转,备用)

    <?php /** * 入口函数 * 将此文件保存为 ProcessOpera.php * 在terminal中运行 /usr/local/php/bin/php ProcessOpera.ph ...

  10. Django框架之跨站请求伪造

    跨站请求伪造(英语:Cross-site request forgery),也被称为one-click attack或者session riding,通常缩写为CSRF或者XSRF, 是一种挟制用户在 ...