hopezhangbo
hopezhangbo

使用HTML5的drag&drop做一个数独游戏

数独是很好玩的游戏，之前我用jQuery做了一个数独游戏，因为用javaScript来实现drag和drap非常麻烦，jQuery的UI提供了一套非常不错的drag和drap（以后就简称DnD算了），方便我们开发。现在HTML5支持原生的DnD了，那我们来学习下，并且将原先的数独游戏迁移到HTML5的DnD应用来。


先简单的了解下HTML5的DnD事件模型，事件发生在源元素（被拖动的元素）和目标元素（被进入的元素）上，为了简单的描述，我们将源元素称为src，目标元素叫des。

drag：src[拖动中] dragstart：src[开始拖动]
dragenter：des[进入目标]
dragover：des[在目标移动]
dragleave：des[离开目标]
drop：des[释放拖动]
dragend：src[拖动完成]
所有的事件我们知道肯定都应该给我们一个event对象，帮助我们获得一些信息或我们来设置一些信息，以上事件都可以得到一个event，如果我们的事件函数是function(e)那

e.dataTransfer.effectAllowed，只能在dragstart事件设置，值为以下之一："none", "copy", "copyLink", "copyMove", "link", "linkMove", "move", "all", and "uninitialized"

e.dataTransfer.dropEffect，返回拖来的行为，对应上面的effectAllowed，值是："none", "copy", "link", and "move"

e.target，可以得到当前事件的dom对象，比如你可以得到e.target.innerHTML，或者设置e.target.classList.add，或者e.target.classList.remove

e.dataTransfer.setData(foramt,value)，为拖动赋值，foramt的值是为了描述值的类型，一般有text/plain 和 text/uri-list

e.dataTransfer.getData(foramt)，获取被拖来的元素通过setData存储的值

e.stopPropagation，阻止事件冒泡，这样可以防止子元素的拖动处理被带到父元素事件中（触发父元素事件），在IE中可以用e.cancelBubble = true

e.preventDefault，阻止默认事件发生，也可以简单的写return false，在IE中可以用e.returnValue = false

有了上面的基本概念，我们先做一个小小的模型，来测试几个技术要点：监视拖放事件，改变元素在拖放中的样式，传递值和检查值什么的

在body里面，我们声明了10个div元素，并且都标记允许拖放

  1. <body>  
  2.     <div style="width: 50px; height: 50px; background-color: Red;" draggable="true">  
  3.         1  
  4.     </div>  
  5.     <div style="width: 50px; height: 50px; background-color: Yellow;" draggable="true">  
  6.         2  
  7.     </div>  
  8.     <div style="width: 50px; height: 50px; background-color: Blue;" draggable="true">  
  9.         3  
  10.     </div>  
  11.     <div style="width: 50px; height: 50px; background-color: Lime;" draggable="true">  
  12.         4  
  13.     </div>  
  14.     <div style="width: 50px; height: 50px; background-color: Maroon;" draggable="true">  
  15.         5  
  16.     </div>  
  17.     <div style="width: 50px; height: 50px; background-color: Black;" draggable="true">  
  18.         6  
  19.     </div>  
  20.     <div style="width: 50px; height: 50px; background-color: Orange;" draggable="true">  
  21.         7  
  22.     </div>  
  23.     <div style="width: 50px; height: 50px; background-color: Olive;" draggable="true">  
  24.         8  
  25.     </div>  
  26.     <div style="width: 50px; height: 50px; background-color: Teal;" draggable="true">  
  27.         9  
  28.     </div>  
  29.     <div style="width: 50px; height: 50px; background-color: Green;" draggable="true">  
  30.         10  
  31.     </div>  
  32. </body>  
现在我们想做一个应用，只有相互有倍数关系的div之间才可用拖放。

首选我们做一个用于输出调式的小工具代码

  1. $.log = function(msg) {  
  2.     console.log(msg);  
  3. }  
这个我们可以方便的$.log()输出，而不要写冗长的console.log了

第一步，编写dragStart事件函数

  1. function handleDragStart(e) {  
  2.     this.style.opacity = "0.5";  
  3.     e.dataTransfer.effectAllowed = "move";  
  4.     e.dataTransfer.setData("text/plain", this.innerHTML);  
  5.     //$.log(this.innerHTML);   
  6.     //$.log(e.target.innerHTML);   
  7.     //$.log(e.srcElement.innerHTML);   
  8.     [ ].forEach.call(document.querySelectorAll("div"),  
  9.     function(item) {  
  10.         var a = parseInt(e.target.innerHTML);  
  11.         var b = parseInt(item.innerHTML);  
  12.         if (a % b != 0 && b % a != 0) {  
  13.             item.style.opacity = "0.1";  
  14.   
  15.         }  
  16.     });  
  17. }  
以上的代码有几个要点

1 对事件来讲this、e.target和e.srcElement都是同一对象

2 在forEach中，this是指item，所以forEach中，我们要用e.target来引用



但是一测试我们就发现虽然元素可以拖拉，但并没有事件激活，那是应为我们没有为元素绑定事件，所以现在我们用addEventListener来将元素和事件绑定

  1. $(  
  2. function() {  
  3.     [ ].forEach.call(document.querySelectorAll("div"),  
  4. function(item) {  
  5.      item.addEventListener("dragstart", handleDragStart, false);   
  6. }  
  7. );  
  8. }  
  9. );  
现在我们可以看到，当任意元素拖动的时候，不和其元素有相互倍数的元素变了很淡了。

第二步，当我们拖放完成后，所有div恢复原先颜色，那自然是编写handleDragEnd

  1. function handleDragEnd(e) {  
  2.     if (e.preventDefault) {  
  3.         e.preventDefault(); //不要执行与事件关联的默认动作   
  4.     }  
  5.     [ ].forEach.call(document.querySelectorAll("div"),  
  6.     function(item) {  
  7.         item.style.opacity = "1";  
  8.     }  
  9.     );  
  10. }  
记得将上面的事件做绑定哦，应该类似以下代码
  1. $(  
  2. function() {  
  3.     [ ].forEach.call(document.querySelectorAll("div"),  
  4. function(item) {  
  5.      item.addEventListener("dragstart", handleDragStart, false);  
  6.      item.addEventListener("dragend", handleDragEnd, false);   
  7. }  
  8. );  
  9. }  
  10. );  
第三步，我们要通知那些互为倍数的元素允许我们做拖入操作

我们先需要为目标元素定义些事件函数

  1. function handleDragEnter(e) {  
  2.     $.log(e);  
  3. }  
  4.   
  5. function handleDragOver(e) {  
  6.     if (e.preventDefault) {  
  7.         e.preventDefault(); //不要执行与事件关联的默认动作   
  8.     }  
  9.     if (e.stopPropagation) {  
  10.         e.stopPropagation(); //停止事件的传播   
  11.     }  
  12.     $.log(e);  
  13.     return false;  
  14. }  
  15.   
  16.   
  17. function handleDragLeave(e) {  
  18.     $.log(e);  
  19. }  
  20.   
  21. function handleDrop(e) {  
  22.     if (e.preventDefault) {  
  23.         e.preventDefault(); //不要执行与事件关联的默认动作   
  24.     }  
  25.     if (e.stopPropagation) {  
  26.         e.stopPropagation(); //停止事件的传播   
  27.     }  
  28.     console.log(e);  
  29.     return false;  
  30. }  

注意我们使用了preventDefault和stopPropagation消除了浏览器默认的一些动作。

显然这些事件不是所有的元素都有的，只有互为倍数才有，所以我们要去修改handleDragStart函数了

修改后的代码大致如下

  1. function handleDragStart(e) {  
  2.     this.style.opacity = "0.5";  
  3.     e.dataTransfer.effectAllowed = "move";  
  4.     e.dataTransfer.setData("text/plain", this.innerHTML);  
  5.     //$.log(this.innerHTML);   
  6.     //$.log(e.target.innerHTML);   
  7.     //$.log(e.srcElement.innerHTML);   
  8.     //$.log(this.innerHTML);   
  9.     [ ].forEach.call(document.querySelectorAll("div"),  
  10.     function(item) {  
  11.         var a = parseInt(e.target.innerHTML);  
  12.         var b = parseInt(item.innerHTML);  
  13.         if (a % b != 0 && b % a != 0) {  
  14.             item.style.opacity = "0.1";  
  15.         }  
  16.         else {  
  17.             item.addEventListener("dragover", handleDragOver, false);  
  18.             item.addEventListener("dragenter", handleDragEnter, false);  
  19.             item.addEventListener("dragleave", handleDragLeave, false);  
  20.             item.addEventListener("drop", handleDrop, false);  
  21.         }  
  22.     });  
  23. }  
现在你可以发现，当我们拖动互为倍数的元素是，视觉效果明显是允许拖入，否则就不允许了。当然记得在handleDragEnd函数中要恢复哦
  1. function handleDragEnd(e) {  
  2.     if (e.preventDefault) {  
  3.         e.preventDefault(); //不要执行与事件关联的默认动作   
  4.     }  
  5.     [ ].forEach.call(document.querySelectorAll("div"),  
  6.     function(item) {  
  7.         item.style.opacity = "1";  
  8.         item.removeEventListener("dragover", handleDragOver, false);  
  9.         item.removeEventListener("dragenter", handleDragEnter, false);  
  10.         item.removeEventListener("dragleave", handleDragLeave, false);  
  11.         item.removeEventListener("drop", handleDrop, false);  
  12.     }  
  13.     );  
  14. }  
第四步，当我们在可以放置的元素上结束拖放后，我们希望两个元素的值累计，并出现在被放置的元素里面，我们需要修改handleDrop函数
  1. function handleDrop(e) {  
  2.     if (e.preventDefault) {  
  3.         e.preventDefault(); //不要执行与事件关联的默认动作   
  4.     }  
  5.     if (e.stopPropagation) {  
  6.         e.stopPropagation(); //停止事件的传播   
  7.     }  
  8.     this.innerHTML = parseInt(this.innerHTML)+parseInt(e.dataTransfer.getData("text/plain"))  
  9.     console.log(e);  
  10.     return false;  
  11. }  
好了，到现在为止，准备知识都差不多了，而且作品我们也可以得意的玩玩，你可以发现div被累计都，再次拖拉的时候，是重新计算相互的倍数的，对不？

最后，我感觉黑色的字不好看，我们修改下初始化的函数

  1. $(  
  2. function() {  
  3.     [ ].forEach.call(document.querySelectorAll("div"),  
  4. function(item) {  
  5.     item.addEventListener("dragstart", handleDragStart, false);  
  6.     item.addEventListener("dragend", handleDragEnd, false);  
  7.     item.style.color = "White";  
  8. }  
  9. );  
  10. }  
  11. );  


好了，现在这个无聊的拖动作品，至少可以打发下你的时间，对不，欣赏下自己的作品吧，接下来，我们开始做正式做数独游戏了。

第一步，我们先生成一个1-9的数字对象矩形，这个矩形可以拖动。

先设计htmltag

  1. <ol id="numberBox" style="list-style-type: none; width: 90px; height: 90px;">  
  2. </ol>  
然后准备些样式
  1. #numberBox > li  
  2. {  
  3.     width: 30px;  
  4.     height: 25px;  
  5.     text-align: center;  
  6.     font-size: 20px;  
  7.     padding-top: 5px;  
  8.     float: left;  
  9.     color: White;  
  10. }  
最后是脚本
  1.  $(  
  2. function() {  
  3.     [{ number: 1, bgcolor: "#C71585" }, { number: 2, bgcolor: "#800080" }, { number: 3, bgcolor: "#B8860B" },  
  4.     { number: 4, bgcolor: "rgb(0,0,128)" }, { number: 5, bgcolor: "rgb(30,144,255)" },   
  5.     { number: 6, bgcolor: "rgb(255,165,0)" },  
  6.      { number: 7, bgcolor: "hsl(0,75%,50%)" }, { number: 8, bgcolor: "hsl(30,50%,50%)" },   
  7.      { number: 9, bgcolor: "hsl(120,75%,38%)"}].forEach(  
  8.      function(key, index) {  
  9.      $.log(key);  
  10.          var li = $("<li>").html(key.number).css("backgroundColor", key.bgcolor).attr("draggable","true");  
  11.          $.log(li);  
  12.          li[0].addEventListener("dragstart", function() {  
  13.          }, false);  
  14.          $("#numberBox").append(li);  
  15.      }  
  16.      );  
  17. }  
  18. );  

好，然后你运行下页面，可以看到一个九宫格，并且每一个格子都可以拖动。


第二步，我们要类似的创建我们填数字得的区域了。

首先还是htmlTag

  1. <ol id="player" style="list-style-type: none; width: 450px; height: 450px;">  
  2. </ol>  
然后是样式设定
  1. #player .default  
  2. {  
  3.     float: left;  
  4.     width: 48px;  
  5.     height: 33px;  
  6.     border: solid 1px rgb(0,0,0);  
  7.     font-size: 20px;  
  8.     padding-top: 15px;  
  9.     text-align: center;  
  10.     background-color: #B8860B;  
  11. }  
  12. #player .fix  
  13. {  
  14.     float: left;  
  15.     width: 48px;  
  16.     height: 33px;  
  17.     border: solid 1px rgb(0,0,0);  
  18.     font-size: 20px;  
  19.     padding-top: 15px;  
  20.     text-align: center;  
  21.     background-color: #FFFABC;  
  22. }  
  23. #player .ation  
  24. {  
  25.     float: left;  
  26.     width: 48px;  
  27.     height: 33px;  
  28.     border: solid 1px rgb(0,0,0);  
  29.     font-size: 20px;  
  30.     padding-top: 15px;  
  31.     text-align: center;  
  32.     background-color: #FFA07A;  
  33. }  
然后初始化这个区域。数独填字区域有的格子有值有的没有值，我用0表示没有值将来你可以填制，非0表示是固定区不可以改
  1.  $(  
  2. function() {  
  3.     "500000300090500400004000700051037289302080604008052137035000900609000823080023006".split("").forEach(  
  4.     function(item, index) {  
  5.         $.log(item);  
  6.         var li = $("<li>")  
  7.         if (item != "0") {  
  8.             li.addClass("fix");  
  9.             li[0].innerHTML = item;  
  10.         }  
  11.         else {  
  12.             li[0].classList.add("default");  
  13.             li[0].addEventListener("dragenter",  
  14.             function(e) {  
  15.                 $.log(e);  
  16.             }, false);  
  17.   
  18.             li[0].addEventListener("dragover",  
  19.             function(e) {  
  20.                 if (e.preventDefault) {  
  21.                     e.preventDefault(); //不要执行与事件关联的默认动作   
  22.                 }  
  23.                 if (e.stopPropagation) {  
  24.                     e.stopPropagation(); //停止事件的传播   
  25.                 }  
  26.                 $.log(e);  
  27.                 return false;  
  28.             }, false);  
  29.   
  30.             li[0].addEventListener("dragleave",  
  31.             function(e) {  
  32.             }, false);  
  33.   
  34.             li[0].addEventListener("drop",  
  35.             function(e) {  
  36.                 if (e.preventDefault) {  
  37.                     e.preventDefault(); //不要执行与事件关联的默认动作   
  38.                 }  
  39.                 if (e.stopPropagation) {  
  40.                     e.stopPropagation(); //停止事件的传播   
  41.                 }  
  42.   
  43.             }, false);  
  44.         }  
  45.         $("#player").append(li);  
  46.     }  
  47.     );  
  48. }  
  49. );  
现在你已经可以在页面上看到一个非常威武的“独”字了！


第三步：我们拖动数字之后，希望可以填数字的区域有明显的颜色变化并给出提示，同时固定区域不可以拖进去，其他区域可以拖进去，并且拖动的时候要send值。

有了前面的知识，我们马上知道去哪里改事件控制了：dragstart事件

  1.  $(  
  2. function() {  
  3.     [{ number: 1, bgcolor: "#C71585" }, { number: 2, bgcolor: "#800080" }, { number: 3, bgcolor: "#B8860B" },  
  4.     { number: 4, bgcolor: "rgb(0,0,128)" }, { number: 5, bgcolor: "rgb(30,144,255)" },  
  5.     { number: 6, bgcolor: "rgb(255,165,0)" },  
  6.      { number: 7, bgcolor: "hsl(0,75%,50%)" }, { number: 8, bgcolor: "hsl(30,50%,50%)" },  
  7.      { number: 9, bgcolor: "hsl(120,75%,38%)"}].forEach(  
  8.      function(key, index) {  
  9.          //$.log(key);   
  10.          var li = $("<li>").html(key.number).css("backgroundColor", key.bgcolor).attr("draggable", "true");  
  11.          //$.log(li);   
  12.          li[0].addEventListener("dragstart", function(e) {  
  13.              e.dataTransfer.effectAllowed = "copyMove";  
  14.              e.dataTransfer.setData("text/plain", this.innerHTML);  
  15.              $.log(this.innerHTML);  
  16.              [ ].forEach.call(document.querySelectorAll("#player .default"),  
  17.          function(item) {  
  18.              //$.log(item);   
  19.              item.classList.remove("default");  
  20.              item.classList.add("ation");  
  21.          });  
  22.          }, false);  
  23.   
  24.          li[0].addEventListener("dragend", function() {  
  25.              [ ].forEach.call(document.querySelectorAll("#player .ation"),  
  26.          function(item) {  
  27.              item.classList.remove("ation");  
  28.              item.classList.add("default");  
  29.          });  
  30.          }, false);  
  31.   
  32.          $("#numberBox").append(li);  
  33.      }  
  34.      );  
  35. }  
  36. );  
现在你可以测试下了，当你拖动数字的时候，有明显的颜色改变，并且不同的区域你的鼠标样式也不同哦。

第四步，我们接受值，并且判断这个值是否存在行列冲突，如果冲突就提示，否则改写

  1.  $(  
  2. function() {  
  3.     "500000300090500400004000700051037289302080604008052137035000900609000823080023006".split("").forEach(  
  4.     function(item, index) {  
  5.         $.log(item);  
  6.         var li = $("<li>")  
  7.         if (item != "0") {  
  8.             li.addClass("fix");  
  9.             li[0].innerHTML = item;  
  10.         }  
  11.         else {  
  12.             li[0].classList.add("default");  
  13.             li[0].addEventListener("dragenter",  
  14.             function(e) {  
  15.                 $.log(e);  
  16.             }, false);  
  17.   
  18.             li[0].addEventListener("dragover",  
  19.             function(e) {  
  20.                 if (e.preventDefault) {  
  21.                     e.preventDefault(); //不要执行与事件关联的默认动作   
  22.                 }  
  23.                 if (e.stopPropagation) {  
  24.                     e.stopPropagation(); //停止事件的传播   
  25.                 }  
  26.                 $.log(e);  
  27.                 return false;  
  28.             }, false);  
  29.   
  30.             li[0].addEventListener("dragleave",  
  31.             function(e) {  
  32.             }, false);  
  33.   
  34.             li[0].addEventListener("drop",  
  35.             function(e) {  
  36.                 if (e.preventDefault) {  
  37.                     e.preventDefault(); //不要执行与事件关联的默认动作   
  38.                 }  
  39.                 if (e.stopPropagation) {  
  40.                     e.stopPropagation(); //停止事件的传播   
  41.                 }  
  42.   
  43.                 var sendData = e.dataTransfer.getData("text/plain");  
  44.                 //获得#player>li矩阵数组   
  45.                 var matrix = Array.prototype.slice.call(document.querySelectorAll("#player>li"));   
  46.                 var currIndex = matrix.indexOf(this); //获得当前元素的位置   
  47.                 var rowIndex = currIndex - currIndex % 9; //行开始的位置   
  48.                 var colIndex = currIndex % 9//列开始的位置   
  49.                 for (var i = rowIndex; i < rowIndex + 9; i++) {  
  50.                     if (i != currIndex && matrix[i].innerHTML == sendData) {  
  51.                         alert("对不起行上有数据重复，请小心哦！亲");  
  52.                         return;  
  53.                     }  
  54.                 }  
  55.                 for (var i = colIndex; i < 81; i = i + 9) {  
  56.                     if (i != currIndex && matrix[i].innerHTML == sendData) {  
  57.                         alert("对不起列上有数据重复，请小心哦！亲");  
  58.                         return;  
  59.                     }  
  60.                 }  
  61.                 this.innerHTML = sendData;  
  62.   
  63.             }, false);  
  64.         }  
  65.         $("#player").append(li);  
  66.     }  
  67.     );  
  68. }  
  69. ); 


现在你可以开始玩啦，虽然颜色不怎么好看，但至少可以玩，对不，我们第一个html5的实用游戏。我后期的blog打算再做些类似新浪微博的“你画我猜”还有“接龙游戏”。

下面是完整的代码，你要懒的话，就直接copy吧

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4.     <title></title>  
  5.   
  6.     <script src=../../"js/jquery-1.7.1.min.js" type="text/javascript"></script>  
  7.   
  8.     <script type="text/javascript">  
  9.         $.log = function(msg) {  
  10.             console.log(msg);  
  11.         }  
  12.   
  13.         $(  
  14.        function() {  
  15.            [{ number: 1, bgcolor: "#C71585" }, { number: 2, bgcolor: "#800080" }, { number: 3, bgcolor: "#B8860B" },  
  16.            { number: 4, bgcolor: "rgb(0,0,128)" }, { number: 5, bgcolor: "rgb(30,144,255)" },  
  17.            { number: 6, bgcolor: "rgb(255,165,0)" },  
  18.             { number: 7, bgcolor: "hsl(0,75%,50%)" }, { number: 8, bgcolor: "hsl(30,50%,50%)" },  
  19.             { number: 9, bgcolor: "hsl(120,75%,38%)"}].forEach(  
  20.             function(key, index) {  
  21.                 //$.log(key);   
  22.                 var li = $("<li>").html(key.number).css("backgroundColor", key.bgcolor).attr("draggable", "true");  
  23.                 //$.log(li);   
  24.                 li[0].addEventListener("dragstart", function(e) {  
  25.                     e.dataTransfer.effectAllowed = "copyMove";  
  26.                     e.dataTransfer.setData("text/plain", this.innerHTML);  
  27.                     $.log(this.innerHTML);  
  28.                     [ ].forEach.call(document.querySelectorAll("#player .default"),  
  29.                 function(item) {  
  30.                     //$.log(item);   
  31.                     item.classList.remove("default");  
  32.                     item.classList.add("ation");  
  33.                 });  
  34.                 }, false);  
  35.   
  36.                 li[0].addEventListener("dragend", function() {  
  37.                     [ ].forEach.call(document.querySelectorAll("#player .ation"),  
  38.                 function(item) {  
  39.                     item.classList.remove("ation");  
  40.                     item.classList.add("default");  
  41.                 });  
  42.                 }, false);  
  43.   
  44.                 $("#numberBox").append(li);  
  45.             }  
  46.             );  
  47.        }  
  48.        );  
  49.   
  50.         $(  
  51.        function() {  
  52.            "500000300090500400004000700051037289302080604008052137035000900609000823080023006".split("").forEach(  
  53.            function(item, index) {  
  54.                $.log(item);  
  55.                var li = $("<li>")  
  56.                if (item != "0") {  
  57.                    li.addClass("fix");  
  58.                    li[0].innerHTML = item;  
  59.                }  
  60.                else {  
  61.                    li[0].classList.add("default");  
  62.                    li[0].addEventListener("dragenter",  
  63.                    function(e) {  
  64.                        $.log(e);  
  65.                    }, false);  
  66.   
  67.                    li[0].addEventListener("dragover",  
  68.                    function(e) {  
  69.                        if (e.preventDefault) {  
  70.                            e.preventDefault(); //不要执行与事件关联的默认动作   
  71.                        }  
  72.                        if (e.stopPropagation) {  
  73.                            e.stopPropagation(); //停止事件的传播   
  74.                        }  
  75.                        $.log(e);  
  76.                        return false;  
  77.                    }, false);  
  78.   
  79.                    li[0].addEventListener("dragleave",  
  80.                    function(e) {  
  81.                    }, false);  
  82.   
  83.                    li[0].addEventListener("drop",  
  84.                    function(e) {  
  85.                        if (e.preventDefault) {  
  86.                            e.preventDefault(); //不要执行与事件关联的默认动作   
  87.                        }  
  88.                        if (e.stopPropagation) {  
  89.                            e.stopPropagation(); //停止事件的传播   
  90.                        }  
  91.   
  92.                        var sendData = e.dataTransfer.getData("text/plain");  
  93.                        //获得#player>li矩阵数组   
  94.                        var matrix = Array.prototype.slice.call(document.querySelectorAll("#player>li"));   
  95.                        var currIndex = matrix.indexOf(this); //获得当前元素的位置   
  96.                        var rowIndex = currIndex - currIndex % 9; //行开始的位置   
  97.                        var colIndex = currIndex % 9//列开始的位置   
  98.                        for (var i = rowIndex; i < rowIndex + 9; i++) {  
  99.                            if (i != currIndex && matrix[i].innerHTML == sendData) {  
  100.                                alert("对不起行上有数据重复，请小心哦！亲");  
  101.                                return;  
  102.                            }  
  103.                        }  
  104.                        for (var i = colIndex; i < 81; i = i + 9) {  
  105.                            if (i != currIndex && matrix[i].innerHTML == sendData) {  
  106.                                alert("对不起列上有数据重复，请小心哦！亲");  
  107.                                return;  
  108.                            }  
  109.                        }  
  110.                        this.innerHTML = sendData;  
  111.   
  112.                    }, false);  
  113.                }  
  114.                $("#player").append(li);  
  115.            }  
  116.            );  
  117.        }  
  118.        );  
  119.          
  120.      
  121.      
  122.     </script>  
  123.   
  124.     <style type="text/css">  
  125.         #numberBox > li   
  126.         {  
  127.             width: 30px;  
  128.             height: 25px;  
  129.             text-align: center;  
  130.             font-size: 20px;  
  131.             padding-top: 5px;  
  132.             float: left;  
  133.             color: White;  
  134.         }  
  135.         #player .default   
  136.         {  
  137.             float: left;  
  138.             width: 48px;  
  139.             height: 33px;  
  140.             border: solid 1px rgb(0,0,0);  
  141.             font-size: 20px;  
  142.             padding-top: 15px;  
  143.             text-align: center;  
  144.             background-color: #B8860B;  
  145.         }  
  146.         #player .fix   
  147.         {  
  148.             float: left;  
  149.             width: 48px;  
  150.             height: 33px;  
  151.             border: solid 1px rgb(0,0,0);  
  152.             font-size: 20px;  
  153.             padding-top: 15px;  
  154.             text-align: center;  
  155.             background-color: #FFFABC;  
  156.         }  
  157.         #player .ation   
  158.         {  
  159.             float: left;  
  160.             width: 48px;  
  161.             height: 33px;  
  162.             border: solid 1px rgb(0,0,0);  
  163.             font-size: 20px;  
  164.             padding-top: 15px;  
  165.             text-align: center;  
  166.             background-color: #FFA07A;  
  167.         }  
  168.     </style>  
  169. </head>  
  170. <body>  
  171.     <ol id="numberBox" style="list-style-type: none; width: 90px; height: 90px;">  
  172.     </ol>  
  173.     <ol id="player" style="list-style-type: none; width: 450px; height: 450px;">  
  174.     </ol>  
  175. </body>  

你可能感兴趣的:(jquery,游戏,html5,function,div,float)

  • 美易官方：盘前道指期货涨0.5%，游戏驿站跌逾15% 美股投资 财经人工智能大数据新浪微博微信微信公众平台百度金融
    在股市开盘前的交易时段，道指期货上涨了0.5%，而游戏驿站（GameStop）的股价却出现了大幅下跌，跌幅超过15%。这一市场动态引发了投资者的广泛关注，也反映了当前股市的复杂性和不确定性。美股股指期货周三盘前走强，交易员为季度末的再平衡做准备。本周因假期而缩短，美国将公布关键通胀数据。道指期货涨0.5%，标普500指数期货涨0.6%，纳指期货涨0.5%。德国DAX指数涨0.4%，英国富时100指
  • 微信小程序监听用户经纬度变化 某公司摸鱼前端 微信小程序小程序
    一些打卡App需要根据用户的位置来完成打卡那么就需要监听用户位置变化情况：示例：//在某个生命周期函数中，如onLoad中onLoad:function(options){//开始监听位置变化wx.startLocationUpdate({success:function(){console.log('开始更新位置');},fail:function(){console.log('开始更新位置失败
  • c++中如何判断变量的数据类型，并输出 xnrbjy c++开发语言
    C++中如果想要判断变量的数据类型，可以使用typeid运算符。该运算符返回一个std::type_info类型的对象，可以使用name()方法获取其名称从而确定变量的类型，例如：#include#includeusingnamespacestd;intmain(){inta=123;floatb=3.14;boolc=true;chard='A';stringe="HelloWorld";cou
  • C++学习笔记（lambda函数） __TAT__ C&C++c++学习笔记
    C++learningnote1、lambda函数的语法2、lambda函数的几种用法1、lambda函数的语法lambda函数的一般语法如下：[capture_clause](parameters)->return_type{function_body}capture_clause：需要捕获的变量，但要求该变量必须在这个作用域中。通常的捕获方式有以下几种：[]：不捕获任何变量[&]：按引用捕获变
  • 中原焦点团队38期王芳芳坚持分享第236天，20230630总约练134次，来访113次，咨8次，观察员13次 芳芳王
    学习焦点的初心是想拯救孩子，孩子由于沉迷游戏，成绩下滑，在学习的过程中发现是自己的教育方式出了状况。经过半年的学习，一些焦点的基本技巧，如接纳、欣赏、倾听、同理心、尊重等都有了一定的了解。但在实际应用时仍然存在很多问题，感觉自己仍然没有放下对孩子成绩的期望，仍然把握不住对孩子管理的度。我该如何去陪伴好孩子？多用心去听课，并加强反思，多约练。去思考如何让自己快乐起来？
  • 倒贴服传奇在什么平台下载 2024最火的倒贴服传奇平台排行榜 诸葛村夫一游戏频道
    2024游戏盒子网站排行榜大全随着数位科技的发展，2024年手游市场持续火爆，各种新开手游持续涌现。本文为广大手游爱好者带来巅峰推荐，总结五个最具实力的手游新服发布网站，为您提供最全面的游戏资讯以及专业的游戏攻略。▶2024最火的倒贴服传奇平台排行榜TOP1：游戏豹官网特点：内部特权游戏类型：多类型推荐日活跃人数：15万网址链接：www.ystt88.cn游戏介绍：游戏豹官网以快速获取新开手游的特
  • 剧本杀【幕后玩家】复盘解析+凶手是谁+剧透结局+测评+怎么玩？ VX搜_彤彤速递
    每天持续更新复盘有15000＋：线下剧本杀·百变大侦探·我是谜·谁是凶手·玩吧·剧本杀线上·戏精大侦探·魔王杀·儿童剧本杀...所有谜题在等着你去揭开。为了你获得更好的游戏体验，本文仅显示《幕后玩家》剧本杀部分真相复盘，获取完整真相复盘只需两步①【微信关注公众号：云云复盘】②回复【幕后玩家】即可查看获取哦贾友仁利用自己保险公司的职务，在杨光审车时，隐瞒了车子存在刹车不灵的问题。想让杜若出车祸死亡，
  • Python dict字符串转json对象，小数精度丢失问题 朝如青丝 暮成雪 jsonpython
    一前言JSON(JavaScriptObjectNotation)是一种轻量级的数据交换格式，dict是Python的一种数据格式。本篇介绍一个float数据转换时精度丢失的案例。二问题描述importjsontest_str1='{"π":3.1415926535897932384626433832795028841971}'test_str2='{"value":10.00000}'print
  • VUE 页面禁止缩放（华为平板浏览器可能失效） 唐屁屁儿 JSvuewebviewjavascript
    h5页面移动端禁止缩放、web页面禁止浏览器缩放移动端优先，可禁止用户缩放和双击放大；在App.vue中的script内的方法里加入以下代码：window.onload=function(){document.addEventListener('touchstart',function(event){if(event.touches.length>1){event.preventDefault()
  • C语言演示多线程编程条件下自旋锁和屏障的使用 嫦娥妹妹等等我 开发语言c语言开源
    主线故事:有4个人玩游戏输了,惩罚:1分别使用4台不同的ATM机给我存钱2必须一块一块的存3存完还得在ATM上看一下我的余额设计模式:1每个人使用一条单独的线程,再准备一个计时线程用来输出时间2存钱涉及到对共享资源的读写,是原子操作需要用锁保护这里使用自旋锁3都存完钱后需要等待在各自的ATM上回显余额这里使用屏障技术4如果在主线程中回显对应他们给我打电话告诉我存完了我自己看一下则不需要使用屏障因为
  • Vue 常见面试题(一) 安生生申 面试题vue.js前端javascript
    目录1、Vue的最大的优势是什么？（必会）2、Vue和jQuery两者之间的区别是什么？（必会）3、MVVM和MVC区别是什么？哪些场景适合？（必会）1、基本定义2、使用场景3、两者之间的区别4、Vue数据双向绑定的原理是什么?（必会）5、Object.defineProperty和Proxy的区别（必会）6、Vue生命周期总共分为几个阶段？（必会）7、第一次加载页面会触发哪几个钩子函数？（必会）
  • 西安 专业nft开发NFT寄售-NFT抢购-NFT盲盒-NFT空投 电报dapp119 区块链软件开发区块链
    在数字化时代的今天，非同质化代币（NFT）正成为数字资产领域的新宠。作为区块链技术的一种应用，NFT赋予数字资产独一无二的身份和价值，从而在艺术、游戏、音乐、收藏品等领域掀起了一股热潮。西安，这座千年古城，也融入了这股数字化潮流，拥有专业的NFT开发公司，为个人和企业提供多种NFT相关服务，其中包括NFT寄售、NFT抢购、NFT盲盒和NFT空投。NFT寄售NFT寄售是一种常见的NFT交易方式，通过
  • 《红太阳幼儿园》剧本杀复盘/凶手/剧透/真相/答案/攻略 VX搜_小燕子复盘
    为了你获得更好的游戏体验，本文仅显示《红太阳幼儿园》剧本杀部分真相复盘，获取完整真相复盘只需两步①【微信关注公众号：集美复盘】②回复【红太阳幼儿园】即可查看获取哦﹎﹎﹎﹎﹎﹎﹎﹎﹎﹎﹎﹎﹎﹎﹎﹎﹎﹎﹎﹎﹎﹎﹎﹎﹎﹎﹎﹎﹎﹎﹎﹎﹎﹎﹎﹎﹎﹎﹎﹎1、剧本杀《红太阳幼儿园》角色介绍【宋晓晓】女，28岁，上市公司的董事长，独立果敢，执着认真，有着新时代女性独有的风采。【林缘】女，27岁，温柔秀气的女孩，十
  • 找好定位，坚持下去 LZ冷颜
    最近在看有关写作方面的书籍时看到，一个优秀的创造者，是写自己很熟悉的东西。我是一个00后，你要问我什么我最熟悉，我肯定说游戏，没错游戏基本伴随了我们00后一代。网上前段时间有人不是说禁止游戏吗？网上那些网友不是讨论十分激烈吗？在我看来游戏也是以后的大方向，你们有没有想过未来的游戏可以用于医疗，帮助那些不会走路的走路等等。一个东西不能急于给他评论，慢慢观察，就比如QQ和支付宝，当年有谁看好他们，现在
  • lua 判断字符串是否包含指定字符 笨死de猪 lua开发语言
    一、string.find在Lua中，如果你想判断一个字符串是否包含特定的子字符串（例如a），你可以使用string.find函数。string.find函数会搜索第一个参数（字符串）中第二个参数（子字符串）出现的位置。如果找到了子字符串，它会返回子字符串开始和结束的位置（两个索引）；如果没有找到，它会返回nil。以下是一个示例，展示如何判断一个字符串是否包含a：functioncontainsD
  • Unity3D 制作MMORPG 3D地图编辑器详解 Thomas_YXQ 3d编辑器Unity3D游戏开发unity开发语言
    前言在MMORPG游戏中，地图编辑器是一个非常重要的工具，可以帮助开发者快速创建复杂的游戏地图。本文将详细介绍如何使用Unity3D制作一个简单的MMORPG3D地图编辑器。对惹，这里有一个游戏开发交流小组，希望大家可以点击进来一起交流一下开发经验呀！创建地图编辑器界面首先，我们需要创建一个新的Unity项目，并在场景中创建一个空的GameObject作为地图编辑器的主要控制器。然后，我们可以使用
  • javascript 日期转换为时间戳，时间戳转换为日期的函数 cdcdhj javascript学习日记javascript开发语言ecmascript
    日期转化为时间戳，主要用valueOf()来进行转化为毫秒时间戳，getTime()IOS系统无法解析转换，所以都有valueOf()letgetTimestampOrDate=function(timestamp){lettimeStamp='';constregex=/^\d{4}(-|\/)\d{2}(-|\/)\d{2}$/;constregex2=/^\d{4}(-|\/)\d{2}(-
  • JS判断数据类型 风落不归处 Javascriptjavascript前端
    一、typeoftypeof可以检测基本数据类型，但是碰到引用数据类型返回的都是object。typeof通常用来判断基本数据类型，但是用typeof来判断null和引用类型的实例返回的结果都是"object"lets="Nicholas";letb=true;leti=22;letu;letn=null;leto=newObject();functionFn(){}console.log(typ
  • go chan简单使用 fightingwy gogolang开发语言后端
    chan在go中是一个通道有可读可写的chan,也存在只读只写的chan,通过共享内存而实现通信chan注意点：在关闭chan后再关闭chan会出现panic关闭chan后可以继续进行取值，取完后可以再取但都是对应类型的0值。可以通过v,ok:==0;i--{temp:=s/int64(math.Pow(10,float64(i)))fmt.Println(temp)s=s%int64(math.
  • javascript的数据类型及转换 田小田txt
    一、JavaScript数据类型：共有string，number，boolean，object，function五种数据类型；其中Object，Date，Array为对象型；2个不包含任何值的数据类型：null，undefined。二、Typeof查看数据类型：typeof"John"//返回stringtypeof3.14//返回numbertypeofNaN//返回numbertypeoffa
  • 基于PIL实现亮度、噪声、随机黑块数据增强 小陈phd pythonnumpy人工智能
    importosimportshutilfromPILimportImage,ImageEnhanceimportnumpyasnpimportrandomfromtqdmimporttqdm#ColorJitteringfunctiondefapply_color_jitter(image,brightness=0.5,contrast=0.5,saturation=0.5):"""Applyc
  • unity -- GC 想做后端的前端 Unityunity
    GC简介在游戏运行的时候，数据主要存储在内存中，当游戏的数据在不需要的时候，存储当前数据的内存就可以被回收以再次使用。内存垃圾是指当前废弃数据所占用的内存，垃圾回收（GC）是指将废弃的内存重新回收再次使用的过程。1.Unity内部有两个内存管理池：堆内存和栈内存堆内存(heap)主要用来存储较大的和存储时间较长的数据，主要是负责程序中的对象和数据。栈内存(stack)主要用来存储较小的和短暂的数据
  • 2018.1.2晴 风中的玫瑰花
    下班回家，见到儿子时，儿子正和小外甥有说有笑的玩着游戏，两个小家伙和睦相处时挺惹人爱得。吃完饭，接儿子回家的路上，儿子突然问我，一个人怎样就可以活的时间长一点。孩子的问题有时候就是这样不着边际，我告诉儿子，每天保持一颗快乐的心，比什么都重要。到达车库后，儿子背上自己书包，又从前座取下我的东西一起拿着，小家伙在前面一蹦一跳的精神十足，我跟在后面，看着眼前的儿子，有时让我很是感动。时间是块磨刀石，磨练
  • 小木块，大乐趣—中2班户外游戏观察记录 jkklmyt
    观察时间:2019.6.1210:20-10:45观察对象：张俊楠、戴烨坤观察地点：内操场观察目的：观察幼儿的搭建能力、合作能力以及交往能力。观察实录：户外活动时，张俊楠和戴烨坤运来了一些长方形的小木块，他们准备搭建一座宝塔，张俊楠对戴烨坤说：“来吧，木块够了，我们开始搭吧，”于是，两个人合作，戴烨坤拿给张俊楠搭，张俊楠把木块横着一层一层往上搭，到了塔顶上，先放了一个圆的，再放了一个三角形，最后在
  • javascript实现SM2加密解密 人生在勤，不索何获 javascript前端jquery
    前提JavaWeb环境前端代码window.sm2=function(t){functioni(e){if(r[e])returnr[e].exports;varn=r[e]={i:e,l:!1,exports:{}};returnt[e].call(n.exports,n,n.exports,i),n.l=!0,n.exports}varr={};returni.m=t,i.c=r,i.d=fu
  • 15届蓝桥杯备赛(3) sad_liu #sad_liu的刷题记录蓝桥杯职场和发展
    文章目录15届蓝桥杯备赛(3)回溯算法组合组合总和III电话号码的字母组合组合总和组合总和II分割回文串子集子集II非递减子序列全排列全排列II贪心算法分发饼干最大子数组和买股票的最佳时机II跳跃游戏15届蓝桥杯备赛(3)提高C++程序的输入输出效率，尤其是在需要大量输入输出操作时。ios_base::sync_with_stdio(false);cin.tie(nullptr);cout.tie
  • 从0开始学python第14.6节 pygame.sprite(上) 阿达老师
    游戏开发最核心的就是碰撞检测了，子弹击中敌人、足球射进门、吃加血包这些都是通过碰撞检测完成的。我们这节课学习的sprite模块对pygame的碰撞做了初步封装，简化我们开发这些模块时的代码。在pygame里，sprite通常是一个二维的图片。比如一辆汽车、一个狐狸、一条小狗等。下面我们就来详细学习一下sprite模块。prite基础和碰撞检测让我们来看一个使用sprite的例子，这个例子展示了一个
  • 《命不该绝》剧本杀复盘/凶手/剧透/真相/答案/攻略 VX搜_小燕子复盘
    为了你获得更好的游戏体验，本文仅显示《命不该绝》剧本杀部分真相复盘，获取完整真相复盘只需两步①【微信关注公众号：集美复盘】②回复【命不该绝】即可查看获取哦﹎﹎﹎﹎﹎﹎﹎﹎﹎﹎﹎﹎﹎﹎﹎﹎﹎﹎﹎﹎﹎﹎﹎﹎﹎﹎﹎﹎﹎﹎﹎﹎﹎﹎1、剧本杀《命不该绝》角色介绍大雄案：玩家认为只有茶水博士和大雄有过交集所以凶手是茶水博士，同样是合理的逻辑，视情况来进行追问。静香案：玩家须推理出书柜的转动，然后知道书柜转动的
  • go的Job Scheduling ~kiss~ gogolang开发语言后端
    背景司内线上服务有很多异步脚本，大量冗余代码，管理很不方便急需一个美丽的框架，让代码变得美好包gogetgithub.com/go-co-op/gocron/v2介绍gocronisajobschedulingpackagewhichletsyourunGofunctionsatpre-determinedintervals.概念JobJob封装（encapsulates）一个“任务task”，它
  • 11 React 组件通信 父传子 a457636876 Reactreact.jsjavascript前端
    在React中实现组件通信是非常常见的需求，其中包括父子组件通信。以下是几种常见的父子组件通信的例子，以及需要注意的知识：Props传递：这是最基本的父子组件通信方式。父组件通过props将数据传递给子组件。//ParentComponent.jsimportReactfrom'react';importChildComponentfrom'./ChildComponent';functionPa
  • jdk tomcat 环境变量配置 Array_06 javajdktomcat
    Win7 下如何配置java环境变量 1。准备jdk包，win7系统，tomcat安装包（均上网下载即可） 2。进行对jdk的安装，尽量为默认路径（但要记住啊！！以防以后配置用。。。） 3。分别配置高级环境变量。   电脑-->右击属性-->高级环境变量-->环境变量。 分别配置 : path    &nbs
  • Spring调SDK包报java.lang.NoSuchFieldError错误 bijian1013 javaspring
            在工作中调另一个系统的SDK包，出现如下java.lang.NoSuchFieldError错误。 org.springframework.web.util.NestedServletException: Handler processing failed; nested exception is java.l
  • LeetCode[位运算] - #136 数组中的单一数 Cwind java题解位运算LeetCodeAlgorithm
    原题链接：#136 Single Number 要求： 给定一个整型数组，其中除了一个元素之外，每个元素都出现两次。找出这个元素 注意：算法的时间复杂度应为O(n)，最好不使用额外的内存空间 难度：中等 分析： 题目限定了线性的时间复杂度，同时不使用额外的空间，即要求只遍历数组一遍得出结果。由于异或运算 n XOR n = 0, n XOR 0 = n，故将数组中的每个元素进
  • qq登陆界面开发 15700786134 qq
    今天我们来开发一个qq登陆界面，首先写一个界面程序，一个界面首先是一个Frame对象，即是一个窗体。然后在这个窗体上放置其他组件。代码如下： public class First {         public void initul(){        jf=ne
  • Linux的程序包管理器RPM 被触发 linux
    在早期我们使用源代码的方式来安装软件时，都需要先把源程序代码编译成可执行的二进制安装程序，然后进行安装。这就意味着每次安装软件都需要经过预处理-->编译-->汇编-->链接-->生成安装文件--> 安装，这个复杂而艰辛的过程。为简化安装步骤，便于广大用户的安装部署程序，程序提供商就在特定的系统上面编译好相关程序的安装文件并进行打包，提供给大家下载，我们只需要根据自己的
  • socket通信遇到EOFException 肆无忌惮_ EOFException
    java.io.EOFException at java.io.ObjectInputStream$PeekInputStream.readFully(ObjectInputStream.java:2281) at java.io.ObjectInputStream$BlockDataInputStream.readShort(ObjectInputStream.java:
  • 基于spring的web项目定时操作 知了ing javaWeb
    废话不多说，直接上代码，很简单 配置一下项目启动就行 1，web.xml <?xml version="1.0" encoding="UTF-8"?> <web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="h
  • 树形结构的数据库表Schema设计 矮蛋蛋 schema
    原文地址： http://blog.csdn.net/MONKEY_D_MENG/article/details/6647488     程序设计过程中，我们常常用树形结构来表征某些数据的关联关系，如企业上下级部门、栏目结构、商品分类等等，通常而言，这些树状结构需要借助于数据库完成持久化。然而目前的各种基于关系的数据库，都是以二维表的形式记录存储数据信息，
  • maven将jar包和源码一起打包到本地仓库 alleni123 maven
    http://stackoverflow.com/questions/4031987/how-to-upload-sources-to-local-maven-repository <project> ... <build> <plugins> <plugin> <groupI
  • java IO操作 与 File 获取文件或文件夹的大小，可读，等属性！！！ 百合不是茶
    类 File File是指文件和目录路径名的抽象表示形式。 1，何为文件： 标准文件（txt doc mp3...） 目录文件（文件夹） 虚拟内存文件   2，File类中有可以创建文件的 createNewFile（）方法,在创建新文件的时候需要try{} catch(）{}因为可能会抛出异常；也有可以判断文件是否是一个标准文件的方法isFile();这些防抖都
  • Spring注入有继承关系的类（2） bijian1013 javaspring
    被注入类的父类有相应的属性，Spring可以直接注入相应的属性，如下所例：1.AClass类 package com.bijian.spring.test4; public class AClass { private String a; private String b; public String getA() { retu
  • 30岁转型期你能否成为成功人士 bijian1013 成长励志
            很多人由于年轻时走了弯路，到了30岁一事无成，这样的例子大有人在。但同样也有一些人，整个职业生涯都发展得很优秀，到了30岁已经成为职场的精英阶层。由于做猎头的原因，我们接触很多30岁左右的经理人，发现他们在职业发展道路上往往有很多致命的问题。在30岁之前，他们的职业生涯表现很优秀，但从30岁到40岁这一段，很多人
  • 【Velocity四】Velocity与Java互操作 bit1129 velocity
    Velocity出现的目的用于简化基于MVC的web应用开发，用于替代JSP标签技术，那么Velocity如何访问Java代码.本篇继续以Velocity三http://bit1129.iteye.com/blog/2106142中的例子为基础，      POJO    package com.tom.servlets; public
  • 【Hive十一】Hive数据倾斜优化 bit1129 hive
    什么是Hive数据倾斜问题   操作：join,group by,count distinct 现象：任务进度长时间维持在99%（或100%），查看任务监控页面，发现只有少量（1个或几个）reduce子任务未完成；查看未完成的子任务，可以看到本地读写数据量积累非常大，通常超过10GB可以认定为发生数据倾斜。 原因：key分布不均匀 倾斜度衡量：平均记录数超过50w且
  • 在nginx中集成lua脚本：添加自定义Http头，封IP等 ronin47 nginx lua csrf
    Lua是一个可以嵌入到Nginx配置文件中的动态脚本语言，从而可以在Nginx请求处理的任何阶段执行各种Lua代码。刚开始我们只是用Lua 把请求路由到后端服务器，但是它对我们架构的作用超出了我们的预期。下面就讲讲我们所做的工作。 强制搜索引擎只索引mixlr.com Google把子域名当作完全独立的网站，我们不希望爬虫抓取子域名的页面，降低我们的Page rank。 location /{
  • java-3.求子数组的最大和 bylijinnan java
    package beautyOfCoding; public class MaxSubArraySum { /** * 3.求子数组的最大和 题目描述： 输入一个整形数组，数组里有正数也有负数。 数组中连续的一个或多个整数组成一个子数组，每个子数组都有一个和。 求所有子数组的和的最大值。要求时间复杂度为O(n)。 例如输入的数组为1, -2, 3, 10, -4,
  • Netty源码学习-FileRegion bylijinnan javanetty
    今天看org.jboss.netty.example.http.file.HttpStaticFileServerHandler.java 可以直接往channel里面写入一个FileRegion对象，而不需要相应的encoder： //pipeline（没有诸如“FileRegionEncoder”的handler）： public ChannelPipeline ge
  • 使用ZeroClipboard解决跨浏览器复制到剪贴板的问题 cngolon 跨浏览器复制到粘贴板Zero Clipboard
    Zero Clipboard的实现原理 Zero Clipboard 利用透明的Flash让其漂浮在复制按钮之上，这样其实点击的不是按钮而是 Flash ，这样将需要的内容传入Flash，再通过Flash的复制功能把传入的内容复制到剪贴板。 Zero Clipboard的安装方法 首先需要下载 Zero Clipboard的压缩包，解压后把文件夹中两个文件：ZeroClipboard.js
  • 单例模式 cuishikuan 单例模式
    第一种（懒汉，线程不安全）： public class Singleton {   2     private static Singleton instance;   3     pri
  • spring+websocket的使用 dalan_123
    一、spring配置文件 <?xml version="1.0" encoding="UTF-8"?><beans xmlns="http://www.springframework.org/schema/beans"    xmlns:xsi="http://www.w3.or
  • 细节问题：ZEROFILL的用法范围。 dcj3sjt126com mysql
    1、zerofill把月份中的一位数字比如1，2，3等加前导0 mysql> CREATE TABLE t1 (year YEAR(4), month INT(2) UNSIGNED ZEROFILL,    -> day
  • Android开发10——Activity的跳转与传值 dcj3sjt126com Android开发
    Activity跳转与传值，主要是通过Intent类，Intent的作用是激活组件和附带数据。   一、Activity跳转 方法一Intent intent = new Intent(A.this, B.class); startActivity(intent)   方法二Intent intent = new Intent();intent.setCla
  • jdbc 得到表结构、主键 eksliang jdbc 得到表结构、主键
    转自博客：http://blog.csdn.net/ocean1010/article/details/7266042 假设有个con DatabaseMetaData dbmd = con.getMetaData(); rs = dbmd.getColumns(con.getCatalog(), schema, tableName, null); rs.getSt
  • Android 应用程序开关GPS gqdy365 android
    要在应用程序中操作GPS开关需要权限： <uses-permission android:name="android.permission.WRITE_SECURE_SETTINGS" /> 但在配置文件中添加此权限之后会报错，无法再eclipse里面正常编译，怎么办？ 1、方法一：将项目放到Android源码中编译； 2、方法二：网上有人说cl
  • Windows上调试MapReduce zhiquanliu mapreduce
    1.下载hadoop2x-eclipse-plugin https://github.com/winghc/hadoop2x-eclipse-plugin.git 把 hadoop2.6.0-eclipse-plugin.jar 放到eclipse plugin 目录中。 2.下载 hadoop2.6_x64_.zip http://dl.iteye.com/topics/download/d2b
  • 如何看待一些知名博客推广软文的行为？ justjavac 博客
    本文来自我在知乎上的一个回答：http://www.zhihu.com/question/23431810/answer/24588621 互联网上的两种典型心态： 当初求种像条狗，如今撸完嫌人丑 当初搜贴像条犬，如今读完嫌人软 你为啥感觉不舒服呢？ 难道非得要作者把自己的劳动成果免费给你用，你才舒服？ 就如同 Google 关闭了 Gooled Reader，那是
  • sql优化总结 macroli sql
    为了是自己对sql优化有更好的原则性，在这里做一下总结，个人原则如有不对请多多指教。谢谢！   要知道一个简单的sql语句执行效率，就要有查看方式，一遍更好的进行优化。   一、简单的统计语句执行时间 declare @d datetime ---定义一个datetime的变量set @d=getdate() ---获取查询语句开始前的时间select user_id
  • Linux Oracle中常遇到的一些问题及命令总结 超声波 oraclelinux
    1.linux更改主机名   (1)#hostname oracledb　　　　临时修改主机名 (2) vi /etc/sysconfig/network 　　修改hostname (3) vi /etc/hosts　　　　　　　　修改IP对应的主机名   2.linux重启oracle实例及监听的各种方法 （注意操作的顺序应该是先监听，后数据库实例） &nbs
  • hive函数大全及使用示例 superlxw1234 hadoophive函数
      具体说明及示例参 见附件文档。     文档目录：   目录 一、关系运算： 4 1. 等值比较: = 4 2. 不等值比较: <> 4 3. 小于比较: < 4 4. 小于等于比较: <= 4 5. 大于比较: > 5 6. 大于等于比较: >= 5 7. 空值判断: IS NULL 5
  • Spring 4.2新特性-使用@Order调整配置类加载顺序 wiselyman spring 4
    4.1 @Order Spring 4.2 利用@Order控制配置类的加载顺序 4.2 演示 两个演示bean package com.wisely.spring4_2.order; public class Demo1Service { } package com.wisely.spring4_2.order; public class
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他