接着上一篇的：js实现element中可清空的输入框（1）继续优化，感兴趣的可以去看看哟，直通车链接：https://www.cnblogs.com/qcq0703/p/14450001.html

实现效果如下图：https://element.eleme.cn/#/zh-CN/component/input

首先说明一下这一个输入框外形

　　1、边框圆角

　　2、可清空按钮

　　3、空值的时候显示请输入内容

　　嗯，就这些了。

其次是有哪些功能

　　1、获得焦点边框高亮

　　2、输入值时可清空图标

　　3、点击清空图标，清空内容

　　4、input失去焦点，不再高亮，也不再显示可清空图标

　　5、将输入值删除为空时，不再显示可清空图标

　　6、input中有值，鼠标移到input输入框时，显示可清空图标

接下来就是实现这些外形和功能了

首先分析一下啊，相信你一眼看上去，就会想到应该有一个input输入框，然后有一个放置图标的节点，然后再有一个div外层将这两个元素包围住，那好先来实现

  1. <div id="my_input_div">
  2.     <input placeholder="请输入内容"/>
  3.     <input style="width: 20px;"/>
  4. </div>

达到效果：

这也不像啊，先别急咱们接下来调整样式。给div加一个边框，然后角度调整一下，宽度调整一下

  1. <div id="my_input_div" style='border: solid 1px silver;width: 200px;border-radius: 4px;'>
  2.     <input placeholder="请输入内容"/>
  3.     <input style="width: 20px;"/>
  4. </div>
  5. </body>

达到效果：

是不是有那么点意思了，接下来再调整两个input的样式，input就别再要边框了，请输入内容你是不是也感觉到太靠左了，那么接下来也调整一下。

  1. <div id="my_input_div" style='border: solid 1px silver;width: 150px;border-radius: 4px;height: 30px;'>
  2.     <input placeholder="请输入内容" style="width: 120px;border: none;margin-left: 4px;height: 30px;"/>
  3.     <input style="width: 20px;border: none;height: 30px;"/>
  4. </div>

达到效果：

这么一看有点那个意思了啊，但是有个问题，input获得焦点会突出高亮的，这样边框就又出现了，截图不太好截，就只能描述了，那么接下就把这个也处理掉。

  1. <div id="my_input_div" style='border: solid 1px silver;width: 150px;border-radius: 4px;height: 30px;'>
  2.     <input placeholder="请输入内容" style="width: 120px;border: none;margin-left: 4px;height: 30px;outline: none;"/>
  3.     <input style="width: 20px;border: none;height: 30px;outline: none;"/>
  4. </div>

效果同上，只不过这次获得焦点之后不会有高亮显示了

接下来就是鼠标，鼠标放上去，最外层边框需要高亮啊。一开始我是用的outline来做的，添加点击事件，然后动态给div绑定outline属性

  1. <div id="my_input_div" style='border: solid 1px silver;width: 150px;border-radius: 4px;height: 30px;'>
  2.     <input id="my_input" placeholder="请输入内容"
  3.         style="width: 120px;border: none;margin-left: 4px;height: 30px;outline: none;"
  4.         onclick="changeColor()"
  5.         />
  6.     <input id="my_button" style="width: 20px;border: none;height: 30px;outline: none;"/>
  7.  
  8.     <script>
  9.         function changeColor(){
  10.             document.getElementById('my_input_div').style.outline = "#409EFF solid 2px"
  11.         }
  12.     </script>
  13. </div>

达到效果：

大家看到没，这个边框是一个矩形，咱们的圆角被破坏了，怎么办呢，查文档，问百度呗，结果发现用这个貌似真的只能是个矩形，具体解决可以看此连接：https://www.cnblogs.com/qcq0703/p/14450674.html，所以只能另辟蹊径

  1. <div id="my_input_div" style='border: solid 1px silver;width: 150px;border-radius: 4px;height: 30px;'>
  2.     <input id="my_input" placeholder="请输入内容"
  3.         style="width: 120px;border: none;margin-left: 4px;height: 30px;outline: none;"
  4.         onclick="changeColor()"
  5.         onblur="hiddenClearNode()"
  6.         />
  7.     <input id="my_button" style="width: 20px;border: none;height: 30px;outline: none;"/>
  8. </div>
  9. <script>
  10.         function changeColor(){
  11.             document.getElementById('my_input_div').style.boxShadow = "0 0 0 2px #409eff"
  12.         }</script>

达到效果：

哇哦，perfect！！！看到标红的没，咱们不用outline了，改用盒子阴影，离了张屠夫，就不信咱还能吃带毛的猪，黑了东方有西方，黑了南方有北方，如果四方都不亮，中间有个大月亮，如果月亮被云遮，你的头上还放光。

咳咳，扯远了，回来继续搞啊。

话说咱们input得到焦点，边框高亮，那么失去焦点就应该现原形了啊。主要是添加了一个失去焦点的事件

  1. <div id="my_input_div" style='border: solid 1px silver;width: 150px;border-radius: 4px;height: 30px;'>
  2.     <input id="my_input" placeholder="请输入内容"
  3.         style="width: 120px;border: none;margin-left: 4px;height: 30px;outline: none;"
  4.         onclick="changeColor()"
  5.         onblur="hiddenClearNode()"
  6.         />
  7.     <input id="my_button" style="width: 20px;border: none;height: 30px;outline: none;"/>
  8. </div>
  9. <script>
  10.         function changeColor(){
  11.             document.getElementById('my_input_div').style.boxShadow = "0 0 0 2px #409eff"
  12.         }
  13.         function hiddenClearNode(){
  14.             document.getElementById('my_input_div').style.boxShadow = "0 0 0"
  15.         }
  16.     </script>

达到效果同上，截图不好展示。

接下来，input输入框中输入值的时候需要显示可清空图标，那就继续调整，咱们先把清空按钮调整出来

  1. <div id="my_input_div" style='border: solid 1px silver;width: 180px;border-radius: 4px;height: 30px;'>
  2.     <input id="my_input" placeholder="请输入内容"
  3.         style="width: 120px;border: none;margin-left: 4px;height: 30px;outline: none;"
  4.         onclick="changeColor()"
  5.         onblur="hiddenClearNode()"
  6.         />
  7.     <input id="my_button" style="width: 50px;border: none;height: 20px;outline: none;color: #409eff;" value="清空"/>
  8. </div>
  9. <script>
  10.         function changeColor(){
  11.             document.getElementById('my_input_div').style.boxShadow = "0 0 0 2px #409eff";
  12.             document.getElementById('my_button').style.
  13.         }
  14.         function hiddenClearNode(){
  15.             document.getElementById('my_input_div').style.boxShadow = "0 0 0"
  16.         }
  17. </script>

达到效果

这么一直显示也不是个事啊，就先把他设置成隐藏，然后再需要他的时候让他显示，不需要就隐藏

  1. <div id="my_input_div" style='border: solid 1px silver;width: 180px;border-radius: 4px;height: 30px;'>
  2.     <input id="my_input" placeholder="请输入内容"
  3.         style="width: 120px;border: none;margin-left: 4px;height: 30px;outline: none;"
  4.         onclick="changeColor()"
  5.         onblur="hiddenClearNode()"
  6.         />
  7.     <input id="my_button"
  8.         style="width: 50px;border: none;height: 20px;outline: none;color: #409eff;visibility: hidden;" value="清空"/>
  9. </div>
  10. <script>
  11.         function changeColor(){
  12.             document.getElementById('my_input_div').style.boxShadow = "0 0 0 2px #409eff";
  13.             document.getElementById('my_button').style.visibility = "visible"
  14.         }
  15.         function hiddenClearNode(){
  16.             document.getElementById('my_input_div').style.boxShadow = "0 0 0"
  17.             document.getElementById('my_button').style.visibility = "hidden"
  18.         }
  19. </script>

效果就不展示了，你懂得。

哎，仔细想一下不对啊，element的可清空组件是在输入框输入的时候才出现可清空的图标的，而且输入的值清零了，清空图标也会消失，那么咱们接着改。

  1. <div id="my_input_div" style='border: solid 1px silver;width: 180px;border-radius: 4px;height: 30px;'>
  2.     <input id="my_input" placeholder="请输入内容"
  3.         style="width: 120px;border: none;margin-left: 4px;height: 30px;outline: none;"
  4.         onclick="changeColor()"
  5.         onblur="hiddenClearNode()"
  6.         oninput="addClearNode()"
  7.         />
  8.     <input id="my_button"
  9.         style="width: 50px;border: none;height: 20px;outline: none;color: #409eff;visibility: hidden;" value="清空"/>
  10. </div>
  11. <script>
  12.         //改变边框颜色
  13.         function changeColor(){
  14.             document.getElementById('my_input_div').style.boxShadow = "0 0 0 2px #409eff";
  15.             //这一行肯定不对了 那么咱们注释掉
  16.             //document.getElementById('my_button').style.visibility = "visible"
  17.         }
  18.         //隐藏清空图标
  19.         function hiddenClearNode(){
  20.             document.getElementById('my_input_div').style.boxShadow = "0 0 0"
  21.             document.getElementById('my_button').style.visibility = "hidden"
  22.         }
  23.         //显示清空图标
  24.         function addClearNode(){
  25.             var value = document.getElementById('my_input').value;
  26.             if(value){
  27.                 document.getElementById('my_button').style.visibility = "visible"
  28.             }else{
  29.                 document.getElementById('my_button').style.visibility = "hidden"
  30.             }
  31.         }
  32. </script>

效果还是不展示了。

接下来，点击清空按钮，就该清空输入的值了，接着搞起，不就加一个点击事件吗，点击清空图标，将input的值清空不就得了，简单

  1. <div id="my_input_div" style='border: solid 1px silver;width: 180px;border-radius: 4px;height: 30px;'>
  2.     <input id="my_input" placeholder="请输入内容"
  3.         style="width: 120px;border: none;margin-left: 4px;height: 30px;outline: none;"
  4.         onclick="changeColor()"
  5.         onblur="hiddenClearNode()"
  6.         oninput="addClearNode()"
  7.         />
  8.     <input id="my_button"
  9.         style="width: 50px;border: none;height: 20px;outline: none;color: #409eff;visibility: hidden;"
  10.         onclick="clearValue()"
  11.         value="清空"/>
  12. </div>
  13. <script>
  14.         //改变边框颜色
  15.         function changeColor(){
  16.             document.getElementById('my_input_div').style.boxShadow = "0 0 0 2px #409eff";
  17.             //这一行肯定不对了 那么咱们注释掉
  18.             //document.getElementById('my_button').style.visibility = "visible"
  19.         }
  20.         //隐藏清空图标
  21.         function hiddenClearNode(){
  22.             document.getElementById('my_input_div').style.boxShadow = "0 0 0"
  23.             document.getElementById('my_button').style.visibility = "hidden"
  24.         }
  25.         //显示清空图标
  26.         function addClearNode(){
  27.             var value = document.getElementById('my_input').value;
  28.             if(value){
  29.                 document.getElementById('my_button').style.visibility = "visible"
  30.             }else{
  31.                 document.getElementById('my_button').style.visibility = "hidden"
  32.             }
  33.         }
  34.         function clearValue(){
  35.             document.getElementById('my_input').value = '';
  36.         }
  37. </script>

额.......发现没起作用呢，为什么不生效呢，仔细想想，是不是想到点什么，咱们input还有一个失去焦点的事件呢，你这边要点击，那边失去焦点，这不就冲突了吗，咋办呢，凉拌！onclick点击事件改为鼠标按下事件，然后调用window.event.preventDefault();阻止默认事件就可以了。

  1. <div id="my_input_div" style='border: solid 1px silver;width: 180px;border-radius: 4px;height: 30px;'>
  2.     <input id="my_input" placeholder="请输入内容"
  3.         style="width: 120px;border: none;margin-left: 4px;height: 30px;outline: none;"
  4.         onclick="changeColor()"
  5.         onblur="hiddenClearNode()"
  6.         oninput="addClearNode()"
  7.         />
  8.     <input id="my_button"
  9.         style="width: 50px;border: none;height: 20px;outline: none;color: #409eff;visibility: hidden;"
  10.         onmousedown="clearValue()"
  11.         value="清空"/>
  12. </div>
  13. <script>
  14.         //改变边框颜色
  15.         function changeColor(){
  16.             document.getElementById('my_input_div').style.boxShadow = "0 0 0 2px #409eff";
  17.             //这一行肯定不对了 那么咱们注释掉
  18.             //document.getElementById('my_button').style.visibility = "visible"
  19.         }
  20.         //隐藏清空图标
  21.         function hiddenClearNode(){
  22.             document.getElementById('my_input_div').style.boxShadow = "0 0 0"
  23.             document.getElementById('my_button').style.visibility = "hidden"
  24.         }
  25.         //显示清空图标
  26.         function addClearNode(){
  27.             var value = document.getElementById('my_input').value;
  28.             if(value){
  29.                 document.getElementById('my_button').style.visibility = "visible"
  30.             }else{
  31.                 document.getElementById('my_button').style.visibility = "hidden"
  32.             }
  33.         }
  34.         function clearValue(){
  35.             window.event.preventDefault();
  36.             document.getElementById('my_input').value = '';
  37.         }
  38. </script>

再仔细研究一下element的可清空输入框，鼠标移上去，如果输入框内容不为空，也会显示，移开又不显示了。这时候需要注意了啊，这时候的事件就不该在input上了，而是最外层的div上面。

  1. <div id="my_input_div"
  2.     style='border: solid 1px silver;width: 180px;border-radius: 4px;height: 30px;'
  3.     onmouseover="addClearNode()";
  4.     onmouseout="hiddenClearNode()"
  5.     >
  6.     <input id="my_input" placeholder="请输入内容"
  7.         style="width: 120px;border: none;margin-left: 4px;height: 30px;outline: none;"
  8.         onclick="changeColor()"
  9.         onblur="hiddenClearNode()"
  10.         oninput="addClearNode()"
  11.         />
  12.     <input id="my_button"
  13.         style="width: 50px;border: none;height: 20px;outline: none;color: #409eff;visibility: hidden;"
  14.         onmousedown="clearValue()"
  15.         value="清空"/>
  16. </div>
  17. <script>
  18.         //改变边框颜色
  19.         function changeColor(){
  20.             document.getElementById('my_input_div').style.boxShadow = "0 0 0 2px #409eff";
  21.             //这一行肯定不对了 那么咱们注释掉
  22.             //document.getElementById('my_button').style.visibility = "visible"
  23.         }
  24.         //隐藏清空图标
  25.         function hiddenClearNode(){
  26.             document.getElementById('my_input_div').style.boxShadow = "0 0 0"
  27.             document.getElementById('my_button').style.visibility = "hidden"
  28.         }
  29.         //显示清空图标
  30.         function addClearNode(){
  31.             var value = document.getElementById('my_input').value;
  32.             if(value){
  33.                 document.getElementById('my_button').style.visibility = "visible"
  34.             }else{
  35.                 document.getElementById('my_button').style.visibility = "hidden"
  36.             }
  37.         }
  38.         function clearValue(){
  39.             window.event.preventDefault();
  40.             document.getElementById('my_input').value = '';
  41.         }
  42. </script>

现在基本效果功能看上去差不多了，看着这个清空俩字是不是感觉很别扭，那么如你所愿，咱们换成图标。还有鼠标放上去是不是应该是一个小手的标志啊。

  1. <div id="my_input_div"
  2.     style='border: solid 1px silver;width: 180px;border-radius: 4px;height: 30px;'
  3.     onmouseover="addClearNode()";
  4.     onmouseout="hiddenClearNode()"
  5.     >
  6.     <input id="my_input" placeholder="请输入内容"
  7.         style="width: 120px;border: none;margin-left: 4px;height: 30px;outline: none;cursor: pointer;"
  8.         onclick="changeColor()"
  9.         onblur="hiddenClearNode()"
  10.         oninput="addClearNode()"
  11.         />
  12.     <input id="my_button"
  13.         style="width: 20px;border: none;height: 20px;outline: none;color: #409eff;visibility: hidden;
  14.         background-image: url(../image/clear.svg);
  15.                 position: absolute;
  16.                 background-repeat: no-repeat;
  17.                 background-size: 12px;
  18.                 top: 18px;
  19.                 left: 140px;
  20.                 display: inline-block;
  21.                 cursor: pointer;" 
  22.         onmousedown="clearValue()"
  23.         />
  24. </div>
  25. <script>
  26.         //改变边框颜色
  27.         function changeColor(){
  28.             document.getElementById('my_input_div').style.boxShadow = "0 0 0 2px #409eff";
  29.             //这一行肯定不对了 那么咱们注释掉
  30.             //document.getElementById('my_button').style.visibility = "visible"
  31.         }
  32.         //隐藏清空图标
  33.         function hiddenClearNode(){
  34.             document.getElementById('my_input_div').style.boxShadow = "0 0 0"
  35.             document.getElementById('my_button').style.visibility = "hidden"
  36.         }
  37.         //显示清空图标
  38.         function addClearNode(){
  39.             var value = document.getElementById('my_input').value;
  40.             if(value){
  41.                 document.getElementById('my_button').style.visibility = "visible"
  42.             }else{
  43.                 document.getElementById('my_button').style.visibility = "hidden"
  44.             }
  45.         }
  46.         function clearValue(){
  47.             window.event.preventDefault();
  48.             document.getElementById('my_input').value = '';
  49.         }
  50. </script>

达到效果：

现在看代码是不是感觉有点乱啊，咱们整理一下，放大招了。

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <title>js实现input，选中高亮、输入值之后可清空、移除鼠标清空按钮隐藏、选中高亮</title>
  6.     </head>
  7.     <body>
  8.         <div id="app">
  9.             <div id="my_input_div"
  10.                 onmouseover="addClearNode()"
  11.                 onmouseout="hiddenClearNode()">
  12.             <input id="my_input" placeholder='请输入内容'
  13.                 oninput="addClearNode()"
  14.                 onclick="changeColor()"
  15.                 onblur="hiddenClearNode()"/>
  16.                 <input id="my_button" onmousedown="clearValue()"/>
  17.             </div>
  18.         </div>
  19.         <script>
  20.             //box-shadow: 0 0 0 20px pink;  通过添加阴影的方式显示边框
  21.             function changeColor(){
  22.                 document.getElementById("my_input_div").style.boxShadow="0 0 0 2px #409eff";
  23.                 //获取inpu的值
  24.                 var value = document.getElementById('my_input').value;
  25.                 //添加判断 如果输入框中有值 则显示清空按钮
  26.                 if(value){
  27.                     document.getElementById("my_button").style.visibility = "visible"
  28.                 }
  29.             }
  30.             //应该输入内容之后使用该事件
  31.             function addClearNode(){
  32.                 var value = document.getElementById('my_input').value;
  33.                 //alert(value)
  34.                 if(value){
  35.                     //将button设置为可见
  36.                     document.getElementById("my_button").style.visibility = 'visible'
  37.                 }else{
  38.                     //将button设置为不可见
  39.                     document.getElementById("my_button").style.visibility = 'hidden'
  40.                 }
  41.                 //选中后div添加选中样式 高亮显示
  42.                 document.getElementById("my_input_div").style.outline="0 0 0 2px #409eff";
  43.             }
  44.             //清空input的值并且保证在获取获取鼠标事件的同时不触发 input失去焦点的事件
  45.             function clearValue(){
  46.                 //解决button获取焦点的同时不触发其他元素失去焦点的事件
  47.                 window.event.preventDefault();
  48.                 document.getElementById("my_input").value = "";
  49.                 document.getElementById("my_button").style.visibility = "hidden";
  50.                 //仍然处于选中状态 div边框突出阴影
  51.                 document.getElementById("my_input_div").style.boxShadow="0 0 0 2px #409eff"
  52.             }
  53.  
  54.             //隐藏清除按钮
  55.             function hiddenClearNode(){
  56.                 document.getElementById("my_button").style.visibility="hidden";
  57.                 //将div阴影设置为0
  58.                 document.getElementById("my_input_div").style.boxShadow="0 0 0"
  59.             }
  60.         </script>
  61.  
  62.         <style>
  63.             #my_input_div{
  64.                 width: 150px;
  65.                 border: 1px solid silver;
  66.                 border-radius: 4px;
  67.                 position: relative;
  68.             }
  69.             #my_input{
  70.                 height: 30px;
  71.                 width:100px;
  72.                 margin-left: 6px;
  73.                 border: none;
  74.                 outline: none;
  75.                 cursor: pointer;
  76.             }
  77.             #my_button{
  78.                 height: 20px;
  79.                 width: 15px;
  80.                 text-align: center;
  81.                 visibility:hidden;
  82.                 border: none;
  83.                 outline: none;
  84.                 color: #409eff;
  85.                 cursor: pointer;
  86.                 background-image: url(../image/clear.svg);
  87.                 background-repeat: no-repeat;
  88.                 background-size: 12px;
  89.                 position: absolute;
  90.                 top: 10px;
  91.                 left: 120px;
  92.                 display: inline-block;
  93.             }
  94.         </style>
  95.     </body>
  96. </html>

以上就是完成这个组件的全部过程了，对了，那个清空图标是怎么找到的，我得说一下，看法宝：https://www.iconfont.cn/search/index?spm=a313x.7781069.1998910419.55&searchType=icon&q=%E6%B8%85%E7%A9%BA

记录一下遇到的难点啊。

　　1、选中凸显边框问题，轮廓总是为矩形，最终使用box-shadow解决了，这个查了很长时间呢。

　　2、事件冲突问题，通过window.event.preventDefault();解决了。

　　3、将清空俩字改为小图标，这个直接百度到了，自己把定位调整了一下就可以了。

看官们，码字不易，你懂得。

js实现element中可清空的输入框（2）的更多相关文章

  1. 纯生js实现Element中input组件的部分功能（慢慢完善）并封装成组件

    现在实现的有基础用法.可清空.密码框,参考链接:https://element.eleme.cn/#/zh-CN/component/input HTML代码:想要测试哪个组件,直接将对应组件解开注释 ...

  2. Js日期选择器并自动加入到输入框中

    <html> <head> <title>Js日期选择器并自动加入到输入框中</title> <meta http-equiv="con ...

  3. js和jquery中有关透明度操作的问题

    在日常开发的网站中,常常会用到设置透明度问题,最简单的就是图片的淡入淡出效果.下面我介绍一下在原生js和jQuery中设置透明度的相关问题和注意点: 1 透明度样式设置       透明度在IE浏览器 ...

  4. js监听input等表单输入框的变化事件oninput

    js监听input等表单输入框的变化事件oninput,手机页面开发中使用到文本框textarea输入字符监听文本框变化计算还可以输入多少字符,如果使用onkeyup的话是无法监听到输入法输入的文本变 ...

  5. ExtJS学习--------Ext.Element中的经常使用事件和其它重要的方法学习（实例）

    经常使用事件: 其它重要方法: 详细实例:(实例结果能够将相应的代码取消凝视进行測试) Ext.onReady(function(){ Ext.create('Ext.panel.Panel',{ t ...

  6. ASP.NET js控制treeview中的checkbox实现单选功能

    ASP.NET js控制treeview中的checkbox实现单选功能 function OnTreeNodeChecked() { var element = window.event.srcEl ...

  7. JS修改标签中的文本且不影响其中标签

    /********************************************************************* * JS修改标签中的文本且不影响其中标签 * 说明: * ...

  8. JS调用AngularJS中的方法

    案例: 在IONIC中使用百度地图的JS版SDK,在该JS相关界面中需要触发点击事件来实现在Ionic的JS中定义的函数,参考方法如下: onclick="var $scope = angu ...

  9. 关于使用element中的popup问题

    高产似母猪..写完上篇看了几集新番就空虚了..零点时分决定爬起来,趁着清明假期能写多写点. 1.前言 我们知道弹出框都是在触发了某种条件后展示,而一个个的新的弹出框的展示,总是覆盖着上一个弹出框.实现 ...

随机推荐

  1. (史上最全)SNP位点与转录因子结合特异性数据库：GVATdb

    众所周知,全基因组关联分析(GWAS)发现的很多变异位点基本为非编码,这些变异位点1)要么调控基因表达(eQTL); 2)要么影响增强子活性; 3)要么影响转录因子(TF)结合特异性; 4)要么啥也不 ...

  2. P1908 逆序对——树状数组&离散化&快读快写の学习

    题目简述: 对于给定的一段正整数序列,逆序对就是序列中 a_i>a_jai​>aj​ 且 i<ji<j 的有序对. 输出序列中逆序对的数目. 知识补充: 树状数组: 这东西就是 ...

  3. 如何安装Python 3.9.1?

    首先打开浏览器输入网址:https://www.python.org或者通过百度搜索python进入Python官网. 选择Downloads,弹出最新版本下载链接,当前版本为3.9.1,如图所示: ...

  4. codeblocks输出中文乱码解决办法

    在使用codeblocks进行编程的时候我发现控制台输出会出现中文乱码,就像这样: 所以很快我就问了老师,解决步骤如下: 一:如果源码是用codeblock编写的,打开Setting->Edit ...

  5. CodeForces 1119D（差分+前缀和+二分）

    题意:给你一个数组,数组每次每个数都+1,有q次查询每一查询+L到+R中出现的所有不重复的数字个数. +L到+R其实就相当于是0到+(R-L+1) 感觉自己写的好啰嗦,直接上代码加注释: 1 #inc ...

  6. 【一天一个基础系列】- java之泛型篇

    简介 说起各种高级语言,不得不谈泛型,当我们在使用java集合的时候,会发现集合有个缺点:把一个对象"丢进"集合之后,集合就会"忘记"这个对象的数据类型,当再次 ...

  7. conda 命令笔记

    1.虚拟环境 conda -V # 查看当前conda 版本 conda update conda # 更新conda conda env list 查看当前已有的虚拟环境 conda create ...

  8. K8S(05)核心插件-ingress(服务暴露)控制器-traefik

    K8S核心插件-ingress(服务暴露)控制器-traefik 1 K8S两种服务暴露方法 前面通过coredns在k8s集群内部做了serviceNAME和serviceIP之间的自动映射,使得不 ...

  9. mybatis(五)mybatis工作流程

    转载:https://www.cnblogs.com/wuzhenzhao/p/11103017.html 先来看一下MyBatis 的编程式使用的方法: public void testMapper ...

  10. Linux错误记录贴

    add-apt-repository 不要写成 add-apt-repository service  不要写成 sevice 总之在打命令的时候要注意不要拼错单词 对于ls命令权限不够我们可以先su ...