晨曦之光
晨曦之光

使用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>  


原文链接： http://blog.csdn.net/hopezhangbo/article/details/7384040

你可能感兴趣的:(使用HTML5的drag&drop做一个数独游戏)

  • 斤斤计较的婚姻到底有多难？ 白心之岂必有为
    很多人私聊我会问到在哪个人群当中斤斤计较的人最多？我都会回答他，一般婚姻出现问题的斤斤计较的人士会非常多，以我多年经验，在婚姻落的一塌糊涂的人当中，斤斤计较的人数占比在20～30%以上，也就是说10个婚姻出现问题的斤斤计较的人有2-3个有多不减。在婚姻出问题当中，有大量的心理不平衡的、尖酸刻薄的怨妇。在婚姻中仅斤斤计较有两种类型：第一种是物质上的，另一种是精神上的。在物质与精神上抠门已经严重的影响
  • 情绪觉察日记第37天 露露_e800
    今天是家庭关系规划师的第二阶最后一天，慧萍老师帮我做了个案，帮我处理了埋在心底好多年的一份恐惧，并给了我深深的力量！这几天出来学习，爸妈过来婆家帮我带小孩，妈妈出于爱帮我收拾东西，并跟我先生和婆婆产生矛盾，妈妈觉得他们没有照顾好我…。今晚回家见到妈妈，我很欣赏她并赞扬她，妈妈说今晚要跟我睡我说好，当我们俩躺在床上准备睡觉的时候，我握着妈妈的手对她说:妈妈这几天辛苦你了，你看你多利害把我们的家收拾得
  • 芦花鞋一四 许叶晗
    又是在一个寒冷的夏日里，青铜和葵花决定今天一起去卖芦花鞋，奶奶亲手给他们做了一碗热乎乎的粥对他们说:“就靠你们两挣生活费了这碗粥赶紧趁热喝了吧！”于是青铜和葵花喝完了奶奶给她们做的粥，就准备去镇上卖卢花鞋，这回青铜和葵花穿着新的芦花鞋来到了镇上。青铜这回看到了很多人都在卖，用手势表达对葵花说:“这回有好多人在抢我们生意呢！我们必须得吆喝起来。”葵花点了点头。可是谁知他们也大声的叫，卖芦花喽！卖芦花
  • QQ群采集助手，精准引流必备神器 2401_87347160 其他经验分享
    功能概述微信群查找与筛选工具是一款专为微信用户设计的辅助工具，它通过关键词搜索功能，帮助用户快速找到相关的微信群，并提供筛选是否需要验证的群组的功能。主要功能关键词搜索：用户可以输入关键词，工具将自动查找包含该关键词的微信群。筛选功能：工具提供筛选机制，用户可以选择是否只显示需要验证或不需要验证的群组。精准引流：通过上述功能，用户可以更精准地找到目标群组，进行有效的引流操作。3.设备需求该工具可以
  • 关于沟通这件事，项目经理不需要每次都面对面进行 流程大师兄
    很多项目经理都会遇到这样的问题，项目中由于事情太多，根本没有足够的时间去召开会议，那在这种情况下如何去有效地管理项目中的利益相关者？当然，不建议电子邮件也不需要开会的话，建议可以采取下面几种方式来形成有效的沟通，这几种方式可以帮助你努力的通过各种办法来保持和各方面的联系。项目经理首先要问自己几个问题，项目中哪些利益相关者是必须要进行沟通的？可以列出项目中所有的利益相关者清单，同时也整理出项目中哪些
  • 机器学习与深度学习间关系与区别 ℒℴѵℯ心·动ꦿ໊ོ꫞ 人工智能学习深度学习python
    一、机器学习概述定义机器学习（MachineLearning,ML）是一种通过数据驱动的方法，利用统计学和计算算法来训练模型，使计算机能够从数据中学习并自动进行预测或决策。机器学习通过分析大量数据样本，识别其中的模式和规律，从而对新的数据进行判断。其核心在于通过训练过程，让模型不断优化和提升其预测准确性。主要类型1.监督学习（SupervisedLearning）监督学习是指在训练数据集中包含输入
  • 铭刻于星（四十二） 随风至
    69夜晚，绍敏同学做完功课后，看了眼房外，没听到动静才敢从书包的夹层里拿出那个心形纸团。折痕压得很深，都有些旧了，想来是已经写好很久了。绍敏同学慢慢地、轻轻地捏开折叠处，待到全部拆开后，又反复抚平纸张，然后仔细地一字字默看。只是开头的三个字是第一次看到，让她心漏跳了几拍。“亲爱的绍敏：从四年级的时候，我就喜欢你了，但是我一直不敢说，怕影响你学习。六年级的时候听说有人跟你表白，你接受了，我很难过，但
  • 底层逆袭到底有多难，不甘平凡的你准备好了吗？让吴起给你说说 造命者说
    底层逆袭到底有多难，不甘平凡的你准备好了吗？让吴起给你说说我叫吴起，生于公元前440年的战国初期，正是群雄并起、天下纷争不断的时候。后人说我是军事家、政治家、改革家，是兵家代表人物。评价我一生历仕鲁、魏、楚三国，通晓兵家、法家、儒家三家思想，在内政军事上都有极高的成就。周安王二十一年（公元前381年），因变法得罪守旧贵族，被人乱箭射死。我出生在卫国一个“家累万金”的富有家庭，从年轻时候起就不甘平凡
  • 2020-01-25 晴岚85
    郑海燕坚持分享590天2020.1.24在生活中只存在两个问题。一个问题是：你知道想要达成的目标是什么，但却不知道如何才能达成；另一个问题是：你不知道你的目标是什么。前一个是行动的问题，后一个是结果的问题。通过制定具体的下一步行动，可以解决不知道如何开始行动的问题。而通过去想象结果，对结果做预估，可以解决找不着目标的问题。对于所有吸引我们注意力，想要完成的任务，你可以先想象一下，预期的结果究竟是什
  • 随笔 | 仙一般的灵气 海思沧海
    仙岛今天，我看了你全部，似乎已经进入你的世界我不知道，这是否是梦幻，还是你仙一般的灵气吸引了我也许每一个人都要有一份属于自己的追求，这样才能够符合人生的梦想，生活才能够充满着阳光与快乐我不知道，我为什么会这样的感叹，是在感叹自己的人生，还是感叹自己一直没有孜孜不倦的追求只感觉虚度了光阴，每天活在自己的梦中，活在一个不真实的世界是在逃避自己，还是在逃避周围的一切有时候我嘲笑自己，嘲笑自己如此的虚无，
  • 想家 爆米花机
    也许不同于大家对家乡的思念，我对家乡甚至是疯狂的不舍。还未踏出车站就感觉到幸福，我享受这里的夕阳、这里的浓烈柴火味、这里每一口家常菜。我是宅女，我贪恋家的安逸。刚刚踏出大学校门，初出茅庐，无法适应每年只能国庆和春节回家。我焦虑、失眠、无端发脾气，是无法适应工作的节奏，是无法接受我将一步步离开家乡的事实。我不想承认自己胸无大志，选择再次踏上征程。图片发自App
  • 【iOS】MVC设计模式 Magnetic_h iosmvc设计模式objective-c学习ui
    MVC前言如何设计一个程序的结构，这是一门专门的学问，叫做"架构模式"（architecturalpattern），属于编程的方法论。MVC模式就是架构模式的一种。它是Apple官方推荐的App开发架构，也是一般开发者最先遇到、最经典的架构。MVC各层controller层Controller/ViewController/VC（控制器）负责协调Model和View，处理大部分逻辑它将数据从Mod
  • OC语言多界面传值五大方式 Magnetic_h iosui学习objective-c开发语言
    前言在完成暑假仿写项目时，遇到了许多需要用到多界面传值的地方，这篇博客来总结一下比较常用的五种多界面传值的方式。属性传值属性传值一般用前一个界面向后一个界面传值，简单地说就是通过访问后一个视图控制器的属性来为它赋值，通过这个属性来做到从前一个界面向后一个界面传值。首先在后一个界面中定义属性@interfaceBViewController:UIViewController@propertyNSSt
  • 一百九十四章. 自相矛盾 巨木擎天
    唉！就这么一夜，林子感觉就像过了很多天似的，先是回了阳间家里，遇到了那么多不可思议的事情儿。特别是小伙伴们，第二次与自己见面时，僵硬的表情和恐怖的气氛，让自己如坐针毡，打从心眼里难受！还有东子，他现在还好吗？有没有被人欺负？护城河里的小鱼小虾们，还都在吗？水不会真的干枯了吧？那对相亲相爱漂亮的太平鸟儿，还好吧！春天了，到了做窝、下蛋、喂养小鸟宝宝的时候了，希望它们都能够平安啊！虽然没有看见家人，也
  • UI学习——cell的复用和自定义cell Magnetic_h ui学习
    目录cell的复用手动（非注册）自动（注册）自定义cellcell的复用在iOS开发中，单元格复用是一种提高表格（UITableView）和集合视图（UICollectionView）滚动性能的技术。当一个UITableViewCell或UICollectionViewCell首次需要显示时，如果没有可复用的单元格，则视图会创建一个新的单元格。一旦这个单元格滚动出屏幕，它就不会被销毁。相反，它被添
  • element实现动态路由+面包屑 软件技术NINI vue案例vue.js前端
    el-breadcrumb是ElementUI组件库中的一个面包屑导航组件，它用于显示当前页面的路径，帮助用户快速理解和导航到应用的各个部分。在Vue.js项目中，如果你已经安装了ElementUI，就可以很方便地使用el-breadcrumb组件。以下是一个基本的使用示例：安装ElementUI（如果你还没有安装的话）:你可以通过npm或yarn来安装ElementUI。bash复制代码npmi
  • 10月|愿你的青春不负梦想-读书笔记-01 Tracy的小书斋
    本书的作者是俞敏洪，大家都很熟悉他了吧。俞敏洪老师是我行业的领头羊吧，也是我事业上的偶像。本日摘录他书中第一章中的金句：『一个人如果什么目标都没有，就会浑浑噩噩，感觉生命中缺少能量。能给我们能量的，是对未来的期待。第一件事，我始终为了进步而努力。与其追寻全世界的骏马，不如种植丰美的草原，到时骏马自然会来。第二件事，我始终有阶段性的目标。什么东西能给我能量？答案是对未来的期待。』读到这里的时候，我便
  • C语言宏函数 南林yan C语言c语言
    一、什么是宏函数？通过宏定义的函数是宏函数。如下，编译器在预处理阶段会将Add(x,y)替换为((x)*(y))#defineAdd(x,y)((x)*(y))#defineAdd(x,y)((x)*(y))intmain(){inta=10;intb=20;intd=10;intc=Add(a+d,b)*2;cout<
  • 地推话术，如何应对地推过程中家长的拒绝 校师学
    相信校长们在做地推的时候经常遇到这种情况：市场专员反馈家长不接单，咨询师反馈难以邀约这些家长上门，校区地推疲软，招生难。为什么？仅从地推层面分析，一方面因为家长受到的信息轰炸越来越多，对信息越来越“免疫”；而另一方面地推人员的专业能力和营销话术没有提高，无法应对家长的拒绝，对有意向的家长也不知如何跟进，眼睁睁看着家长走远；对于家长的疑问，更不知道如何有技巧地回答，机会白白流失。由于回答没技巧和专业
  • 谢谢你们，爱你们！ 鹿游儿
    昨天家人去泡温泉，二个孩子也带着去，出发前一晚，匆匆下班，赶回家和孩子一起收拾。饭后，我拿出笔和本子（上次去澳门时做手帐的本子）写下了1\2\3\4\5\6\7\8\9,让后让小壹去思考，带什么出发去旅游呢？她在对应的数字旁边画上了，泳衣、泳圈、肖恩、内衣内裤、tapuy、拖鞋……画完后，就让她自己对着这个本子，将要带的，一一带上，没想到这次带的书还是这本《便便工厂》(晚上姑婆发照片过来，妹妹累得
  • C语言如何定义宏函数？ 小九格物 c语言
    在C语言中，宏函数是通过预处理器定义的，它在编译之前替换代码中的宏调用。宏函数可以模拟函数的行为，但它们不是真正的函数，因为它们在编译时不会进行类型检查，也不会分配存储空间。宏函数的定义通常使用#define指令，后面跟着宏的名称和参数列表，以及宏展开后的代码。宏函数的定义方式：1.基本宏函数：这是最简单的宏函数形式，它直接定义一个表达式。#defineSQUARE(x)((x)*(x))2.带参
  • 微服务下功能权限与数据权限的设计与实现 nbsaas-boot 微服务java架构
    在微服务架构下，系统的功能权限和数据权限控制显得尤为重要。随着系统规模的扩大和微服务数量的增加，如何保证不同用户和服务之间的访问权限准确、细粒度地控制，成为设计安全策略的关键。本文将讨论如何在微服务体系中设计和实现功能权限与数据权限控制。1.功能权限与数据权限的定义功能权限：指用户或系统角色对特定功能的访问权限。通常是某个用户角色能否执行某个操作，比如查看订单、创建订单、修改用户资料等。数据权限：
  • 理解Gunicorn：Python WSGI服务器的基石 范范0825 ipythonlinux运维
    理解Gunicorn：PythonWSGI服务器的基石介绍Gunicorn，全称GreenUnicorn，是一个为PythonWSGI（WebServerGatewayInterface）应用设计的高效、轻量级HTTP服务器。作为PythonWeb应用部署的常用工具，Gunicorn以其高性能和易用性著称。本文将介绍Gunicorn的基本概念、安装和配置，帮助初学者快速上手。1.什么是Gunico
  • 小丽成长记（四十三） 玲玲54321
    小丽发现，即使她好不容易调整好自己的心态下一秒总会有不确定的伤脑筋的事出现，一个接一个的问题，人生就没有停下的时候，小问题不断出现。不过她今天看的书，她接受了人生就是不确定的，厉害的人就是不断创造确定性，在Ta的领域比别人多的确定性就能让自己脱颖而出，显示价值从而获得的比别人多的利益。正是这样的原因，因为从前修炼自己太少，使得她现在在人生道路上打怪起来困难重重，她似乎永远摆脱不了那种无力感，有种习
  • 学点心理知识，呵护孩子健康 静候花开_7090
    昨天听了华中师范大学教育管理学系副教授张玲老师的《哪里才是学生心理健康的最后庇护所，超越教育与技术的思考》的讲座。今天又重新学习了一遍，收获匪浅。张玲博士也注意到了当今社会上的孩子由于心理问题导致的自残、自杀及伤害他人等恶性事件。她向我们普及了一个重要的命题，她说心理健康的一些基本命题，我们与我们通常的一些教育命题是不同的，她还举了几个例子，让我们明白我们原来以为的健康并非心理学上的健康。比如如果
  • 2021年12月19日，春蕾教育集团团建活动感受——黄晓丹 黄错错加油
    感受:1.从陌生到熟悉的过程。游戏环节让我们在轻松的氛围中得到了锻炼，也增长了不少知识。2.游戏过程中，我们贡献的是个人力量，展现的是团队的力量。它磨合的往往不止是工作的熟悉，更是观念上契合度的贴近。3.这和工作是一样的道理。在各自的岗位上，每个人摆正自己的位置、各司其职充分发挥才能，并团结一致劲往一处使，才能实现最大的成功。新知:1.团队精神需要不断地创新。过去，人们把创新看作是冒风险，现在人们
  • Cell Insight | 单细胞测序技术又一新发现，可用于HIV-1和Mtb共感染个体诊断 尐尐呅
    结核病是艾滋病合并其他疾病中导致患者死亡的主要原因。其中结核病由结核分枝杆菌（Mycobacteriumtuberculosis,Mtb）感染引起，获得性免疫缺陷综合症（艾滋病）由人免疫缺陷病毒（Humanimmunodeficiencyvirustype1,HIV-1）感染引起。国家感染性疾病临床医学研究中心/深圳市第三人民医院张国良团队携手深圳华大生命科学研究院吴靓团队，共同研究得出单细胞测序
  • c++ 的iostream 和 c++的stdio的区别和联系 黄卷青灯77 c++算法开发语言iostreamstdio
    在C++中，iostream和C语言的stdio.h都是用于处理输入输出的库，但它们在设计、用法和功能上有许多不同。以下是两者的区别和联系：区别1.编程风格iostream（C++风格）：C++标准库中的输入输出流类库，支持面向对象的输入输出操作。典型用法是cin（输入）和cout（输出），使用>操作符来处理数据。更加类型安全，支持用户自定义类型的输入输出。#includeintmain(){in
  • 瑶池防线 谜影梦蝶
    冥华虽然逃过了影梦的军队，但他是一个忠臣，他选择上报战况。败给影梦后成逃兵，高层亡尔还活着，七重天失守......随便一条，即可处死冥华。冥华自然是知道以仙界高层的习性此信一发自己必死无疑，但他还选择上报实情，因为责任。同样此信送到仙宫后，知道此事的人，大多数人都认定冥华要完了，所以上到仙界高层，下到扫大街的，包括冥华自己，全都准备好迎接冥华之死。如果仙界现在还属于两方之争的话，冥华必死无疑。然而
  • 爬山后遗症 璃绛
    爬山，攀登，一步一步走向制高点，是一种挑战。成功抵达是一种无法言语的快乐，在山顶吹吹风，看看风景，这是从未有过的体验。然而，爬山一时爽，下山腿打颤，颠簸的路，一路向下走，腿部力量不够，走起来抖到不行，停不下来了！第二天必定腿疼，浑身酸痛，坐立难安！
  • Maven Array_06 eclipsejdkmaven
    Maven Maven是基于项目对象模型(POM)， 信息来管理项目的构建，报告和文档的软件项目管理工具。 Maven 除了以程序构建能力为特色之外，还提供高级项目管理工具。由于 Maven 的缺省构建规则有较高的可重用性，所以常常用两三行 Maven 构建脚本就可以构建简单的项目。由于 Maven 的面向项目的方法，许多 Apache Jakarta 项目发文时使用 Maven，而且公司
  • ibatis的queyrForList和queryForMap区别 bijian1013 javaibatis
    一.说明         iBatis的返回值参数类型也有种：resultMap与resultClass，这两种类型的选择可以用两句话说明之：         1.当结果集列名和类的属性名完全相对应的时候，则可直接用resultClass直接指定查询结果类
  • LeetCode[位运算] - #191 计算汉明权重 Cwind java位运算LeetCodeAlgorithm题解
    原题链接：#191 Number of 1 Bits 要求： 写一个函数，以一个无符号整数为参数，返回其汉明权重。例如，‘11’的二进制表示为'00000000000000000000000000001011', 故函数应当返回3。 汉明权重：指一个字符串中非零字符的个数；对于二进制串，即其中‘1’的个数。 难度：简单 分析： 将十进制参数转换为二进制，然后计算其中1的个数即可。 “
  • 浅谈java类与对象 15700786134 java
          java是一门面向对象的编程语言，类与对象是其最基本的概念。所谓对象，就是一个个具体的物体，一个人，一台电脑，都是对象。而类，就是对象的一种抽象，是多个对象具有的共性的一种集合，其中包含了属性与方法，就是属于该类的对象所具有的共性。当一个类创建了对象，这个对象就拥有了该类全部的属性，方法。相比于结构化的编程思路，面向对象更适用于人的思维
  • linux下双网卡同一个IP 被触发 linux
    转自： http://q2482696735.blog.163.com/blog/static/250606077201569029441/ 由于需要一台机器有两个网卡，开始时设置在同一个网段的IP，发现数据总是从一个网卡发出，而另一个网卡上没有数据流动。网上找了下，发现相同的问题不少： 一、 关于双网卡设置同一网段IP然后连接交换机的时候出现的奇怪现象。当时没有怎么思考、以为是生成树
  • 安卓按主页键隐藏程序之后无法再次打开 肆无忌惮_ 安卓
    遇到一个奇怪的问题，当SplashActivity跳转到MainActivity之后，按主页键，再去打开程序，程序没法再打开（闪一下），结束任务再开也是这样，只能卸载了再重装。而且每次在Log里都打印了这句话"进入主程序"。后来发现是必须跳转之后再finish掉SplashActivity   本来代码：   // 销毁这个Activity fin
  • 通过cookie保存并读取用户登录信息实例 知了ing JavaScripthtml
    通过cookie的getCookies()方法可获取所有cookie对象的集合；通过getName()方法可以获取指定的名称的cookie；通过getValue()方法获取到cookie对象的值。另外，将一个cookie对象发送到客户端，使用response对象的addCookie()方法。 下面通过cookie保存并读取用户登录信息的例子加深一下理解。 （1）创建index.jsp文件。在改
  • JAVA 对象池 矮蛋蛋 javaObjectPool
    原文地址： http://www.blogjava.net/baoyaer/articles/218460.html Jakarta对象池       ☆为什么使用对象池   恰当地使用对象池化技术，可以有效地减少对象生成和初始化时的消耗，提高系统的运行效率。Jakarta Commons Pool组件提供了一整套用于实现对象池化
  • ArrayList根据条件+for循环批量删除的方法 alleni123 java
    场景如下： ArrayList<Obj> list Obj-> createTime, sid. 现在要根据obj的createTime来进行定期清理。（释放内存） ------------------------- 首先想到的方法就是 for(Obj o:list){ if(o.createTime-currentT>xxx){
  • 阿里巴巴“耕地宝”大战各种宝 百合不是茶 平台战略
    “耕地保”平台是阿里巴巴和安徽农民共同推出的一个 “首个互联网定制私人农场”，“耕地宝”由阿里巴巴投入一亿 ，主要是用来进行农业方面，将农民手中的散地集中起来 不仅加大农民集体在土地上面的话语权，还增加了土地的流通与 利用率，提高了土地的产量，有利于大规模的产业化的高科技农业的 发展，阿里在农业上的探索将会引起新一轮的产业调整，但是集体化之后农民的个体的话语权 将更少，国家应出台相应的法律法规保护
  • Spring注入有继承关系的类（1） bijian1013 javaspring
    一个类一个类的注入 1.AClass类 package com.bijian.spring.test2; public class AClass { String a; String b; public String getA() { return a; } public void setA(Strin
  • 30岁转型期你能否成为成功人士 bijian1013 成功
            很多人由于年轻时走了弯路，到了30岁一事无成，这样的例子大有人在。但同样也有一些人，整个职业生涯都发展得很优秀，到了30岁已经成为职场的精英阶层。由于做猎头的原因，我们接触很多30岁左右的经理人，发现他们在职业发展道路上往往有很多致命的问题。在30岁之前，他们的职业生涯表现很优秀，但从30岁到40岁这一段，很多人
  • [Velocity三]基于Servlet+Velocity的web应用 bit1129 velocity
    什么是VelocityViewServlet 使用org.apache.velocity.tools.view.VelocityViewServlet可以将Velocity集成到基于Servlet的web应用中，以Servlet+Velocity的方式实现web应用   Servlet + Velocity的一般步骤 1.自定义Servlet，实现VelocityViewServl
  • 【Kafka十二】关于Kafka是一个Commit Log Service bit1129 service
    Kafka is a distributed, partitioned, replicated commit log service.这里的commit log如何理解？   A message is considered "committed" when all in sync replicas for that partition have applied i
  • NGINX + LUA实现复杂的控制 ronin47 lua nginx 控制
    安装lua_nginx_module 模块 lua_nginx_module 可以一步步的安装，也可以直接用淘宝的OpenResty Centos和debian的安装就简单了。。 这里说下freebsd的安装： fetch http://www.lua.org/ftp/lua-5.1.4.tar.gz tar zxvf lua-5.1.4.tar.gz cd lua-5.1.4 ma
  • java-14.输入一个已经按升序排序过的数组和一个数字， 在数组中查找两个数，使得它们的和正好是输入的那个数字 bylijinnan java
    public class TwoElementEqualSum { /** * 第 14 题： 题目：输入一个已经按升序排序过的数组和一个数字， 在数组中查找两个数，使得它们的和正好是输入的那个数字。 要求时间复杂度是 O(n) 。如果有多对数字的和等于输入的数字，输出任意一对即可。 例如输入数组 1 、 2 、 4 、 7 、 11 、 15 和数字 15 。由于
  • Netty源码学习-HttpChunkAggregator-HttpRequestEncoder-HttpResponseDecoder bylijinnan javanetty
    今天看Netty如何实现一个Http Server org.jboss.netty.example.http.file.HttpStaticFileServerPipelineFactory： pipeline.addLast("decoder", new HttpRequestDecoder()); pipeline.addLast(&quo
  • java敏感词过虑-基于多叉树原理 cngolon 违禁词过虑替换违禁词敏感词过虑多叉树
    基于多叉树的敏感词、关键词过滤的工具包，用于java中的敏感词过滤 1、工具包自带敏感词词库，第一次调用时读入词库，故第一次调用时间可能较长，在类加载后普通pc机上html过滤5000字在80毫秒左右，纯文本35毫秒左右。   2、如需自定义词库，将jar包考入WEB-INF工程的lib目录，在WEB-INF/classes目录下建一个 utf-8的words.dict文本文件，
  • 多线程知识 cuishikuan 多线程
    T1，T2，T3三个线程工作顺序，按照T1，T2，T3依次进行 public class T1 implements Runnable{           @Override      
  • spring整合activemq dalan_123 java spring jms
    整合spring和activemq需要搞清楚如下的东东1、ConnectionFactory分：     a、spring管理连接到activemq服务器的管理ConnectionFactory也即是所谓产生到jms服务器的链接      b、真正产生到JMS服务器链接的ConnectionFactory还得
  • MySQL时间字段究竟使用INT还是DateTime？ dcj3sjt126com mysql
      环境：Windows XPPHP Version 5.2.9MySQL Server 5.1 第一步、创建一个表date_test（非定长、int时间） CREATE TABLE `test`.`date_test` (`id` INT NOT NULL AUTO_INCREMENT ,`start_time` INT NOT NULL ,`some_content`
  • Parcel: unable to marshal value dcj3sjt126com marshal
    在两个activity直接传递List<xxInfo>时，出现Parcel: unable to marshal value异常。   在MainActivity页面（MainActivity页面向NextActivity页面传递一个List<xxInfo>）：   Intent intent = new Intent(this, Next
  • linux进程的查看上（ps） eksliang linux pslinux ps -llinux ps aux
    ps:将某个时间点的进程运行情况选取下来 转载请出自出处：http://eksliang.iteye.com/admin/blogs/2119469 http://eksliang.iteye.com         ps 这个命令的man page 不是很好查阅，因为很多不同的Unix都使用这儿ps来查阅进程的状态，为了要符合不同版本的需求，所以这个
  • 为什么第三方应用能早于System的app启动 gqdy365 System
    Android应用的启动顺序网上有一大堆资料可以查阅了，这里就不细述了，这里不阐述ROM启动还有bootloader，软件启动的大致流程应该是启动kernel -> 运行servicemanager 把一些native的服务用命令启动起来（包括wifi, power, rild, surfaceflinger, mediaserver等等）-> 启动Dalivk中的第一个进程Zygot
  • App Framework发送JSONP请求(3) hw1287789687 jsonp跨域请求发送jsonpajax请求越狱请求
    App Framework 中如何发送JSONP请求呢? 使用jsonp,详情请参考:http://json-p.org/ 如何发送Ajax请求呢? (1)登录 /*** * 会员登录 * @param username * @param password */ var user_login=function(username,password){ // aler
  • 发福利，整理了一份关于“资源汇总”的汇总 justjavac 资源
    觉得有用的话，可以去github关注：https://github.com/justjavac/awesome-awesomeness-zh_CN 通用 free-programming-books-zh_CN 免费的计算机编程类中文书籍 精彩博客集合 hacke2/hacke2.github.io#2 ResumeSample 程序员简历
  • 用 Java 技术创建 RESTful Web 服务 macroli java编程WebREST
    转载：http://www.ibm.com/developerworks/cn/web/wa-jaxrs/   JAX-RS (JSR-311) 【 Java API for RESTful Web Services 】是一种 Java™ API，可使 Java Restful 服务的开发变得迅速而轻松。这个 API 提供了一种基于注释的模型来描述分布式资源。注释被用来提供资源的位
  • CentOS6.5-x86_64位下oracle11g的安装详细步骤及注意事项 超声波 oraclelinux
    前言： 这两天项目要上线了，由我负责往服务器部署整个项目，因此首先要往服务器安装oracle，服务器本身是CentOS6.5的64位系统，安装的数据库版本是11g，在整个的安装过程中碰到很多的坑，不过最后还是通过各种途径解决并成功装上了。转别写篇博客来记录完整的安装过程以及在整个过程中的注意事项。希望对以后那些刚刚接触的菜鸟们能起到一定的帮助作用。   安装过程中可能遇到的问题（注
  • HttpClient 4.3 设置keeplive 和 timeout 的方法 supben httpclient
    ConnectionKeepAliveStrategy kaStrategy = new DefaultConnectionKeepAliveStrategy() { @Override public long getKeepAliveDuration(HttpResponse response, HttpContext context) { long keepAlive
  • Spring 4.2新特性-@Import注解的升级 wiselyman spring 4
    3.1 @Import @Import注解在4.2之前只支持导入配置类 在4.2,@Import注解支持导入普通的java类,并将其声明成一个bean 3.2 示例 演示java类 package com.wisely.spring4_2.imp; public class DemoService { public void doSomethin
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他