Hot For Coding
  • 上传插件神器Plupload

    之前我在博客中曾经介绍过一款基于Flash上传的插件叫SWFUpload,今天,我给大家介绍一款比SWFUpload更强大的上传插件: Plupload。

    大家可以点击这里看看官网的DEMO: http://www.plupload.com/examples/

    本地预览上传图片

    这个功能可以说非常实用,如上面的截图类似,可以在上传之前预览即将要上传的本地图片。可以先把所有要上传的图片都选择以后,再预览图里去做一些处理。

    full

    支持本地修改图片尺寸大小

    resize: {
      width: 200,
      height: 200,
      quality: 90,
      crop: true // crop to exact dimensions
    },
    

    ...

    READ ALL

  • NodeJS读取文件

    NodeJS自带fs(File System)模块用于操作文件相关

    var fs = require('fs');
     
    fs.readFile('file_path', 'utf8', function (err, contents) {
      if (err) {
        return console.error(err);
      }
    
      console.log(contents);
    });
    
    

    以上是非阻塞方式,有些人讨厌JavaScript的回调层层嵌套太难看,也可以使用阻塞方式

    var fs = require('fs');
     
    var contents = fs.readFileSync('file_path', 'utf8');
    console.log(contents);
    

    ...

    READ ALL

  • 一个Nginx简单支持ThinkPHP PATHINFO的例子

    好久没写PHP,最近因为项目指定ThinkPHP于是又重温PHP,由于长期写JavaScript以至于我忘了PHP的数组竟然还可以自定义key...

    ThinkPHP默认不是使用PATHINFO模式,对于目前主流框架,貌似PATHINFO已经成为趋势,更让我意外的是ThinkPHP还能支持路由,有点类似于Python网络框架的路由了。之前在网上看不少人在Nginx开启PATHINFO模式主要修改localhost \.php里的内容,但最近发现了一条更简便的方法

    location / {
      if (!-e $request_filename) {
        rewrite ^(.*)$ /index.php?s=$1 last;
        break;
      }
    }
    

    ...

    READ ALL

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

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

    使用border-collapse前的效果

    full

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

    full

    明显就看出来,如果不使用border-collapse: collapse把两条边框合并为一条的话,相邻两个td的边框相等于1 + 1 = 2px的宽度,曾经包括我在内有部分前端人员这么干

    ...

    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