chenqunan3231
chenqunan3231

使用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 = $("
  11. ").html(key.number).css("backgroundColor", key.bgcolor).attr("draggable","true");  
  12.          $.log(li);  
  13.          li[0].addEventListener("dragstart", function() {  
  14.          }, false);  
  15.          $("#numberBox").append(li);  
  16.      }  
  17.      );  
  18. }  
  19. );  

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


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

首先还是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 = $("
  7. ")  
  8.         if (item != "0") {  
  9.             li.addClass("fix");  
  10.             li[0].innerHTML = item;  
  11.         }  
  12.         else {  
  13.             li[0].classList.add("default");  
  14.             li[0].addEventListener("dragenter",  
  15.             function(e) {  
  16.                 $.log(e);  
  17.             }, false);  
  18.   
  19.             li[0].addEventListener("dragover",  
  20.             function(e) {  
  21.                 if (e.preventDefault) {  
  22.                     e.preventDefault(); //不要执行与事件关联的默认动作   
  23.                 }  
  24.                 if (e.stopPropagation) {  
  25.                     e.stopPropagation(); //停止事件的传播   
  26.                 }  
  27.                 $.log(e);  
  28.                 return false;  
  29.             }, false);  
  30.   
  31.             li[0].addEventListener("dragleave",  
  32.             function(e) {  
  33.             }, false);  
  34.   
  35.             li[0].addEventListener("drop",  
  36.             function(e) {  
  37.                 if (e.preventDefault) {  
  38.                     e.preventDefault(); //不要执行与事件关联的默认动作   
  39.                 }  
  40.                 if (e.stopPropagation) {  
  41.                     e.stopPropagation(); //停止事件的传播   
  42.                 }  
  43.   
  44.             }, false);  
  45.         }  
  46.         $("#player").append(li);  
  47.     }  
  48.     );  
  49. }  
  50. );  
现在你已经可以在页面上看到一个非常威武的“独”字了！


第三步：我们拖动数字之后，希望可以填数字的区域有明显的颜色变化并给出提示，同时固定区域不可以拖进去，其他区域可以拖进去，并且拖动的时候要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 = $("
  11. ").html(key.number).css("backgroundColor", key.bgcolor).attr("draggable", "true");  
  12.          //$.log(li);   
  13.          li[0].addEventListener("dragstart", function(e) {  
  14.              e.dataTransfer.effectAllowed = "copyMove";  
  15.              e.dataTransfer.setData("text/plain", this.innerHTML);  
  16.              $.log(this.innerHTML);  
  17.              [ ].forEach.call(document.querySelectorAll("#player .default"),  
  18.          function(item) {  
  19.              //$.log(item);   
  20.              item.classList.remove("default");  
  21.              item.classList.add("ation");  
  22.          });  
  23.          }, false);  
  24.   
  25.          li[0].addEventListener("dragend", function() {  
  26.              [ ].forEach.call(document.querySelectorAll("#player .ation"),  
  27.          function(item) {  
  28.              item.classList.remove("ation");  
  29.              item.classList.add("default");  
  30.          });  
  31.          }, false);  
  32.   
  33.          $("#numberBox").append(li);  
  34.      }  
  35.      );  
  36. }  
  37. );  
现在你可以测试下了，当你拖动数字的时候，有明显的颜色改变，并且不同的区域你的鼠标样式也不同哦。

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

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


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

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

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


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

    转载于:https://my.oschina.net/chen106106/blog/51704

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

    • 美易官方：盘前道指期货涨0.5%，游戏驿站跌逾15% 美股投资 财经人工智能大数据新浪微博微信微信公众平台百度金融
      在股市开盘前的交易时段，道指期货上涨了0.5%，而游戏驿站（GameStop）的股价却出现了大幅下跌，跌幅超过15%。这一市场动态引发了投资者的广泛关注，也反映了当前股市的复杂性和不确定性。美股股指期货周三盘前走强，交易员为季度末的再平衡做准备。本周因假期而缩短，美国将公布关键通胀数据。道指期货涨0.5%，标普500指数期货涨0.6%，纳指期货涨0.5%。德国DAX指数涨0.4%，英国富时100指
    • 亲亲往这里来 神道仙灵
      图片发自App…哈…哈……上次……失误…失误……此…次……哈…哈…哈……我不会……哪么……大舌头……哪么……呆笨……直…白…了…！…亲们……看见…我口中……喝的…啥了么……呵…呵…呵……看见…我手上……又…拿的……啥了…么……哈…哈…哈……哈我的小宝贝
    • 别人能伤害你，是你允许的。 1125198e6b7d
      不要对别人抱有太大期望，保护自己的最佳方式,就是从不高估自己在别人心中的份量。能伤害你的从来不是别人的无情，而是你心存幻想的坚持。及时止损，不盼望就不会失望。相识很久的关系，明明内心很不舒服，却还要装作若无其事的样子，强撑着去面对。一次又一次为了迎合而迎合，自我qipian，精神内耗。对于那些不能带给你任何积极能量的人，我们真正要做的就是及时止损。伤害你的人从来没想过帮助你成长，真正让你成长的是你
    • 2023-02-16 执剑饮烈酒
      1、开心点，反正谁也别想活着离开这个世界。——朱德庸2、我一直以为爱的反义词是不爱，直到现在我才明白，爱的反义词是遗忘。——《寻梦环游记》3、人生的最高境界是佛为心，道为骨，儒为表，大度看世界。技在手，能在身，思在脑，从容过生活。——南怀瑾4、如果一个民族沦落到，只剩下把升官发财当成最终目标和追求的时候，那么这个民族就危险了，一旦金钱和权利成了唯一的信仰，那将是悲哀的。——鲁迅5、人和人如果不在一
    • 为什么wal会 提升数据库性能 浩澜大大 数据库
      由于对于一个数据库内会存在很多张表，那么当数据库更新表数据时（1）直接写入磁盘实际写入的位置，会根据表的不同对应到不同的磁盘位置，在写入数据的时候，就会不停的寻找磁盘地址，找到地址后再去写入，对于机械硬盘来说，无规律的寻址是非常耗时的，对应SSD来说虽然性能提升很多，但是也会消耗时间；（2）先写入日志，在写入磁盘（WAL）WAL的过程，由于总是按照在文件末尾追加，只要找到文件写入位置，写入修改后，
    • 【Python】一文详细介绍 py格式 文件 高斯小哥 Python基础【高质量合集】python新手入门学习
      【Python】一文详细介绍py格式文件个人主页：高斯小哥高质量专栏：Matplotlib之旅：零基础精通数据可视化、Python基础【高质量合集】、PyTorch零基础入门教程希望得到您的订阅和支持~创作高质量博文(平均质量分92+)，分享更多关于深度学习、PyTorch、Python领域的优质内容！（希望得到您的关注~）文章目录一、py格式文件简介二、如何创建和编辑py格式文件三、如何运行py
    • 《昼颜》里的日本女人：相遇要万种风情，分手要残忍绝情 迷影咖啡
      作者：迷之菌子神奇菇迷影咖啡：一本正经做烘焙，胡说八道聊电影漫天萤火虫消散之时良宵就将过去，人们也说含苞待放的花蕾总会开了又谢，因紧紧相拥而面红耳赤的躯体，便是我们经历过这热爱的证明。夫妻关系介绍《昼颜》是2014年电视剧《昼颜：工作日下午三点的恋人们》的续集，故事发在电视剧情节结束的三年后，讲述了已经恢复独身的纱和偶然与曾经的出轨对象北野重逢后再次陷入感情漩涡的故事。《昼颜》制作灵感源自利佳子在
    • 迎接2019 唯有杜康1994
      告别2018这一年是机遇与挑战，痛苦与喜悦，失去与收获的一年一月:收获了第一份爱情，开始真正想去了解一个人三月:对工作有了更深入的认识，靠自己的力量完成晋升五月:搬家，住进了自己理想的公寓，一间属于自己的屋子。满地的书六月:外调广州，升经理，有了自己的第一个团队。七月:怀着自我否定，第一次完成了部门任务八月:第一个员工流失，痛哭不已明白无不散之筵席九月:员工陆续离开，经济是一切的根本。十月:陪员工
    • 亲子日记之祝姑姥姥生日快乐（282） 冰心雨露_d504
      2021年7月18日，周日，晴周日上班的不上班，上学的不上学，全家都属于休息状态，洗衣做饭是上午的主要任务，中午休息一会儿，下午比较晚了出去给梦怡买了二年级上册的口算题卡，然后去参加姑姑的生日聚餐，本来姑姑应该是周一生日，因为周一都要上班，就提前到周日过了，说是过生日其实就是想借此机会一家人聚聚，毕竟平常都忙，没有时间聚在一起，梦怡还给姑姥姥做了生日贺卡，虽然长相一般，重在心意。生日快乐
    • 100天30本书读书计划（2018-06-11）DAY 62 一个姜姜
      【书名】当我谈跑步时，我谈些什么【作者】村上春树【读书页数】51--128/187【读书时间】2018年6月11日【精彩句子】01肌肉难长，易消。赘肉易长，难消。P5502肌肉也同有血有肉的动物一般无二，它也愿意过更舒服的日子，不继续给它负荷，它便会心安理得地将记忆出去。想再度输入的话，必须得从头开始，将同样的模式重复一遍。P7703不管怎样，反正得坚持跑步。每天跑步对我来说好比生命线，不能说忙就
    • 植物小记 番茄秧子
      小时候，我养过一院子的花。今年，我重新开始从头开始养一点儿植物。别人说那也只是别人说临到快过年，我逛了一趟花市，买了两棵水仙花。路过另外一个卖水仙的摊位，霸气的卖花小妹瞧了一眼我捧着的那两棵弱小，说了一句：“你那个水仙不行，都不会开花的。”以我的脾气，这当然不能相信啊。结果，带回家好几天没动静。某一天早晨起来，两棵水仙悄不吭声全开了，然后香了屋子好多天。水仙三月，我在花市扛了一盆栀子花，花店老板见
    • 大学播音主持都学什么内容？播音主持专业学什么？ 配音新手圈
      有些喜欢播音主持并且犹豫要不要报考这个大学专业的小伙伴们就会想要了解大学播音主持都学什么内容吧，毕竟如果不够了解就直接选择这个专业真的等选择完进去学习以后才知道这个专业并不是自己想要学习的东西那就来不及了。下面是小编为大家整理出来的一些播音主持专业学习的内容，请往下看吧。大学播音主持专业主要学习的课程有：播音发声、播音创作基础、广播播音主持、电视播音主持、文艺作品演播学概论、新闻学概论、新闻采编、
    • Android和IOS应用开发-Flutter应用让屏幕在 app 运行期间保持常亮的方法 江上清风山间明月 FlutterandroidiosflutterKeepAlive屏幕常亮wakelock熄屏
      文章目录Flutter应用让屏幕在app运行期间保持常亮的方法方法一：使用系统插件方法二：使用Widgets注意事项Flutter应用让屏幕在app运行期间保持常亮的方法在Flutter开发中，可以使用以下两种方法让屏幕在app运行期间保持常亮：方法一：使用系统插件Flutter社区中已经有很多相关插件可供使用，比如wakelock:https://pub.dev/packages/wakeloc
    • 微信小程序监听用户经纬度变化 某公司摸鱼前端 微信小程序小程序
      一些打卡App需要根据用户的位置来完成打卡那么就需要监听用户位置变化情况：示例：//在某个生命周期函数中，如onLoad中onLoad:function(options){//开始监听位置变化wx.startLocationUpdate({success:function(){console.log('开始更新位置');},fail:function(){console.log('开始更新位置失败
    • 2019-04-08早 梦雅的简动力
      在上瑜伽课前10分钟的调息中，你的眼睛为什么总是想睁开？（焦虑）。你的眉头为什么总是紧锁？（压力）。练习体式时你为什么总是去看别人？（攀比）保持体式时你为什么总是烦躁？（性急）。保持长久而规律的练习，以上这些，终归离你远去。瑜伽，首先，不是帮你得到，而是教你放下。图片发自App时间，一时间无法跳离这个特殊的词汇毅力，坚持，真诚，需要时间来见证真相，现实，伪装，时间自然会揭秘珍惜它又害怕它可它丝毫不
    • 3/31总结 静心第一
      今日总结：1.上午体验课以及反馈2.p1专注力上课3.情绪精品营上课4.燕子营队辅营以及前台值班5.活动室带孩子接待带到访今日反思：1.合理安排体力2.对于准客户记得跟进3.不要放过每一次成交的机会（这个精品营转发有点失败，后期需调整）今日感受：1.为了效果，后期课程一定想方设法布置家庭，给予一个好的支持系统2.上到下午的课程感觉特别特别的累3.晚上在做辅营一个孩子大声叫喊，后来单独出去沟通，其实
    • 极狐GitLab 论坛 2.0 全新上线，可以在论坛上查找与 GitLab 相关的问题了～ 极小狐 gitlab极狐GitLabdevopsGitLabci/cddevsecopsSCM
      安装出现依赖错误？版本升级搞不定？遇到422、500就懵逼了？不知道某个功能是免费or付费？……使用GitLab这种全球顶级的DevOps平台进行软件研发时，总会遇到一些困惑，想跟专业的技术人员快速交流以便获得答案，同时又想把这些问题沉淀下来以帮助他人？有这种赠人玫瑰，手有余香的解决方案吗？答案肯定有：论坛！！！论坛——一个各路大神聚集的地方，一个可以解惑答疑问道的地方。解惑：搜索与自己问题相同或
    • 数据结构奇妙旅程之深入解析快速排序 山间漫步人生路 数据结构排序算法算法
      快速排序（QuickSort）是一种高效的排序算法，它使用了分治法的策略来将一个数组排序。其基本思想是选择一个基准元素，通过一趟排序将待排序的数据分割成独立的两部分，其中一部分的所有数据都比基准元素小，另一部分的所有数据都比基准元素大，然后再按此方法对这两部分数据分别进行快速排序，整个排序过程可以递归进行，以此达到整个数据变成有序序列。工作原理选择基准：从待排序的序列中选一个元素作为基准（pivo
    • 被隔离的日子（五）@三七会写作营 三七会萍海临风
      从隔离的初期，我们三人都不适应，彼此说话都还火药味十足。后随着时间的推移，到现在，我们仨人能够心平气和，幽默地对待彼此。看来，时间可真是个好东西，不仅能见证一个人的心性，还能看清自己的需求、他人的本质。今天晚上，孩子跑到厨房，告诉我她给人捐款了。我纳闷，不是给河南捐过款了么。当时，我还落后于她捐的呢。这次又捐给谁？看到我一脸狐疑，孩子说，还记得初四给她补课的那个男老师么？当让记得，当时，就因为是男
    • 教育微创新的意蕴 知北老师
      我是1992年参加工作的，一毕业就被分配到一所全县最偏僻落后的农村学校——付窝中学，12年后被调往一所已经连续十年全县倒数第一，也是很偏僻落后的农村学校——北宋镇第三中学。三年后到了北宋镇第一中学工作，这所学校教学质量也是连续几年落后了。2014年我到了北京市育英学校，这所学校是京城名校。2016年7月，我被育英学校派往原密云区第七中学工作，这是一所城乡接合部薄弱学校。学校现名为北京市育英学校密云
    • 我喝醉了，但是与你无关 Z先生的日记本
      2019年04月10号晚上我和一个朋友喝酒了，彻彻底底的喝醉了，喝到短片，事后我问L，我说我喝醉了之后，都发生了什么，L没有告诉我详情，但是跟我说了大致，他说我跟他一直聊天，说自己小的时候的事，说自己爸妈的事，说自己现在过得很苦可能，确实是喝醉了酒，才会毫无防备的跟其他人说这些吧。L还说感觉我过得很苦，很心疼。醉了酒之后还哭了，想想还真是丢人一年前，在宿舍也有一瓶红酒，那是舍友出去拉赞助时候，友商
    • android 自定义曲线图,Android自定义View——贝赛尔曲线 weixin_39767513 android自定义曲线图
      个人博客：haichenyi.com。感谢关注本文针对有一定自定义View的童鞋，最好对贝赛尔曲线有辣么一丢丢了解，不了解也没关系。花5分钟看一下GcsSloop的安卓自定义View进阶-Path之贝塞尔曲线。本文的最终效果图：最终效果图.gif思路首先他是一个只有上半部分的正弦形状的水波纹，很规则。其次，他这个正弦图左右在移动。然后，就是它这个自定义View，上下也在移动，是慢慢增加的最后，优化
    • Flink中的SQL Client和SQL Gateway BigDataMLApplication flinkflinksqlgateway
      Flink中的SQLClient和SQLGateway对比目录定义基本原理适用场景主要区别常用运维命令示例官方链接正文1.定义SQLClient：FlinkSQLClient是一种用于提交和执行FlinkSQL语句的命令行界面或图形界面工具。SQLGateway：FlinkSQLGateway是一个独立的服务，它允许客户端通过RESTfulAPI将SQL查询提交到Flink集群。2.基本原理SQL
    • 2022年河南省高等职业教育技能大赛云计算赛项竞赛赛卷（样卷） 忘川_ydy 云计算云计算openstackkubernetesdockerpythonk8sansible
      #需要资源（软件包及镜像）或有问题的，可私博主！！！#需要资源（软件包及镜像）或有问题的，可私博主！！！#需要资源（软件包及镜像）或有问题的，可私博主！！！第一部分：私有云任务1私有云服务搭建(10分)使用提供的用户名密码，登录竞赛用的云计算平台，按要求自行使用镜像创建两台云主机，创建完云主机后确保网络正常通信，然后按要求配置服务器。根据提供安装脚本框架，补充脚本完成OpenStack平台的安装搭
    • 浪潮 M5系列服务器IPMI无法监控存储RAID卡问题. Songxwn 硬件服务器服务器运维
      简介浪潮的M5代服务器，可能有WebBMC无法查看存储RAID/SAS卡状态的情况，可以通过以下方式修改。修改完成后重启BMC即可生效。ESXiIPMITools使用：https://songxwn.com/ESXi8_IPMI/（Linux也可以直接使用）Linux/ESXiIPMITool下载：https://songxwn.com/file/ipmitoolWindows下载：https:/
    • 打印出1-100的奇数 。（C语言） 王多鱼001 C语言c语言算法数据结构
      代码：#includeintmain(){for(inti=1;i<101;i++){if(i%2==1){printf("%d,",i);}}return0;}
    • 【OpenModelica】4命令行大全 Wumbuk python开发语言modelica
      命令行大全文章目录命令行大全一、SummaryofCommandsfortheInteractiveSessionHandler二、Runningthecompilerfromcommandline一、SummaryofCommandsfortheInteractiveSessionHandler以下是交互式会话处理器中当前可用命令的完整列表。•simulate(modelname)：翻译一个名为
    • 通俗易懂：MySQL中如何设置只读实例并确保数据一致性？ 大龄下岗程序员 mysqljavamysqlspring
      在MySQL中设置只读实例主要应用于构建高可用性和扩展性的数据库环境，通常是为了分担读取负载或者用于备份和灾难恢复。以下是创建MySQL只读实例并确保数据一致性的基本步骤：1.创建并配置只读实例-主从复制设置-首先，你需要有一个主数据库实例（Master）负责接收所有的写操作。-创建一个或多个从数据库实例（Slave），并将它们配置为主数据库的复制品。这通常通过设置主从复制（Replication
    • 拼多多纸巾推荐：品质与性价比的完美结合 氧惠帮朋友一起省
      拼多多纸巾推荐拼多多纸巾返现怎么做在我们的日常生活中，纸巾已经成为不可或缺的用品。无论是在家庭、办公室还是旅途中，纸巾都是我们随时随地需要的物品。随着电商平台的兴起，越来越多的人选择在网上购买纸巾。其中，拼多多作为国内知名的电商平台之一，以其独特的社交电商模式和实惠的价格吸引了大量用户。今天，我们就来探讨如何在拼多多上选择品质优良、性价比高的纸巾，以及如何通过一些小技巧来获取更多的优惠。一、品质与
    • 5月8日盘前提示：维持短期可以操作到下周二左右的判断，重个股轻指数 九命_猫妖
      大盘：消息面。取消境外投资者额度限制，这个长线利好股市，短期影响不大，因为3000亿额度只用了1/3。额度本来就够用。走势看，昨天缩量横盘，走的还算中规中矩，近期一直弱势的次新股走势较强，前期强势股京威股份、光大嘉宝等跌停，由此判断市场还是存量博弈的市场，震荡是市场的主基调。维持短期可以操作到下周二左右的判断。下周后半段震荡回调的概率较高。思路：短期重个股轻指数行业和个股：物联网行业有利好，关注下
    • JAVA中的Enum 周凡杨 javaenum枚举
      Enum是计算机编程语言中的一种数据类型---枚举类型。 在实际问题中，有些变量的取值被限定在一个有限的范围内。     例如，一个星期内只有七天 我们通常这样实现上面的定义： public String monday; public String tuesday; public String wensday; public String thursday
    • 赶集网mysql开发36条军规 Bill_chen mysql业务架构设计mysql调优mysql性能优化
      (一)核心军规 (1)不在数据库做运算    cpu计算务必移至业务层； (2)控制单表数据量    int型不超过1000w，含char则不超过500w；    合理分表；    限制单库表数量在300以内； (3)控制列数量    字段少而精，字段数建议在20以内
    • Shell test命令 daizj shell字符串test数字文件比较
      Shell test命令 Shell中的 test 命令用于检查某个条件是否成立，它可以进行数值、字符和文件三个方面的测试。 数值测试 参数 说明 -eq 等于则为真 -ne 不等于则为真 -gt 大于则为真 -ge 大于等于则为真 -lt 小于则为真 -le 小于等于则为真 实例演示： num1=100 num2=100if test $[num1]
    • XFire框架实现WebService(二) 周凡杨 javawebservice
         有了XFire框架实现WebService(一)，就可以继续开发WebService的简单应用。 Webservice的服务端(WEB工程)： 两个java bean类： Course.java    package cn.com.bean; public class Course {     private
    • 重绘之画图板 朱辉辉33 画图板
             上次博客讲的五子棋重绘比较简单，因为只要在重写系统重绘方法paint（）时加入棋盘和棋子的绘制。这次我想说说画图板的重绘。        画图板重绘难在需要重绘的类型很多，比如说里面有矩形，园，直线之类的，所以我们要想办法将里面的图形加入一个队列中，这样在重绘时就
    • Java的IO流 西蜀石兰 java
      刚学Java的IO流时，被各种inputStream流弄的很迷糊，看老罗视频时说想象成插在文件上的一根管道，当初听时觉得自己很明白，可到自己用时，有不知道怎么代码了。。。 每当遇到这种问题时，我习惯性的从头开始理逻辑，会问自己一些很简单的问题，把这些简单的问题想明白了，再看代码时才不会迷糊。 IO流作用是什么？ 答：实现对文件的读写，这里的文件是广义的； Java如何实现程序到文件
    • No matching PlatformTransactionManager bean found for qualifier 'add' - neither 林鹤霄
      java.lang.IllegalStateException: No matching PlatformTransactionManager bean found for qualifier 'add' - neither qualifier match nor bean name match!   网上找了好多的资料没能解决，后来发现：项目中使用的是xml配置的方式配置事务，但是
    • Row size too large (> 8126). Changing some columns to TEXT or BLOB aigo column
      原文：http://stackoverflow.com/questions/15585602/change-limit-for-mysql-row-size-too-large   异常信息： Row size too large (> 8126). Changing some columns to TEXT or BLOB or using ROW_FORMAT=DYNAM
    • JS 格式化时间 alxw4616 JavaScript
      /** * 格式化时间 2013/6/13 by 半仙 [email protected] * 需要 pad 函数 * 接收可用的时间值. * 返回替换时间占位符后的字符串 * * 时间占位符:年 Y 月 M 日 D 小时 h 分 m 秒 s 重复次数表示占位数 * 如 YYYY 4占4位 YY 占2位<p></p> * MM DD hh mm
    • 队列中数据的移除问题 百合不是茶 队列移除
           队列的移除一般都是使用的remov();都可以移除的,但是在昨天做线程移除的时候出现了点问题,没有将遍历出来的全部移除,  代码如下;      // package com.Thread0715.com; import java.util.ArrayList; public class Threa
    • Runnable接口使用实例 bijian1013 javathreadRunnablejava多线程
      Runnable接口 a.       该接口只有一个方法：public void run(); b.       实现该接口的类必须覆盖该run方法 c.       实现了Runnable接口的类并不具有任何天
    • oracle里的extend详解 bijian1013 oracle数据库extend
      扩展已知的数组空间，例： DECLARE TYPE CourseList IS TABLE OF VARCHAR2(10); courses CourseList; BEGIN -- 初始化数组元素，大小为3 courses := CourseList('Biol 4412 ', 'Psyc 3112 ', 'Anth 3001 '); --
    • 【httpclient】httpclient发送表单POST请求 bit1129 httpclient
      浏览器Form Post请求 浏览器可以通过提交表单的方式向服务器发起POST请求，这种形式的POST请求不同于一般的POST请求 1. 一般的POST请求，将请求数据放置于请求体中，服务器端以二进制流的方式读取数据，HttpServletRequest.getInputStream()。这种方式的请求可以处理任意数据形式的POST请求，比如请求数据是字符串或者是二进制数据 2. Form
    • 【Hive十三】Hive读写Avro格式的数据 bit1129 hive
       1. 原始数据 hive> select * from word; OK 1 MSN 10 QQ 100 Gtalk 1000 Skype      2. 创建avro格式的数据表   hive> CREATE TABLE avro_table(age INT, name STRING)STORE
    • nginx+lua+redis自动识别封解禁频繁访问IP ronin47
      在站点遇到攻击且无明显攻击特征，造成站点访问慢，nginx不断返回502等错误时，可利用nginx+lua+redis实现在指定的时间段 内，若单IP的请求量达到指定的数量后对该IP进行封禁，nginx返回403禁止访问。利用redis的expire命令设置封禁IP的过期时间达到在 指定的封禁时间后实行自动解封的目的。 一、安装环境： CentOS x64 release 6.4(Fin
    • java-二叉树的遍历-先序、中序、后序（递归和非递归）、层次遍历 bylijinnan java
      import java.util.LinkedList; import java.util.List; import java.util.Stack; public class BinTreeTraverse { //private int[] array={ 1, 2, 3, 4, 5, 6, 7, 8, 9 }; private int[] array={ 10,6,
    • Spring源码学习-XML 配置方式的IoC容器启动过程分析 bylijinnan javaspringIOC
      以FileSystemXmlApplicationContext为例，把Spring IoC容器的初始化流程走一遍： ApplicationContext context = new FileSystemXmlApplicationContext ("C:/Users/ZARA/workspace/HelloSpring/src/Beans.xml&q
    • [科研与项目]民营企业请慎重参与军事科技工程 comsci 企业
           军事科研工程和项目 并非要用最先进，最时髦的技术，而是要做到“万无一失”    而民营科技企业在搞科技创新工程的时候，往往考虑的是技术的先进性，而对先进技术带来的风险考虑得不够，在今天提倡军民融合发展的大环境下，这种“万无一失”和“时髦性”的矛盾会日益凸显。。。。。。所以请大家在参与任何重大的军事和政府项目之前，对
    • spring 定时器-两种方式 cuityang springquartz定时器
      方式一： 间隔一定时间 运行 <bean id="updateSessionIdTask" class="com.yang.iprms.common.UpdateSessionTask" autowire="byName" /> <bean id="updateSessionIdSchedule
    • 简述一下关于BroadView站点的相关设计 damoqiongqiu view
      终于弄上线了，累趴，戳这里http://www.broadview.com.cn   简述一下相关的技术点   前端：jQuery+BootStrap3.2+HandleBars，全站Ajax（貌似对SEO的影响很大啊！怎么破？），用Grunt对全部JS做了压缩处理，对部分JS和CSS做了合并（模块间存在很多依赖，全部合并比较繁琐，待完善）。   后端：U
    • 运维 PHP问题汇总 dcj3sjt126com windows2003
      1、Dede(织梦)发表文章时,内容自动添加关键字显示空白页 解决方法： 后台>系统>系统基本参数>核心设置>关键字替换（是/否），这里选择“是”。 后台>系统>系统基本参数>其他选项>自动提取关键字，这里选择“是”。   2、解决PHP168超级管理员上传图片提示你的空间不足 网站是用PHP168做的，反映使用管理员在后台无法
    • mac 下 安装php扩展 - mcrypt dcj3sjt126com PHP
      MCrypt是一个功能强大的加密算法扩展库，它包括有22种算法，phpMyAdmin依赖这个PHP扩展，具体如下： 下载并解压libmcrypt-2.5.8.tar.gz。 在终端执行如下命令： tar zxvf libmcrypt-2.5.8.tar.gz cd libmcrypt-2.5.8/ ./configure --disable-posix-threads --
    • MongoDB更新文档 [四] eksliang mongodbMongodb更新文档
      MongoDB更新文档 转载请出自出处：http://eksliang.iteye.com/blog/2174104 MongoDB对文档的CURD，前面的博客简单介绍了，但是对文档更新篇幅比较大，所以这里单独拿出来。 语法结构如下： db.collection.update( criteria, objNew, upsert, multi) 参数含义 参数   
    • Linux下的解压，移除，复制，查看tomcat命令 y806839048 tomcat
      重复myeclipse生成webservice有问题删除以前的，干净 1、先切换到：cd usr/local/tomcat5/logs 2、tail -f catalina.out 3、这样运行时就可以实时查看运行日志了 Ctrl+c 是退出tail命令。 有问题不明的先注掉   cp /opt/tomcat-6.0.44/webapps/g
    • Spring之使用事务缘由(3-XML实现) ihuning spring
        用事务通知声明式地管理事务   事务管理是一种横切关注点。为了在 Spring 2.x 中启用声明式事务管理，可以通过 tx Schema 中定义的 <tx:advice> 元素声明事务通知，为此必须事先将这个 Schema 定义添加到 <beans> 根元素中去。声明了事务通知后，就需要将它与切入点关联起来。由于事务通知是在 <aop:
    • GCD使用经验与技巧浅谈 啸笑天 GC
      前言 GCD(Grand Central Dispatch)可以说是Mac、iOS开发中的一大“利器”，本文就总结一些有关使用GCD的经验与技巧。 dispatch_once_t必须是全局或static变量 这一条算是“老生常谈”了，但我认为还是有必要强调一次，毕竟非全局或非static的dispatch_once_t变量在使用时会导致非常不好排查的bug，正确的如下： 1
    • linux（Ubuntu）下常用命令备忘录1 macroli linux工作ubuntu
      在使用下面的命令是可以通过--help来获取更多的信息1,查询当前目录文件列表：ls ls命令默认状态下将按首字母升序列出你当前文件夹下面的所有内容，但这样直接运行所得到的信息也是比较少的，通常它可以结合以下这些参数运行以查询更多的信息：  ls / 显示/.下的所有文件和目录  ls -l 给出文件或者文件夹的详细信息 ls -a 显示所有文件，包括隐藏文
    • nodejs同步操作mysql qiaolevip 学习永无止境每天进步一点点mysqlnodejs
      // db-util.js var mysql = require('mysql'); var pool = mysql.createPool({ connectionLimit : 10, host: 'localhost', user: 'root', password: '', database: 'test', port: 3306 });
    • 一起学Hive系列文章 superlxw1234 hiveHive入门
        [一起学Hive]系列文章 目录贴，入门Hive，持续更新中。   [一起学Hive]之一—Hive概述，Hive是什么 [一起学Hive]之二—Hive函数大全-完整版 [一起学Hive]之三—Hive中的数据库(Database)和表(Table) [一起学Hive]之四-Hive的安装配置 [一起学Hive]之五-Hive的视图和分区 [一起学Hive
    • Spring开发利器：Spring Tool Suite 3.7.0 发布 wiselyman spring
      Spring Tool Suite(简称STS)是基于Eclipse，专门针对Spring开发者提供大量的便捷功能的优秀开发工具。   在3.7.0版本主要做了如下的更新：   将eclipse版本更新至Eclipse Mars 4.5 GA Spring Boot(JavaEE开发的颠覆者集大成者，推荐大家学习)的配置语言YAML编辑器的支持(包含自动提示，
    按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他