BlackAlpha
BlackAlpha

八皇后问题网页图形版本

这学期给学生讲《Web程序设计》，用JavaScript写了一个八皇后问题网页图形版本，采用了递归回溯算法，下面是网页截图： 

算法并不复杂，通过DOM控制HTML标签来显示图形，棋盘背景采用了表格，当然也可以采用JavaScript来生成，但并不会使网页代码精简很多。

之所以没有采用动态演示求解过程，是因为JavaScript无法实现类似线程的Sleep休眠功能来延时，更无法实现信号量、旗标等复杂的多线程功能，而JavaScript提供的setTimeout()和setInterval()方法实际上都是在浏览器中新开一个线程，并不会使脚本执行暂停，唯一的方法是为每一步骤单独编写函数，但那样做会使得程序异常晦涩难懂。当然，可能有人试图通过死循环来定时，但会导致程序无响应，而且也无法更新页面内容，显然这样做是一个非常糟糕的办法。

这是所有代码，可以直接保存成网页文件本地运行： 

  
  
  
  
    
   
   
   
   
  1. <html xmlns="http://www.w3.org/1999/xhtml"> 
    2. 
   
   
   
   
  2. <head> 
    3. 
   
   
   
   
  3.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    4. 
   
   
   
   
  4.     <title>Eight Queens Puzzle(Recursive algorithm) - 八皇后问题（递归算法）</title> 
    5. 
   
   
   
   
  5.     <style type="text/css"> 
    6. 
   
   
   
   
  6.         body {  
    7. 
   
   
   
   
  7.             background-color: #ffffc0;  
    8. 
   
   
   
   
  8.         }  
    9. 
   
   
   
   
  9.         p {  
    10. 
   
   
   
   
  10.             text-align: center;  
    11. 
   
   
   
   
  11.         }  
    12. 
   
   
   
   
  12.         table {  
    13. 
   
   
   
   
  13.             border-width: 8px;  
    14. 
   
   
   
   
  14.             border-color: #604040;  
    15. 
   
   
   
   
  15.             border-style: solid;  
    16. 
   
   
   
   
  16.             background-color: #ffffff;  
    17. 
   
   
   
   
  17.         }  
    18. 
   
   
   
   
  18.         td {  
    19. 
   
   
   
   
  19.             text-align: center;  
    20. 
   
   
   
   
  20.             vertical-align: middle;  
    21. 
   
   
   
   
  21.             width: 70px;  
    22. 
   
   
   
   
  22.             height: 70px;  
    23. 
   
   
   
   
  23.         }  
    24. 
   
   
   
   
  24.         td.b {  
    25. 
   
   
   
   
  25.             background-color: #000000;  
    26. 
   
   
   
   
  26.         }  
    27. 
   
   
   
   
  27.     </style> 
    28. 
   
   
   
   
  28.     <script type="text/javascript"> 
    29. 
   
   
   
   
  29.         var Q = new Array(8); //八皇后所在的列位置  
    30. 
   
   
   
   
  30.  
    31. 
   
   
   
   
  31.         // 判断第n个皇后与前面的n-1个皇后是否冲突  
    32. 
   
   
   
   
  32.         function Clash(n) {  
    33. 
   
   
   
   
  33.             var flag = false; //冲突标志  
    34. 
   
   
   
   
  34.             var i = 0; //从第0行逐行判断  
    35. 
   
   
   
   
  35.             while ((i < n) && !flag) {  
    36. 
   
   
   
   
  36.                 flag = (Q[n] == Q[i]) || (Math.abs(Q[n] - Q[i]) == (n - i)); //在同一列或相同的对角线即为冲突  
    37. 
   
   
   
   
  37.                 i++;  
    38. 
   
   
   
   
  38.             }  
    39. 
   
   
   
   
  39.             return flag;  
    40. 
   
   
   
   
  40.         }  
    41. 
   
   
   
   
  41.  
    42. 
   
   
   
   
  42.         //搜索第n个皇后的位置  
    43. 
   
   
   
   
  43.         function QSeek(n) {  
    44. 
   
   
   
   
  44.             //判断是否已经回溯到了第一个皇后之前，即已经找到了所有解  
    45. 
   
   
   
   
  45.             if (n >= 0) {  
    46. 
   
   
   
   
  46.                 Q[n]++; //将该位置的皇后右移一个位置  
    47. 
   
   
   
   
  47.                 if (Q[n] < 8) //当前行的皇后右移未超出范围  
    48. 
   
   
   
   
  48.                 {  
    49. 
   
   
   
   
  49.                     if (Clash(n)) //冲突则继续搜索当前行的皇后位置  
    50. 
   
   
   
   
  50.                         return QSeek(n)  
    51. 
   
   
   
   
  51.                     else //不冲突则当前行搜索完成  
    52. 
   
   
   
   
  52.                         return true;  
    53. 
   
   
   
   
  53.                 }  
    54. 
   
   
   
   
  54.                 else //当前行无法安放，递归回溯  
    55. 
   
   
   
   
  55.                 {  
    56. 
   
   
   
   
  56.                     Q[n] = -1; //删除当前行的皇后  
    57. 
   
   
   
   
  57.                     if (QSeek(n - 1)) //递归回溯  
    58. 
   
   
   
   
  58.                         return QSeek(n) //在前一行搜索成功时，再搜索当前行  
    59. 
   
   
   
   
  59.                     else  
    60. 
   
   
   
   
  60.                         return false; //无解  
    61. 
   
   
   
   
  61.                 }  
    62. 
   
   
   
   
  62.             }  
    63. 
   
   
   
   
  63.             else  
    64. 
   
   
   
   
  64.                 return false; //无解  
    65. 
   
   
   
   
  65.         }  
    66. 
   
   
   
   
  66.  
    67. 
   
   
   
   
  67.         var pic = "f0"; //默认的皇后图片字符串  
    68. 
   
   
   
   
  68.  
    69. 
   
   
   
   
  69.         //刷新皇后图片  
    70. 
   
   
   
   
  70.         function showQueens() {  
    71. 
   
   
   
   
  71.             //清除原有图像，即清除所有TD标记中的内容  
    72. 
   
   
   
   
  72.             var tds = document.getElementsByTagName("TD");  
    73. 
   
   
   
   
  73.             for (var i = 0; i < tds.length; i++)  
    74. 
   
   
   
   
  74.                 tds[i].innerHTML = "";  
    75. 
   
   
   
   
  75.             //绘制新图像  
    76. 
   
   
   
   
  76.             for (var i = 0; i < 8; i++) {  
    77. 
   
   
   
   
  77.                 eval("r" + i + "c" + Q[i] + ".innerHTML = \"<img src=\\\"" + pic + ".png\\\" />\";");  
    78. 
   
   
   
   
  78.             }  
    79. 
   
   
   
   
  79.         }  
    80. 
   
   
   
   
  80.  
    81. 
   
   
   
   
  81.         var count = 1; //记录解的个数  
    82. 
   
   
   
   
  82.  
    83. 
   
   
   
   
  83.         function Queens() {  
    84. 
   
   
   
   
  84.             seekbtn.disabled = true; //禁用按钮  
    85. 
   
   
   
   
  85.             seekpic.disabled = true; //禁用下拉列表  
    86. 
   
   
   
   
  86.             if (count == 1) { //求第一组解时需搜索前7个皇后的位置  
    87. 
   
   
   
   
  87.                 for (var i = 0; i < 7; i++)  
    88. 
   
   
   
   
  88.                     QSeek(i);  
    89. 
   
   
   
   
  89.             }  
    90. 
   
   
   
   
  90.             if (QSeek(7)) {  
    91. 
   
   
   
   
  91.                 showQueens();  
    92. 
   
   
   
   
  92.                 seekbtn.value = "已经搜索到第" + count + "组解，准备搜索第" + ++count + "组解...";  
    93. 
   
   
   
   
  93.                 seekpic.disabled = false; //恢复下拉列表  
    94. 
   
   
   
   
  94.                 seekbtn.disabled = false; //恢复按钮  
    95. 
   
   
   
   
  95.                 seekbtn.focus(); //设置焦点到按钮  
    96. 
   
   
   
   
  96.             }  
    97. 
   
   
   
   
  97.             else  
    98. 
   
   
   
   
  98.                 seekbtn.value = "全部解已经搜索完成，共" + (count - 1) + "组！";  
    99. 
   
   
   
   
  99.         }  
    100. 
   
   
   
   
  100.     </script> 
    101. 
   
   
   
   
  101. </head> 
    102. 
   
   
   
   
  102. <body> 
    103. 
   
   
   
   
  103.     <p> 
    104. 
   
   
   
   
  104.         Eight Queens Puzzle (Recursive algorithm) - 八皇后问题（递归算法）<br /> 
    105. 
   
   
   
   
  105.         Mengliao Software Studio(Baiyu) - 梦辽软件工作室（白宇）<br /> 
    106. 
   
   
   
   
  106.         Copyright 2011, All right reserved. - 版权所有(C) 2011<br /> 
    107. 
   
   
   
   
  107.         2011.04.04</p> 
    108. 
   
   
   
   
  108.     <center> 
    109. 
   
   
   
   
  109.         <table cellpadding="0" cellspacing="0"> 
    110. 
   
   
   
   
  110.             <tr> 
    111. 
   
   
   
   
  111.                 <td id="r0c0"></td> 
    112. 
   
   
   
   
  112.                 <td class="b" id="r0c1"></td> 
    113. 
   
   
   
   
  113.                 <td id="r0c2"></td> 
    114. 
   
   
   
   
  114.                 <td class="b" id="r0c3"></td> 
    115. 
   
   
   
   
  115.                 <td id="r0c4"></td> 
    116. 
   
   
   
   
  116.                 <td class="b" id="r0c5"></td> 
    117. 
   
   
   
   
  117.                 <td id="r0c6"></td> 
    118. 
   
   
   
   
  118.                 <td class="b" id="r0c7"></td> 
    119. 
   
   
   
   
  119.             </tr> 
    120. 
   
   
   
   
  120.             <tr> 
    121. 
   
   
   
   
  121.                 <td class="b" id="r1c0"></td> 
    122. 
   
   
   
   
  122.                 <td id="r1c1"></td> 
    123. 
   
   
   
   
  123.                 <td class="b" id="r1c2"></td> 
    124. 
   
   
   
   
  124.                 <td id="r1c3"></td> 
    125. 
   
   
   
   
  125.                 <td class="b" id="r1c4"></td> 
    126. 
   
   
   
   
  126.                 <td id="r1c5"></td> 
    127. 
   
   
   
   
  127.                 <td class="b" id="r1c6"></td> 
    128. 
   
   
   
   
  128.                 <td id="r1c7"></td> 
    129. 
   
   
   
   
  129.             </tr> 
    130. 
   
   
   
   
  130.             <tr> 
    131. 
   
   
   
   
  131.                 <td id="r2c0"></td> 
    132. 
   
   
   
   
  132.                 <td class="b" id="r2c1"></td> 
    133. 
   
   
   
   
  133.                 <td id="r2c2"></td> 
    134. 
   
   
   
   
  134.                 <td class="b" id="r2c3"></td> 
    135. 
   
   
   
   
  135.                 <td id="r2c4"></td> 
    136. 
   
   
   
   
  136.                 <td class="b" id="r2c5"></td> 
    137. 
   
   
   
   
  137.                 <td id="r2c6"></td> 
    138. 
   
   
   
   
  138.                 <td class="b" id="r2c7"></td> 
    139. 
   
   
   
   
  139.             </tr> 
    140. 
   
   
   
   
  140.             <tr> 
    141. 
   
   
   
   
  141.                 <td class="b" id="r3c0"></td> 
    142. 
   
   
   
   
  142.                 <td id="r3c1"></td> 
    143. 
   
   
   
   
  143.                 <td class="b" id="r3c2"></td> 
    144. 
   
   
   
   
  144.                 <td id="r3c3"></td> 
    145. 
   
   
   
   
  145.                 <td class="b" id="r3c4"></td> 
    146. 
   
   
   
   
  146.                 <td id="r3c5"></td> 
    147. 
   
   
   
   
  147.                 <td class="b" id="r3c6"></td> 
    148. 
   
   
   
   
  148.                 <td id="r3c7"></td> 
    149. 
   
   
   
   
  149.             </tr> 
    150. 
   
   
   
   
  150.             <tr> 
    151. 
   
   
   
   
  151.                 <td id="r4c0"></td> 
    152. 
   
   
   
   
  152.                 <td class="b" id="r4c1"></td> 
    153. 
   
   
   
   
  153.                 <td id="r4c2"></td> 
    154. 
   
   
   
   
  154.                 <td class="b" id="r4c3"></td> 
    155. 
   
   
   
   
  155.                 <td id="r4c4"></td> 
    156. 
   
   
   
   
  156.                 <td class="b" id="r4c5"></td> 
    157. 
   
   
   
   
  157.                 <td id="r4c6"></td> 
    158. 
   
   
   
   
  158.                 <td class="b" id="r4c7"></td> 
    159. 
   
   
   
   
  159.             </tr> 
    160. 
   
   
   
   
  160.             <tr> 
    161. 
   
   
   
   
  161.                 <td class="b" id="r5c0"></td> 
    162. 
   
   
   
   
  162.                 <td id="r5c1"></td> 
    163. 
   
   
   
   
  163.                 <td class="b" id="r5c2"></td> 
    164. 
   
   
   
   
  164.                 <td id="r5c3"></td> 
    165. 
   
   
   
   
  165.                 <td class="b" id="r5c4"></td> 
    166. 
   
   
   
   
  166.                 <td id="r5c5"></td> 
    167. 
   
   
   
   
  167.                 <td class="b" id="r5c6"></td> 
    168. 
   
   
   
   
  168.                 <td id="r5c7"></td> 
    169. 
   
   
   
   
  169.             </tr> 
    170. 
   
   
   
   
  170.             <tr> 
    171. 
   
   
   
   
  171.                 <td id="r6c0"></td> 
    172. 
   
   
   
   
  172.                 <td class="b" id="r6c1"></td> 
    173. 
   
   
   
   
  173.                 <td id="r6c2"></td> 
    174. 
   
   
   
   
  174.                 <td class="b" id="r6c3"></td> 
    175. 
   
   
   
   
  175.                 <td id="r6c4"></td> 
    176. 
   
   
   
   
  176.                 <td class="b" id="r6c5"></td> 
    177. 
   
   
   
   
  177.                 <td id="r6c6"></td> 
    178. 
   
   
   
   
  178.                 <td class="b" id="r6c7"></td> 
    179. 
   
   
   
   
  179.             </tr> 
    180. 
   
   
   
   
  180.             <tr> 
    181. 
   
   
   
   
  181.                 <td class="b" id="r7c0"></td> 
    182. 
   
   
   
   
  182.                 <td id="r7c1"></td> 
    183. 
   
   
   
   
  183.                 <td class="b" id="r7c2"></td> 
    184. 
   
   
   
   
  184.                 <td id="r7c3"></td> 
    185. 
   
   
   
   
  185.                 <td class="b" id="r7c4"></td> 
    186. 
   
   
   
   
  186.                 <td id="r7c5"></td> 
    187. 
   
   
   
   
  187.                 <td class="b" id="r7c6"></td> 
    188. 
   
   
   
   
  188.                 <td id="r7c7"></td> 
    189. 
   
   
   
   
  189.             </tr> 
    190. 
   
   
   
   
  190.         </table> 
    191. 
   
   
   
   
  191.         <br />皇后图片选择：  
    192. 
   
   
   
   
  192.         <select id="seekpic" disabled="disabled" onchange="JavaScript: pic=this.value; showQueens();"> 
    193. 
   
   
   
   
  193.             <option value="f0" selected="selected">图片一</option> 
    194. 
   
   
   
   
  194.             <option value="f1">图片二</option> 
    195. 
   
   
   
   
  195.             <option value="f2">图片三</option> 
    196. 
   
   
   
   
  196.             <option value="f3">图片四</option> 
    197. 
   
   
   
   
  197.             <option value="f4">图片五</option> 
    198. 
   
   
   
   
  198.             <option value="f5">图片六</option> 
    199. 
   
   
   
   
  199.             <option value="f6">图片七</option> 
    200. 
   
   
   
   
  200.             <option value="f7">图片八</option> 
    201. 
   
   
   
   
  201.             <option value="f8">图片九</option> 
    202. 
   
   
   
   
  202.             <option value="f9">图片十</option> 
    203. 
   
   
   
   
  203.         </select>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;  
    204. 
   
   
   
   
  204.         <input style="width: 300px; height: 25px" type="button" id="seekbtn" value="准备搜索第1组解..." onclick="Queens()" /> 
    205. 
   
   
   
   
  205.     </center> 
    206. 
   
   
   
   
  206. </body> 
    207. 
   
   
   
   
  207. </html> 
    208.

标准的递归回溯算法，在求的每一组解后将末行的皇后向后移动一个位置继续求解，自然就是下一组解了，当所有解（共92组）求出后，将导致主函数返回false。

你可能感兴趣的:(JavaScript,职场,八皇后,休闲,递归回溯算法)

  • 《投行人生》读书笔记 小蘑菇的树洞
    《投行人生》----作者詹姆斯-A-朗德摩根斯坦利副主席40年的职业洞见-很短小精悍的篇幅，比较适合初入职场的新人。第一部分成功的职业生涯需要规划1.情商归为适应能力分享与协作同理心适应能力，更多的是自我意识，你有能力识别自己的情并分辨这些情绪如何影响你的思想和行为。2.对于初入职场的人的建议，细节，截止日期和数据很重要截止日期，一种有效的方法是请老板为你所有的任务进行优先级排序。和老板喝咖啡的好
  • Long类型前后端数据不一致 igotyback 前端
    响应给前端的数据浏览器控制台中response中看到的Long类型的数据是正常的到前端数据不一致前后端数据类型不匹配是一个常见问题，尤其是当后端使用Java的Long类型（64位）与前端JavaScript的Number类型（最大安全整数为2^53-1，即16位）进行数据交互时，很容易出现精度丢失的问题。这是因为JavaScript中的Number类型无法安全地表示超过16位的整数。为了解决这个问
  • 2022-04-18 Apbenz
    语重心长的和我说，不要老是说不行，人至而立之年危机四伏，内在的，外在的，感觉就是心力憔悴，让人无所适从。面对职场的无情，突然好羡慕干体力劳动的外卖小哥。难道命运是想让我去送外卖了吗？干体力活才能让我活下去？fastadmin打卡成功,淘宝金币任务完成。ㅏㅓㅗㅜㅡㅣㅐㅔㅑㅕㅛㅠㅢㅒㅖY行。야자여자요리우유의사얘기예
  • DIV+CSS+JavaScript技术制作网页（旅游主题网页设计与制作）云南大理 STU学生网页设计 网页设计期末网页作业html静态网页html5期末大作业网页设计web大作业
    ️精彩专栏推荐作者主页:【进入主页—获取更多源码】web前端期末大作业：【HTML5网页期末作业(1000套)】程序员有趣的告白方式：【HTML七夕情人节表白网页制作(110套)】文章目录二、网站介绍三、网站效果▶️1.视频演示2.图片演示四、网站代码HTML结构代码CSS样式代码五、更多源码二、网站介绍网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。网站程
  • 关于城市旅游的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：做与用户的交互行为文章目录前端学习路线
  • node.js学习 小猿L node.jsnode.js学习vim
    node.js学习实操及笔记温故node.js，node.js学习实操过程及笔记~node.js学习视频node.js官网node.js中文网实操笔记githubcsdn笔记为什么学node.js可以让别人访问我们编写的网页为后续的框架学习打下基础，三大框架vuereactangular离不开node.jsnode.js是什么官网：node.js是一个开源的、跨平台的运行JavaScript的运行
  • 回溯算法-重新安排行程 chirou_ 算法数据结构图论c++图搜索
    leetcode332.重新安排行程这题我还没自己ac过，只能现在凭着刚学完的热乎劲把我对题解的理解记下来。本题我认为对数据结构的考察比较多，用什么数据结构去存数据，去读取数据，都是很重要的。classSolution{private:unordered_map>targets;boolbacktracking(intticketNum,vector&result){//1.确定参数和返回值//2
  • 2024.8.22 Python，链表两数之和，链表快速反转，二叉树的深度，二叉树前中后序遍历，N叉树递归遍历，翻转二叉树 RaidenQ python链表开发语言
    1.链表两数之和输入：l1=[2,4,3],l2=[5,6,4]输出：[7,0,8]解释：342+465=807.示例2：输入：l1=[0],l2=[0]输出：[0]示例3：输入：l1=[9,9,9,9,9,9,9],l2=[9,9,9,9]输出：[8,9,9,9,0,0,0,1]昨天的这个题，用自己的办法写的麻烦的要死，然后刚才一看chat归类的办法，感觉自己像个智障。classListNode
  • 上班族可以做线上副业兼职有哪些？盘点7个适合上班族做的副业兼职！ 高省APP大九
    对于许多上班族来说，工资往往不能满足他们的生活需求，因此许多人开始寻找副业来增加收入。以下是一些适合普通人的副业赚钱路子，希望能给您带来一些灵感。1、做好物推荐现在很多职场人其实有大量的个人时间，只不过这些个人时间比较碎片化，他们不能够很好的利用起来，其实可以利用这些碎片化的时间去做副业，比如做好物推荐。在网上有很多的平台，比如头条抖音等等都开通了一个商品的分销功能，只要你发布相关的视频或者文章，
  • JavaScript 中，深拷贝（Deep Copy）和浅拷贝（Shallow Copy） 跳房子的前端 前端面试javascript开发语言ecmascript
    在JavaScript中，深拷贝（DeepCopy）和浅拷贝（ShallowCopy）是用于复制对象或数组的两种不同方法。了解它们的区别和应用场景对于避免潜在的bugs和高效地处理数据非常重要。以下是对深拷贝和浅拷贝的详细解释，包括它们的概念、用途、优缺点以及实现方式。1.浅拷贝（ShallowCopy）概念定义：浅拷贝是指创建一个新的对象或数组，其中包含了原对象或数组的基本数据类型的值和对引用数
  • 258-各位相加 不胖二十斤不改名zz
    给定一个非负整数num，反复将各个位上的数字相加，直到结果为一位数。输入:38输出:2解释:各位相加的过程为：3+8=11,1+1=2。由于2是一位数，所以返回2。最简单的方法就是递归了。进阶:你可以不使用循环或者递归，且在O(1)时间复杂度内解决这个问题吗？假如一个三位数'abc'，其值大小为s1=100*a+10*b+1*c，经过一次各位相加后，变为s2=a+b+c，减小的差值为(s1-s2)
  • JavaScript `Map` 和 `WeakMap`详细解释 跳房子的前端 JavaScript原生方法javascript前端开发语言
    在JavaScript中，Map和WeakMap都是用于存储键值对的数据结构，但它们有一些关键的不同之处。MapMap是一种可以存储任意类型的键值对的集合。它保持了键值对的插入顺序，并且可以通过键快速查找对应的值。Map提供了一些非常有用的方法和属性来操作这些数据对：set(key,value):将一个键值对添加到Map中。如果键已经存在，则更新其对应的值。get(key):获取指定键的值。如果键
  • 2020年学习什么知识比较好？互联网行业依然是发展较佳 编程仔
    2019年余额已不足，不少职场人心里也在盘点这一年的工作得失，琢磨新一年的奋斗策略，是继续冲刺还是换个跑道？今年跳槽更难吗？image互联网行业一直以相对较丰厚的薪酬和广阔的发展前景吸引着各界人才。但最近，互联网行业寒冬、互联网企业裁员等话题再次引起热议。正在从前些年的高速发展期转向发展调整期的互联网行业真的步入了“寒冬”？该行业依旧具有吸引力吗？什么职位又最热门呢？image互联网行业仍保持较高
  • 切换淘宝最新npm镜像源是 hai40587 npm前端node.js
    切换淘宝最新npm镜像源是一个相对简单的过程，但首先需要明确当前淘宝npm镜像源的状态和最新的镜像地址。由于网络环境和服务更新，镜像源的具体地址可能会发生变化，因此，我将基于当前可获取的信息，提供一个通用的切换步骤，并附上最新的镜像地址（截至回答时）。一、了解npm镜像源npm（NodePackageManager）是JavaScript的包管理器，用于安装、更新和管理项目依赖。由于npm官方仓库
  • Python编程 - 函数进阶 易辰君 Python核心编程python开发语言
    目录前言一、函数参数的高级用法（一）缺省参数（二）命名参数（三）不定长参数二、拆包（一）函数返回值拆包（二）通过星号拆包（三）总结三、匿名函数（一）函数定义（二）使用匿名函数四、递归函数（一）简介（二）基本结构（三）简单示例（四）优缺点总结前言上篇文章主要了解了函数基础，如何定义函数，函数种类以及局部变量和全局变量的差异等，接下来就讲解python函数较为进阶的知识点，若有任何想法欢迎一起沟通讨论
  • leetcode刷题day19|二叉树Part07（235. 二叉搜索树的最近公共祖先、701.二叉搜索树中的插入操作、450.删除二叉搜索树中的节点） 小冉在学习 leetcode算法数据结构
    235.二叉搜索树的最近公共祖先思路：二叉搜索树首先考虑中序遍历。根据二叉搜索树的特性，如果p,q分别在中间节点的左右两边，该中间节点一定是最近公共祖先，如果在同一侧，则递归这一侧即可。递归三部曲：1、传入参数：根节点，p，q，返回节点。2、终止条件：因为p,q一定存在，所以不会遍历到树的最底层，因此可以不写终止条件3、递归逻辑：如果p,q均小于root的值，递归调用左子树；如果p,q均大于roo
  • 研究表明，中年人“失业”成为了趋势，关键原因有这4点 舒山有鹿
    01在职场中，一直存在这么一个定律——35岁中年失业定律。很多人都特别疑惑，35岁还未到中年期，为什么人们会把“中年”跟“失业”挂钩呢？有句话，说得很现实：“35岁之前辞职，叫跳槽；35岁之后辞职，叫失业。”一般来说，35岁失业和40岁失业的本质是差不多的。只要他们还未升到管理层，便被单位辞退，就证明他们只能“另谋出路”了。况且，随着环境的愈发复杂，行业问题的频频发生，线下商业的不景气，那中年人找
  • 极度休闲的一天 淡泊孤峰
    国庆国庆，普天同庆。在家躺着看大家游山玩水，长辈走亲戚，我的微信一天没几条消息，标准结局，习惯了。哈利波特系列电影真不错，童年总幻想着像主角哈利一样，像《龙族》少年楚子航浪迹江湖，风云天下。而现在却败给华为ICT大赛题还有永无止境的代码视频，唉，真可笑！
  • 2020年最新程序员职业发展路线指南，超详细！ 编程流川枫 11编程语言程序员互联网IT职业
    【文章来源微信公众号：每天学编程】01、程序员的特性技术出身的职场人特性很明显，与做市场、业务出身的职场人区别尤其明显。IT行业中常见的一些职场角色：老板、项目经理、产品经理、需求分析师、设计师、开发工程师、运维工程师等。开发工程师具有如下特征：1、逻辑思维清晰、严谨和细腻；但是有时不容易转弯，有些程序员容易较劲、钻牛角尖。2、性格偏内向、不善于沟通、表达和交际；但是在网络聊天工具上，有些显为幽默
  • 高性能javascript--算法和流程控制 海淀萌狗
    -for,while和do-while性能相当-避免使用for-in循环，==除非遍历一个属性量未知的对象==es5:for-in遍历的对象便不局限于数组，还可以遍历对象。原因：for-in每次迭代操作会同时搜索实例或者原型属性，for-in循环的每次迭代都会产生更多开销，因此要比其他循环类型慢，一般速度为其他类型循环的1/7。因此，除非明确需要迭代一个属性数量未知的对象，否则应避免使用for-i
  • 360前端星计划-动画可以这么玩 马小蜗
    动画的基本原理定时器改变对象的属性根据新的属性重新渲染动画functionupdate(context){//更新属性}constticker=newTicker();ticker.tick(update,context);动画的种类1、JavaScript动画操作DOMCanvas2、CSS动画transitionanimation3、SVG动画SMILJS动画的优缺点优点：灵活度、可控性、性能
  • 40岁的java程序员，还有出路吗？ cesske java开发语言
    目录前言一、现状与挑战二、出路与机遇三、案例分析与启示四、结语前言40岁Java程序员的出路：挑战与机遇并存在科技日新月异的今天，IT行业始终保持着高速的发展态势，而Java作为其中的重要一员，其地位依然稳固且充满挑战。对于一位40岁的Java程序员而言，面对职业生涯的“中年危机”，是否还有出路？本文将从多个维度探讨这一问题，旨在为这一群体提供思考和启示。一、现状与挑战职场竞争加剧随着技术的不断发
  • leetcode刷题day13|二叉树Part01（递归遍历、迭代遍历、统一迭代、层序遍历） 小冉在学习 leetcode算法职场和发展
    递归遍历思路：使用递归的方式比较简单。1、递归函数的传参：因为最后输出一个数组，所以需要传入根节点和一个容器，本来想写数组，但发现长度不能确定，所以选择list。2、终止条件：当访问的节点为空时，return3、递归函数的逻辑：先访问一个节点，递归访问其他节点144.二叉树的前序遍历代码如下：classSolution{publicListpreorderTraversal(TreeNoderoo
  • leetcode021-合并两个有序链表 陆阳226
    问题描述将两个升序链表合并为一个新的升序链表并返回。新链表是通过拼接给定的两个链表的所有节点组成的。示例：输入：1->2->4,1->3->4输出：1->1->2->3->4->4解答递归法：每一层减去一个较小的节点，直到某个链表为null递归结束。publicstaticListNodesolution(ListNodel1,ListNodel2){if(l1==null){returnl2;}
  • JavaScript中秋快乐！ Q_w7742 javascript开发语言ecmascript
    我们来实现一个简单的祝福网页~主要的难度在于使用canvas绘图当点击canvas时候，跳出“中秋节快乐”字样，需要注册鼠标单击事件和计时器。首先定义主要函数：初始化当点击canvas之后转到onCanvasClick函数，绘图生成灯笼。functiononCanvasClick(){//事件处理函数context.clearRect(0,0,canvas1.width,canvas1.heigh
  • Nginx从入门到实践(三) 听你讲故事啊
    动静分离动静分离是将网站静态资源（JavaScript，CSS，img等文件）与后台应用分开部署，提高用户访问静态代码的速度，降低对后台应用访问。动静分离的一种做法是将静态资源部署在nginx上，后台项目部署到应用服务器上，根据一定规则静态资源的请求全部请求nginx服务器，达到动静分离的目标。rewrite规则Rewrite规则常见正则表达式Rewrite主要的功能就是实现URL的重写，Ngin
  • 【Death Note】网吧战神之7天爆肝渗透测试死亡笔记_sqlmap在默认情况下除了使用 char() 函数防止出现单引号 2401_84561374 程序员笔记
    网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。需要这份系统化的资料的朋友，可以戳这里获取一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！特殊服务端口2181zookeeper服务未授权访问
  • Nginx的使用场景：构建高效、可扩展的Web架构 张某布响丸辣 nginx前端架构
    Nginx，作为当今最流行的Web服务器和反向代理软件之一，凭借其高性能、稳定性和灵活性，在众多Web项目中扮演着核心角色。无论是个人博客、中小型网站，还是大型企业级应用，Nginx都能提供强大的支持。本文将探讨Nginx的几个主要使用场景，帮助读者理解如何在实际项目中充分利用Nginx的优势。1.静态文件服务对于包含大量静态文件（如HTML、CSS、JavaScript、图片等）的网站，Ngin
  • 前端知识点 ZhangTao_zata 前端javascriptcss
    下面是一个最基本的html代码body{font-family:Arial,sans-serif;margin:20px;}//JavaScriptfunctionthatdisplaysanalertwhencalledfunctionshowMessage(){alert("Hello!Youclickedthebutton.");}MyFirstHTMLPageWelcometoMyPage
  • github中多个平台共存 jackyrong github
    在个人电脑上，如何分别链接比如oschina,github等库呢，一般教程之列的，默认 ssh链接一个托管的而已，下面讲解如何放两个文件 1） 设置用户名和邮件地址 $ git config --global user.name "xx" $ git config --global user.email "[email protected]"
  • ip地址与整数的相互转换(javascript) alxw4616 JavaScript
    //IP转成整型 function ip2int(ip){ var num = 0; ip = ip.split("."); num = Number(ip[0]) * 256 * 256 * 256 + Number(ip[1]) * 256 * 256 + Number(ip[2]) * 256 + Number(ip[3]); n
  • 读书笔记-jquey+数据库+css chengxuyuancsdn htmljqueryoracle
    1、grouping ,group by rollup, GROUP BY GROUPING SETS区别 2、$("#totalTable tbody>tr td:nth-child(" + i + ")").css({"width":tdWidth, "margin":"0px", &q
  • javaSE javaEE javaME == API下载 Array_06 java
    oracle下载各种API文档： http://www.oracle.com/technetwork/java/embedded/javame/embed-me/documentation/javame-embedded-apis-2181154.html JavaSE文档： http://docs.oracle.com/javase/8/docs/api/ JavaEE文档： ht
  • shiro入门学习 cugfy javaWeb框架
    声明本文只适合初学者，本人也是刚接触而已，经过一段时间的研究小有收获，特来分享下希望和大家互相交流学习。 首先配置我们的web.xml代码如下，固定格式，记死就成 <filter>         <filter-name>shiroFilter</filter-name> &nbs
  • Array添加删除方法 357029540 js
         刚才做项目前台删除数组的固定下标值时，删除得不是很完整，所以在网上查了下，发现一个不错的方法，也提供给需要的同学。 //给数组添加删除             Array.prototype.del = function(n){
  • navigation bar 更改颜色 张亚雄 IO
    今天郁闷了一下午，就因为objective-c默认语言是英文，我写的中文全是一些乱七八糟的样子，到不是乱码，但是，前两个自字是粗体，后两个字正常体，这可郁闷死我了，问了问大牛，人家告诉我说更改一下字体就好啦，比如改成黑体，哇塞，茅塞顿开。       翻书看，发现，书上有介绍怎么更改表格中文字字体的，代码如下    
  • unicode转换成中文 adminjun unicode编码转换
      在Java程序中总会出现\u6b22\u8fce\u63d0\u4ea4\u5fae\u535a\u641c\u7d22\u4f7f\u7528\u53cd\u9988\uff0c\u8bf7\u76f4\u63a5这个的字符，这是unicode编码，使用时有时候不会自动转换成中文就需要自己转换了使用下面的方法转换一下即可。 /** * unicode 转换成 中文
  • 一站式 Java Web 框架 firefly aijuans Java Web
    Firefly是一个高性能一站式Web框架。 涵盖了web开发的主要技术栈。 包含Template engine、IOC、MVC framework、HTTP Server、Common tools、Log、Json parser等模块。 firefly-2.0_07修复了模版压缩对javascript单行注释的影响，并新增了自定义错误页面功能。 更新日志： 增加自定义系统错误页面功能
  • 设计模式——单例模式 ayaoxinchao 设计模式
    定义          Java中单例模式定义：“一个类有且仅有一个实例，并且自行实例化向整个系统提供。”   分析          从定义中可以看出单例的要点有三个：一是某个类只能有一个实例；二是必须自行创建这个实例；三是必须自行向系统提供这个实例。   &nb
  • Javascript 多浏览器兼容性问题及解决方案 BigBird2012 JavaScript
    不论是网站应用还是学习js,大家很注重ie与firefox等浏览器的兼容性问题，毕竟这两中浏览器是占了绝大多数。 一、document.formName.item(”itemName”) 问题 问题说明：IE下，可以使用 document.formName.item(”itemName”) 或 document.formName.elements ["elementName&quo
  • JUnit-4.11使用报java.lang.NoClassDefFoundError: org/hamcrest/SelfDescribing错误 bijian1013 junit4.11单元测试
            下载了最新的JUnit版本，是4.11，结果尝试使用发现总是报java.lang.NoClassDefFoundError: org/hamcrest/SelfDescribing这样的错误，上网查了一下，一般的解决方案是，换一个低一点的版本就好了。还有人说，是缺少hamcrest的包。去官网看了一下，如下发现：    
  • [Zookeeper学习笔记之二]Zookeeper部署脚本 bit1129 zookeeper
    Zookeeper伪分布式安装脚本(此脚本在一台机器上创建Zookeeper三个进程，即创建具有三个节点的Zookeeper集群。这个脚本和zookeeper的tar包放在同一个目录下，脚本中指定的名字是zookeeper的3.4.6版本，需要根据实际情况修改)：   #!/bin/bash #!!!Change the name!!! #The zookeepe
  • 【Spark八十】Spark RDD API二 bit1129 spark
    coGroup package spark.examples.rddapi import org.apache.spark.{SparkConf, SparkContext} import org.apache.spark.SparkContext._ object CoGroupTest_05 { def main(args: Array[String]) { v
  • Linux中编译apache服务器modules文件夹缺少模块(.so)的问题 ronin47 modules
    在modules目录中只有httpd.exp，那些so文件呢？ 我尝试在fedora core 3中安装apache 2. 当我解压了apache 2.0.54后使用configure工具并且加入了 --enable-so 或者 --enable-modules=so (两个我都试过了) 去make并且make install了。我希望在/apache2/modules/目录里有各种模块，
  • Java基础-克隆 BrokenDreams java基础
            Java中怎么拷贝一个对象呢？可以通过调用这个对象类型的构造器构造一个新对象，然后将要拷贝对象的属性设置到新对象里面。Java中也有另一种不通过构造器来拷贝对象的方式，这种方式称为 克隆。         Java提供了java.lang.
  • 读《研磨设计模式》-代码笔记-适配器模式-Adapter bylijinnan java设计模式
    声明： 本文只为方便我个人查阅和理解，详细的分析以及源代码请移步 原作者的博客http://chjavach.iteye.com/ package design.pattern; /* * 适配器模式解决的主要问题是，现有的方法接口与客户要求的方法接口不一致 * 可以这样想，我们要写这样一个类（Adapter）: * 1.这个类要符合客户的要求 ---> 那显然要
  • HDR图像PS教程集锦&心得 cherishLC PS
    HDR是指高动态范围的图像，主要原理为提高图像的局部对比度。 软件有photomatix和nik hdr efex。 一、教程 叶明在知乎上的回答： http://www.zhihu.com/question/27418267/answer/37317792 大意是修完后直方图最好是等值直方图，方法是HDR软件调一遍，再结合不透明度和蒙版细调。 二、心得 1、去除阴影部分的
  • maven-3.3.3 mvn archetype 列表 crabdave ArcheType
    maven-3.3.3 mvn archetype 列表 可以参考最新的：http://repo1.maven.org/maven2/archetype-catalog.xml   [INFO] Scanning for projects... [INFO]                
  • linux shell 中文件编码查看及转换方法 daizj shell中文乱码vim文件编码
    一、查看文件编码。     在打开文件的时候输入:set fileencoding     即可显示文件编码格式。 二、文件编码转换     1、在Vim中直接进行转换文件编码,比如将一个文件转换成utf-8格式       &
  • MySQL--binlog日志恢复数据 dcj3sjt126com binlog
    恢复数据的重要命令如下 mysql> flush logs; 默认的日志是mysql-bin.000001，现在刷新了重新开启一个就多了一个mysql-bin.000002                  
  • 数据库中数据表数据迁移方法 dcj3sjt126com sql
    刚开始想想好像挺麻烦的，后来找到一种方法了，就SQL中的 INSERT 语句，不过内容是现从另外的表中查出来的，其实就是 MySQL中INSERT INTO SELECT的使用   下面看看如何使用   语法：MySQL中INSERT INTO SELECT的使用 1. 语法介绍       有三张表a、b、c，现在需要从表b
  • Java反转字符串 dyy_gusi java反转字符串
           前几天看见一篇文章，说使用Java能用几种方式反转一个字符串。首先要明白什么叫反转字符串，就是将一个字符串到过来啦，比如"倒过来念的是小狗"反转过来就是”狗小是的念来过倒“。接下来就把自己能想到的所有方式记录下来了。 1、第一个念头就是直接使用String类的反转方法，对不起，这样是不行的，因为Stri
  • UI设计中我们为什么需要设计动效 gcq511120594 UIlinux
    随着国际大品牌苹果和谷歌的引领，最近越来越多的国内公司开始关注动效设计了，越来越多的团队已经意识到动效在产品用户体验中的重要性了，更多的UI设计师们也开始投身动效设计领域。 但是说到底，我们到底为什么需要动效设计？或者说我们到底需要什么样的动效？做动效设计也有段时间了，于是尝试用一些案例，从产品本身出发来说说我所思考的动效设计。 一、加强体验舒适度 嗯，就是让用户更加爽更加爽的用
  • JBOSS服务部署端口冲突问题 HogwartsRow java应用服务器jbossserverEJB3
    服务端口冲突问题的解决方法，一般修改如下三个文件中的部分端口就可以了。   1、jboss5/server/default/conf/bindingservice.beans/META-INF/bindings-jboss-beans.xml   2、./server/default/deploy/jbossweb.sar/server.xml   3、.
  • 第三章 Redis/SSDB+Twemproxy安装与使用 jinnianshilongnian ssdbreidstwemproxy
    目前对于互联网公司不使用Redis的很少，Redis不仅仅可以作为key-value缓存，而且提供了丰富的数据结果如set、list、map等，可以实现很多复杂的功能；但是Redis本身主要用作内存缓存，不适合做持久化存储，因此目前有如SSDB、ARDB等，还有如京东的JIMDB，它们都支持Redis协议，可以支持Redis客户端直接访问；而这些持久化存储大多数使用了如LevelDB、RocksD
  • ZooKeeper原理及使用 liyonghui160com
               ZooKeeper是Hadoop Ecosystem中非常重要的组件，它的主要功能是为分布式系统提供一致性协调(Coordination)服务，与之对应的Google的类似服务叫Chubby。今天这篇文章分为三个部分来介绍ZooKeeper，第一部分介绍ZooKeeper的基本原理，第二部分介绍ZooKeeper
  • 程序员解决问题的60个策略 pda158 框架工作单元测试
    根本的指导方针 1. 首先写代码的时候最好不要有缺陷。最好的修复方法就是让 bug 胎死腹中。 良好的单元测试 强制数据库约束 使用输入验证框架 避免未实现的“else”条件 在应用到主程序之前知道如何在孤立的情况下使用   日志 2. print 语句。往往额外输出个一两行将有助于隔离问题。 3. 切换至详细的日志记录。详细的日
  • Create the Google Play Account sillycat Google
    Create the Google Play Account Having a Google account, pay 25$, then you get your google developer account. References: http://developer.android.com/distribute/googleplay/start.html https://p
  • JSP三大指令 vikingwei jsp
    JSP三大指令   一个jsp页面中，可以有0~N个指令的定义！ 1. page --> 最复杂：<%@page language="java" info="xxx"...%>   * pageEncoding和contentType：     > pageEncoding：它
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他