Hot For Coding

  • CSS border-collapse 把表格相邻td的边框合并为一条

    CSS有一个属性border-collapse，这个样式可以让table里相邻td的border合并为一条，这有什么好处呢？最显著的效果，在页面上有一个table，每个td都有border:1px solid #999，看看效果

    使用border-collapse前的效果

    full

    使用后的效果border-collapse: collapse的效果

    full

    ...

    READ ALL

  • 关于NodeJS IO异步的理解

    一直都听说NodeJS有一个非常强大的特性就是IO异步，今天具体总结以下这到底是个什么东西，以做备忘。

    要说到到IO异步首先就要提到两个关键字，IO阻塞和IO非阻塞。

    • 阻塞模式下，一个线程只能处理一项任务，要想提高吞吐量必须通过多线程
    • 非阻塞模式下，一个线程能处理多项任务，依赖事件通知方式

    打个比方，你去银行办理业务，阻塞模式下为了同时处理多个业务，只能另开多个窗口接待多人。非阻塞模式下，在前一个人等待某件事情的间隙，比如客户的身份证被拿去复印了，那么趁这个间隙窗口工作人员可以继续处理后一个人的业务，当后一个人也被某件需要等待的事情耽搁需要等待时就继续处理再后一个人的业务，当在工作人员每处理完一件事情时如果前面复印身份证的被告知身份证复印好了，那么就继续处理第一个客户的事情。

    ...

    READ ALL

  • 关于JavaScript this指向问题

    这是偶然在一次调试中JavaScript发现的问题，把某个对象下的function传入某个函数，然后函数内再调用function，然而这样会导致被传入的function this指向有问题

    var F = function (name) {
  this.name = name; 
};
 
F.prototype.getName = function () {
  return this.name;
};
 
var f = new F('琼台博客');
 
var dosome = function (fun) {
  if (typeof fun === 'function') {
    return fun();
  }
};
 
f.getName();                    // 琼台博客
dosome(f.getName);              // undefined
dosome.apply(f, [f.getName]);   // undefined

    ...

    READ ALL

  • 一道隐藏陷阱的JavaScript面试题

    最近朋友发把一道JavaScript的面试题发我

    var name = "张三";
 
(function () {
  name = "李四";
  var name = "王五";
  console.log(name); 
})();
 
console.log(name);

    虽然他已经知道运行结果，但他还是有点不太明白为什么！按照正常逻辑思维读这道题

    • 声明一个全局变量name=张三
    • 声明一个匿名函数并执行
    • 匿名函数内name=李四 由于不带var关键字所以是修改全局下name
    • 声明一个局部变量name=王五

    ...

    READ ALL

  • 一次愚蠢的firebug调试经历

    之前在firebug下打断点刷新后一直都挺好用，后来又一次不知道怎么了就一直都刷新后断点记录全消失，这点让我很郁闷。于是每次为了断点都需要把页面默认执行的函数停止，然后等进入页面后再找到要断点的地方，再手动执行断点代码处实在累人。并且换了重装firebug、换台电脑都一样，甚至一度怀疑哪里没设置好导致的，为防止以后调试麻烦决定解决下这个问题。

    一开始的思路是在网络上搜索“Firebug断点 刷新消失”居然没有找到任何疑似记录，以为关键字不准确，再缩小为：“Firebug断点”，文章一大堆，并且文章上面都明确指明刷新后断点记录不会消失。。。没辙了！

    ...

    READ ALL

  • 一个纯CSS实现的分类菜单

    动手写了一个纯CSS的分类菜单，貌似还挺好用，可惜就没有添加动态效果了

    full

    点这里看Demo

    index.html

    <!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>分类菜单</title>
    <style type="text/css">
      * {
        margin: 0; 
        padding: 0;
      }

      body {
        font: 14px/1.5 "宋体";
      }

      a {
        text-decoration: none; 
      }

      a:hover {
        color: red; 
      }

      ul {
        position: relative; 
        margin: 50px 0 0 50px;
        width: 300px;
        border: 2px solid #aa9900;
      }

      li {
        height: 30px; 
        line-height: 30px;
        width: 100%;
        text-indent: 1em;
        list-style: none;
        border-top: 1px solid #CCC;
      }

      li:hover,
      li:hover + li,
      li:first-child {
        border-top: none; 
        height: 31px;
        line-height: 31px;
      }

      div.box {
        width: 300px; 
        height: calc(100% + 2px);
        display: none;
        left: 300px;
        top: -2px;

        border: 1px solid #999;
        position: absolute;
        z-index: 1;

        background: #EEE;
      }

      div.item {
        position: relative; 
        width: 100%;
        height: 100%;
      }

      li:hover div.box {
        display: block;
      }

      li div.item span.link { 
        display: block;
        width: calc(100% - 1px);
        height: calc(100% - 2px);
        position: absolute;
        left: 0;
        top: 0;
        border-style: solid;
        border-color: #FFF;
        border-width: 1px 0 1px 1px;
        z-index: 2;
      }

      li:hover div.item span.link {
        border-color: #999;
        background: #EEE;
        width: 100%;
      }

      span.icon {
        position: absolute;
        right: 10px;
        top: 0;
        color: #999;
        font-weight: bold;
        font-family: serif;
      }

      li:hover a {
        color: #270; 
      }

    </style>
  </head>
  <body>
    <ul>
      <li>
        <div class="item">
          <span class="link">
            <a href="#">分类1</a> 
          </span>
          <span class="icon">&gt;</span>
        </div>
        <div class="box">分类1 详细信息</div>
      </li> 

      <li>
        <div class="item">
          <span class="link">
            <a href="#">分类2</a> 
          </span>
          <span class="icon">&gt;</span>
        </div>
        <div class="box">分类2 详细信息</div>
      </li> 

      <li>
        <div class="item">
          <span class="link">
            <a href="#">分类3</a> 
          </span>
          <span class="icon">&gt;</span>
        </div>
        <div class="box">分类3 详细信息</div>
      </li> 

      <li>
        <div class="item">
          <span class="link">
            <a href="#">分类4</a> 
          </span>
          <span class="icon">&gt;</span>
        </div>
        <div class="box">分类4 详细信息</div>
      </li> 

      <li>
        <div class="item">
          <span class="link">
            <a href="#">分类5</a> 
          </span>
          <span class="icon">&gt;</span>
        </div>
        <div class="box">分类5 详细信息</div>
      </li> 

      <li>
        <div class="item">
          <span class="link">
            <a href="#">分类6</a> 
          </span>
          <span class="icon">&gt;</span>
        </div>
        <div class="box">分类6 详细信息</div>
      </li> 

      <li>
        <div class="item">
          <span class="link">
            <a href="#">分类7</a> 
          </span>
          <span class="icon">&gt;</span>
        </div>
        <div class="box">分类7 详细信息</div>
      </li> 

      <li>
        <div class="item">
          <span class="link">
            <a href="#">分类8</a> 
          </span>
          <span class="icon">&gt;</span>
        </div>
        <div class="box">分类8 详细信息</div>
      </li> 

      <li>
        <div class="item">
          <span class="link">
            <a href="#">分类9</a> 
          </span>
          <span class="icon">&gt;</span>
        </div>
        <div class="box">分类9 详细信息</div>
      </li> 
    </ul> 
  </body>
</html>

    ...

    READ ALL

  • CSS inline-block后有换行符变成空白间隔bug

    以前都使用display: block很少使用display: inline-block，近期写样式有时候为了方便我也使用inline-block，之后发现有问题，每个元素之间多了一个空白

    <!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" /> 
    <style type="text/css"> 
      * {
        margin: 0; 
        padding: 0;
      }

      span {
        margin: 0; 
        padding: 0;
        display: inline-block;
        width: 50px;
        height: 20px;
        background: red;
      } 
    </style>
  </head>
  <body>
    <span></span>
    <span></span>  
    <span></span> 
    <span></span> 
  </body>
</html>

    ...

    READ ALL

  • Java字符串与数字互转

    字符串转数字

    String s = "8532";

short t = Short.parseShort(s);
int i = Integer.parseInt(s);
long l = Long.parseLong(s);
Float f = Float.parseFloat(s);
Double d = Double.parseDouble(s);

    如果字符串转换不成功会抛出一个运行时错误，需要注意一下

    数字转字符串

    // 其中 something 为任意一种数字类型
String s = String.valueOf(something);

// 如果确保 something 不会为null
String s = something.toString();

// 还有一种
String s = something + "";

    ...

    READ ALL

  • Nginx 403 Forbidden 问题

    今天在一个新的环境上安装Nginx，结果访问的都是403

    full

    通常显示403我立马都会想到路径配置不对，但我仔细看了一下，目录路径没问题

    nginx.conf

    server {
  listen       80;
  server_name  localhost;

  #charset koi8-r;

  #access_log  logs/host.access.log  main;

  location / {
    root   /root/html;
    index  index.html index.htm;
  }
}

    ...

    READ ALL

  • cwRsync命令行带密码

    full

    cwRsync是基于Win平台的rsync解决方法，但经过测试有一个选项参数--password-file始终都不起作用

    @ECHO OFF
D:
cd "\Program Files (x86)\cwRsync\bin"
rsync ^
-vzrtopg ^
--progress ^
--delete ^
/cygdrive/d/Workspace/Aptana/demo/ ^
user@192.168.1.48::demo ^
--port=7876 ^
--password-file=/cygdrive/d/Workspace/Aptana/demo/rsyncd/passwd.txt ^
--exclude-from=/cygdrive/d/Workspace/Aptana/demo/rsyncd/filter.txt
pause

    ...

    READ ALL

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54