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)

  • 2021年12月19日，春蕾教育集团团建活动感受——黄晓丹 黄错错加油
    感受:1.从陌生到熟悉的过程。游戏环节让我们在轻松的氛围中得到了锻炼，也增长了不少知识。2.游戏过程中，我们贡献的是个人力量，展现的是团队的力量。它磨合的往往不止是工作的熟悉，更是观念上契合度的贴近。3.这和工作是一样的道理。在各自的岗位上，每个人摆正自己的位置、各司其职充分发挥才能，并团结一致劲往一处使，才能实现最大的成功。新知:1.团队精神需要不断地创新。过去，人们把创新看作是冒风险，现在人们
  • 从鸡肉高汤到记忆的魔法再到有效提示的艺术 步子哥 人工智能
    还记得小时候那些天马行空的白日梦吗？也许只要按下键盘上的某个神奇组合，电脑就会发出滴滴的声响，一个隐藏的世界突然在你眼前展开，让你获得超凡的能力，摆脱平凡的生活。这听起来像是玩过太多电子游戏的幻想，但实际上，间隔重复系统给人的感觉惊人地相似。在最佳状态下，这些系统就像魔法一样神奇。本文将以一个看似平凡的鸡肉高汤食谱为例，深入浅出地探讨如何编写有效的间隔重复提示，让你像掌握烹饪技巧一样轻松地掌握记忆
  • DIV+CSS+JavaScript技术制作网页（旅游主题网页设计与制作）云南大理 STU学生网页设计 网页设计期末网页作业html静态网页html5期末大作业网页设计web大作业
    ️精彩专栏推荐作者主页:【进入主页—获取更多源码】web前端期末大作业：【HTML5网页期末作业(1000套)】程序员有趣的告白方式：【HTML七夕情人节表白网页制作(110套)】文章目录二、网站介绍三、网站效果▶️1.视频演示2.图片演示四、网站代码HTML结构代码CSS样式代码五、更多源码二、网站介绍网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。网站程
  • 2019-08-08 65454
    东莞家庭聚会出行旅游去哪里玩住？想起来有很久没有和家里人聚会啦，这次组织家人来到威廉古堡别墅轰趴，一大家子27个人，在别墅订了一天办，玩的非常的开心，小孩子玩游戏机，也很放心不会丢，我们就在唱歌、打麻将、打桌球一系列的活动，还准备小次等小孩生日在别墅举办，还可以给孩子做一个生日的策划
  • 关于城市旅游的HTML网页设计——(旅游风景云南 5页)HTML+CSS+JavaScript 二挡起步 web前端期末大作业javascripthtmlcss旅游风景
    ⛵源码获取文末联系✈Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业|游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作|HTML期末大学生网页设计作业，Web大学生网页HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScrip
  • HTML网页设计制作大作业（div+css） 云南我的家乡旅游景点 带文字滚动 二挡起步 web前端期末大作业web设计网页规划与设计htmlcssjavascriptdreamweaver前端
    Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作HTML期末大学生网页设计作业HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript：做与用户的交互行为文章目录前端学习路线
  • xilinx vivado PULLMODE 设置思路 坚持每天写程序 fpga开发
    1.xilinx引脚分类XilinxIO的分类：以XC7A100TFGG484为例，其引脚分类如下：1.UserIO(用户IO)：用户使用的普通IO1.1专用(Dedicated)IO：命名为IO_LXXY_#、IO_XX_#的引脚，有固定的特定用途，多为底层特定功能的直接实现，如差分对信号、关键控制信号等，不能随意变更。1.2多功能(Multi-Function)IO：命名为IO_LXXY_ZZ
  • C语言 判断回文数 Y雨何时停T c语言学习
    一，回文数概念“回文”是指正读反读都能读通的句子，它是古今中外都有的一种修辞方式和文字游戏，如“我为人人，人人为我”等。在数学中也有这样一类数字有这样的特征，成为回文数。设n是一任意自然数。若将n的各位数字反向排列所得自然数n1与n相等，则称n为一回文数。例如，若n=1234321，则称n为一回文数；但若n=1234567，则n不是回文数。二，判断回文数实现思路一：数组与字符串将数字每一位按顺序放
  • 用Python实现简单的猜数字游戏 程序媛了了 python游戏java
    猜数字游戏代码：importrandomdefpythonit():a=random.randint(1,100)n=int(input("输入你猜想的数字："))whilen!=a:ifn>a:print("很遗憾，猜大了")n=int(input("请再次输入你猜想的数字："))elifna::如果玩家猜的数字n大于随机数字a，则输出"很遗憾，猜大了"，并提示玩家再次输入。elifn
  • 2024.9.14 Python，差分法解决区间加法，消除游戏，压缩字符串 RaidenQ python游戏开发语言算法力扣
    1.区间加法假设你有一个长度为n的数组，初始情况下所有的数字均为0，你将会被给出k个更新的操作。其中，每个操作会被表示为一个三元组：[startIndex,endIndex,inc]，你需要将子数组A[startIndex…endIndex]（包括startIndex和endIndex）增加inc。请你返回k次操作后的数组。示例:输入:length=5,updates=[[1,3,2],[2,4,
  • 快点三国哪个平台有返利？快点三国哪个平台充值折扣最高？ 诸葛村夫123
    标题：快点三国哪个平台有返利？快点三国哪个平台充值折扣最高？今天我告诉大家一个可以申请内部号的平台，直接比返利号牛逼10倍不止，最近几年出现了特别多的手游平台。每个平台的福利的各不相同，但是本质是一样的，就给点礼包，首充什么的。感觉毫无卵用。就在上个月，经一个做游戏行业的朋友介绍，了解到了一个平台“游人特权站”，特别NB。这个平台给的是内部号，什么是内部号？说白了就是托号。进服就会给300-500
  • 2019年8月6日 星期二 晴 李佳晨宝宝
    今天我写完作业以后，我玩儿了一会儿我的拼装玩具，拼装玩具是我的世界的游戏里面的乐高，我拿出乐高把它拼成上次的迷宫，然后又给他升级了一下，我拆出上面一些部分的零件加大了游戏的难度，然后我又做了一个小牛圈。这个小牛圈里面住的是猪和牛，还有羊，给那里摆了一块草地，他们想吃东西直接在草地上吃，然后我把牛圈建了一个遮阳伞，防止天气太热把它们晒死。然后这样我的小牛就万无一失了，我再看看加大难度后的迷宫，实在是
  • 科幻游戏 《外卖员模拟器》 主要地理环境设定 (1) 穷人小水滴 游戏科幻设计
    游戏名称:《外卖员模拟器》(英文名称:waimai_se)作者:穷人小水滴本故事纯属虚构,如有雷同实属巧合.故事发生在一个(架空)平行宇宙的地球,21世纪(超低空科幻流派).相关文章:https://blog.csdn.net/secext2022/article/details/141790630目录1星球整体地理设定2巨蛇国主要设定3海蛇市主要设定3.1主要地标建筑3.2交通3.3能源(电力)
  • 阅读《认知觉醒》读书笔记 就看看书
    本周阅读了周岭的《认知觉醒开启自我改变的原动力》，启发较多，故做读书笔记一则，留待学习。全书共八章，讲述了大脑、潜意识、元认知、专注力、学习力、行动力、情绪力及成本最低的成长之道。具体描述了大脑、焦虑、耐心、模糊、感性、元认知、自控力、专注力、情绪专注、学习专注、匹配、深度、关联、体系、打卡、反馈、休息、清晰、傻瓜、行动、心智宽带、单一视角、游戏心态、早起、冥想、阅读、写作、运动等相关知识点。大脑
  • 高考后该不该给孩子买电脑，什么情况能买？什么情况不能买？ 寻求改变
    我知道家长们很担心，怕买了电脑小孩沉迷游戏，耽误了学业，也不利于身体健康。对于准大学生来说，基本上在18岁左右，也不算小了，但在很多父母眼里，依旧是个小孩子。数据显示，这种情况是有发生的，大学生约70%的电脑主要被用于玩网络游戏，如果没有养成一个用良好的习惯，对孩子影响是非常大的。我总结为三买，三不买。最近有看到群里很多家长再问，小孩上大学该不该给他买电脑，要买和不买两种观点的家长都有，那么哪种情
  • 崩坏星穹铁道哪个角色值得培养 崩坏星穹铁道新手角色优先级教学 会飞滴鱼儿
    崩坏星穹铁道新手角色培养攻略：哪些角色值得投资？在《崩坏星穹铁道》中，角色的强度和培养一直是玩家们关心的焦点。要想体验更爽快的游戏过程，选对角色至关重要。那么，哪些角色值得投资培养呢?本篇教学文章将针对新手玩家，从T0到T1强度的角色中为你做出详尽解析。游戏豹官网现在的手游平台很多，但是在游戏界有这么一个传说：“喜欢肝的玩家不如氪金玩家，氪金玩家不如内部福利玩家”，这就是游戏界可悲的生物链，很多平
  • 屠龙决战沙城怎么才能当托 屠龙决战沙城如何可以申请内部福利号 诸葛村夫123
    我2015年从事游戏行业，曾担任某游戏平台的运营负责人。很多朋友玩了一辈子手游可能都还不知道手游托这事儿。你们经常在游戏中遇到那些土豪玩家，进服就充几百，几千的玩家，十有八九都是托，也就是我们常说的内部号。每个人的钱都不是大风刮来的，并不是每个人都舍得在游戏里充这么多钱。那这些内部号的充值到底是哪儿来的呢？其实内部号由于运营商扶持，这种账号一开始就领先普通账号十倍不止。内部号进服运营商会给300-
  • 4 大低成本娱乐方式: 小说, 音乐, 视频, 电子游戏 穷人小水滴 娱乐音视频低成本小说游戏
    穷人如何获得快乐?小说,音乐,视频,游戏,本文简单盘点一下这4大低成本(安全)娱乐方式.这里是穷人小水滴,专注于穷人友好型低成本技术.(本文为58号作品.)目录1娱乐方式1.1小说(网络小说)1.2音乐1.3视频(b站)1.4游戏(电子游戏/计算机软件)2低成本:一只手机即可3总结与展望1娱乐方式这几种,也可以说是艺术的具体形式.更专业的说,(娱乐)是劳动力再生产的重要组成部分.使人放松,获得快乐
  • 《爱情》 杜文霞
    杜文霞坚持原创分享第39天（20190214）图片发自App对爱情的认识我越来越清晰了。真正的爱情是成年人的游戏，双方在关系中是平等的。就像舒婷《致橡树》中写的：我如果爱你——绝不学痴情的鸟儿，为绿荫重复单调的歌曲；必须是你近旁的一株木棉，作为树的形象和你站在一起。我们共享雾霭、流岚、虹霓。仿佛永远分离，却又终身相依。爱情中的爱是相互的，是爱与被爱的流动，不是控制和占有。如果一方总觉得另一方“应该
  • python简单好玩的编程代码,python有哪些好玩的代码 2301_81900439 pygamepython开发语言
    大家好，小编来为大家解答以下问题，20行python代码的入门级小游戏，python有什么好玩的代码嘛，今天让我们一起来看看吧！哈喽铁子们表弟最近在学Python，总是跟我抱怨很枯燥无味，其实，他有没有认真想过，可能是自己学习姿势不对？比方说，可以通过打游戏来学编程！今天给大家分享100个Python小游戏，一定要收藏！1、简易飞机大战飞机大战相信大家都玩过吧，非常简单有意思的游戏，咱们通过Pyt
  • string trim的实现 JamesSawyer
    if(typeofString.prototype.trim!=='function'){String.prototype.trim=function(){//这个正则的意思是//'^''$'表示结束和开始//'^\s*'表示任意以空格开头的空格//'\s*$'表示任意以空格结尾的空格//'\S*'表示任意非空字符//'$1'表示'(\S*(\s*\S*)*)'returnthis.replace
  • vue render 函数详解 (配参数详解) 你的眼睛會笑 vue2vue.jsjavascript前端
    vuerender函数详解(配参数详解)在Vue3中，`render`函数被用来代替Vue2中的模板语法。它接收一个h函数（或者是`createElement`函数的别名），并且返回一个虚拟DOM。render函数的语法结构如下：render(h){returnh('div',{class:'container'},'Hello,World!')}在上面的示例中，我们使用h函数创建了一个div元素
  • 广东麻将开发 红匣子实力推荐
    在中国，麻将作为一种深受人们喜爱的传统娱乐活动，已经有着数百年的历史。随着互联网和移动设备的普及，麻将游戏也从实体桌面转移到了数字平台，其中广东麻将因其独特的地方特色和玩法而备受青睐。本文将介绍广东麻将的开发过程，包括其设计理念、技术实现以及用户体验优化等方面。一、设计理念：广东麻将开发的核心理念是保留传统麻将的精髓，同时融入现代科技元素，使游戏既具有亲切感又不失趣味性。开发者通常会深入研究广东地
  • 生成式地图制图 Bwywb_3 深度学习机器学习深度学习生成对抗网络
    生成式地图制图（GenerativeCartography）是一种利用生成式算法和人工智能技术自动创建地图的技术。它结合了传统的地理信息系统（GIS）技术与现代生成模型（如深度学习、GANs等），能够根据输入的数据自动生成符合需求的地图。这种方法在城市规划、虚拟环境设计、游戏开发等多个领域具有应用前景。主要特点：自动化生成：通过算法和模型，系统能够根据输入的地理或空间数据自动生成地图，而无需人工逐
  • HarmonyOS Next鸿蒙扫一扫功能实现 JohnLiu_ HarmonyOSNextharmonyos华为扫一扫鸿蒙
    直接使用的是华为官方提供的api，封装成一个工具类方便调用。import{common}from'@kit.AbilityKit';import{scanBarcode,scanCore}from'@kit.ScanKit';exportnamespaceScanUtil{exportasyncfunctionstartScan(context:common.Context):Promise{if
  • 是“王者荣耀”还是“王者农药”？ 颓废思物者
    近些日子，王者又双叒叕火了。而腾讯公司的老总马化腾也跟着他的游戏在人声鼎沸的汪洋中飘荡——我最先是在公众号文章《腾讯推出游戏未保“双减双打”新措施》中看见了未成年人将减少在线时长限制，非节假日从1.5小时降低至1小时，节假日从3小时减到2小时。心中不由掀起一丝波澜：又有家长对游戏出手了。不过大家心中你知我知，在这场纷争中，必定也带着市场的挤压和变化。除去这些市场变化，我们来探讨几个问题：1.没有游
  • 儿童沙盘游戏为什么治疗有效？ 静待花开_602f
    图片发自App运华日记第197篇（2018.4.15）儿童沙盘游戏为什么治疗有效？首先是孩子们喜欢。其次它做为一种“语言”表现孩子们“问题”，通过沙具可以和孩子起到交流与沟通的作用。人最怕的被迫生活学习，那么在沙盘中，一切都由孩子们自由创造，发挥孩子们自己的主观能动性。他们可以任意摆放自己喜欢的沙具，呈现着他们的情绪与心理，表达着他们所遇到问题以及应付问题的方式。而治疗师为儿童提供一个助于他们通过
  • 剧本杀《暗黑者·七宗欲》复盘详细解析+凶手角色剧透答案真相 VX搜_小燕子复盘
    为了你获得更好的游戏体验，本文仅显示《暗黑者·七宗欲》剧本杀部分真相复盘，获取完整真相复盘只需两步①【微信关注公众号：集美复盘】②回复【暗黑者·七宗欲】即可查看获取哦﹎﹎﹎﹎﹎﹎﹎﹎﹎﹎﹎﹎﹎﹎﹎﹎﹎﹎﹎﹎﹎﹎﹎﹎﹎﹎﹎﹎﹎﹎﹎﹎﹎﹎1、剧本杀《暗黑者·七宗欲》角色介绍朱思俊沙害杜光荣的手法：接到杜光荣的电话之后，朱思俊约对方在地下室见面细聊。朱思俊出门时携带了老冰棍（放在保温杯中）、白砂糖、鱼线
  • 处理标签包裹的字符串，并取出前250字符 周bro 前端javascript开发语言
    //假设这是你的HTML字符串varhtmlString=`这是一个段落。这是一个标题这是另一个段落，包含一些链接。`;//解析HTML字符串并提取文本functionextractTextFromHTML(html){varparser=newDOMParser();vardoc=parser.parseFromString(html,"text/html");vartextContent=do
  • 在模拟游戏《星露谷物语》中，体验一把闪婚需要多长时间？ 爱游戏的萌博士
    我们知道：游戏圈中有许多速通玩家，他们追求尽可能短的时间完成游戏里的某项挑战，“RTA（RealTimeAttack）”就是其中主要的玩法，也就是“从游戏开始到通关画面出现为止所需现实时间尽可能短”。为了增加难度，高手们有时候还给自己设定一些限制，比如：有玩家挑战在“无伤”的前提下通关《塞尔达传说：荒野之息》等等。近日，博士就在海外玩家社群中留意到一项新的游戏速通纪录引发了热议！游戏产品并非《塞尔
  • 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其他