今天在做后台项目的时候，需要用到图片上传功能。因为功能不是很复杂，对图片上传的要求也不是很高，所以并没有使用上传插件(uploadify)，而是直接使用 input[type="file"] 的传统方式。再加上要在前端做一个选择图片后的本地图片预览功能(兼容IE)。所以就有了以下实现代码。

Html代码：

1
2

<input type="file" name="file" id="file" />
<div id="prewrap"><img id="preimg" style="diplay:none" /></div>

无聊的时候写了一个无限循环的轮播插件，只有切换功能。其实也就是拿来练练手。

主要原理就是，通过克隆轮播元素，以及修改元素的left值来达到效果。

首先是Html结构：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

<div class="slide-wrap" id="slide-wrap">
   <div class="slide-bd" id="slide-bd">
       <ul>
           <li><img src="banner.png" width="650" height="350" alt=""/></li>
           <li><img src="banner.png" width="650" height="350" alt=""/></li>
           <li><img src="banner.png" width="650" height="350" alt=""/></li>
       </ul>
   </div>
   <div class="slide-ctr" id="slide-ctr">
       <ul>
           <li class="active"><a href="javascript:;"></a></li>
           <li><a href="javascript:;"></a></li>
           <li><a href="javascript:;"></a></li>
       </ul>
   </div>
</div>

在前端开发项目里，为了打造一个个性、美观的界面，设计师们经常会设计出很特别的web组件。如：checkbox、select、radio等。

如果不用系统默认的组件，那肯定就要自己开发或者去网上找一些开源的组件。刚好最近项目需要，于是自己也写了一个。

项目源码托管到Github上面，大家可以自由下载研究。目前功能比较简单，后期会提供更多的api。

下面是目前插件提供的接口，因为时间关系，后续会添加：单选功能、设置值、获取值、控件大小等接口。

在刀片机服务器上面一般不止一块硬盘，那么基于Ubuntu操作系统来记录一下，挂载多块物理磁盘的方法。

首先查看当前的硬盘及所属分区的情况。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

sudo fdisk -lu

Disk /dev/sda: 1048.6 GB, 1048576000000 bytes
255 heads, 63 sectors/track, 127482 cylinders, total 2048000000 sectors
Units = sectors of 1 * 512 = 512 bytes
Sector size (logical/physical): 512 bytes / 512 bytes
I/O size (minimum/optimal): 512 bytes / 512 bytes
Disk identifier: 0x00097a19

   Device Boot      Start         End      Blocks   Id  System
/dev/sda1   *        2048  2022852607  1011425280   83  Linux
/dev/sda2      2022854654  2047997951    12571649    5  Extended
/dev/sda5      2022854656  2047997951    12571648   82  Linux swap / Solaris

Disk /dev/sdb: 2950.0 GB, 2950038552576 bytes
255 heads, 63 sectors/track, 358655 cylinders, total 5761794048 sectors
Units = sectors of 1 * 512 = 512 bytes
Sector size (logical/physical): 512 bytes / 512 bytes
I/O size (minimum/optimal): 512 bytes / 512 bytes
Disk identifier: 0x00000000

Disk /dev/sdb doesn't contain a valid partition table

Canvas 是H5的新标签，作用就好比Ps的画布层一样，可以在上面绘制想要的图案，也可以直接导入一张图片到画布上面。

除了绘制图案外，还可以使用Javascript在上面产生动画效果。

下面来编写一个模拟垂直下落的小球动画效果。

首先在页面中插入一个Canvas的标签，Id为“canvas”。

在做移动端开发的时候，经常会有表单提交，例如常用的input输入框。

在Html5中input的type属性增加了，如：number、tel、email等格式。

但是使用type=”number”的时候，Android 4.4.4版本以下的浏览器在input内会出现小方块一样的内容。

针对Android 4.4.4以下的操作系统，我们可以使用Webkit的Css3伪元素来进行修复。

在做移动端开发的时候，例如做一个图片切换效果时就经常需要用到触屏滑动事件。

但是如果单纯为了一个触屏滑动去加载一个 jquery.mobile.js 等类似支持触屏的插件，有点像杀鸡用牛刀的感觉。

出于这个动机，于是自己写了一个轻量级的滑动插件，支持上、下、左、右的滑动事件。同时支持移动端和Pc端。

Lightswipe 源码地址
Lightswipe 插件下载地址
Lightswipe 实验室传送门

今天在迁移数据机器的时候，意外断电导致关机后重新进入GRUB引导界面时不会继续往下运行，必须手动回车后才能进系统。

但是因为我们数据库做的是Virsh Kvm虚拟镜像系统，在进行系统前是看不到图形界面的，也无法接入键盘进行回车操作。

所以我们只能通过修改Grub启动文件来跳过此过程。

直接修改“/boot/grub/grub.cfg”文件，如果此文件无写入权限，请先用root权限修改此文件为可写。

全屏Api可以让浏览器全屏显示，让指定Element节点占满用户的整个屏幕。
目前各大浏览器的最新版本都支持这个API（包括IE11），但是使用的时候需要加上浏览器前缀。

在互联网上传输数据为了确保数据的安全性，需要对网络传输数据进行加密。这样就算别人截获了我们的数据，也需要进行解密才能知道其中的内容。

网络上Javascript的加密与解密方法有很多，常用的有md5、base64、sha1、rsa等方法。