利用计算网页页面的整体高度及顶部显示进度条的百分比。
效果截图：
Sow nothing reap nothing
HTML5Web存储localStorage的使用
一、什么是localStorage
在HTML5中，新加入了一个localStorage特性，这个特性主要是用来作为本地存储来使用的，解决了cookie存储空间不足的问题(cookie中每条cookie的存储空间为4k)，localStorage中一般浏览器支持的是5M大小，这个在不同的浏览器中localStorage会有所不同。
二、localStorage的优势
1、localStorage拓展了cookie的4K限制。
2、localStorage会可以将第一次请求的数据直接存储到本地，这个相当于一个5M大小的针对于前端页面的数据库，相比于cookie可以节约带宽，但是这个却是只有在高版本的浏览器中才支持的。
checkbox设置checked属性后不勾选处理方法
这两天在开发公司平台的过程中遇到复选框(checkbox)设置了checked="checked"属性，但是复选框(checkbox)一直不显示勾选效果。
问题描述：
在一个平台页面，有一个复选框(checkbox)选项，即勾选与不勾选。有一个需求是需要在页面查询数据后，将复选框(checkbox)设置为不勾选，紧接着再请求数据时默认再勾选(数据请求方式为异步，不刷新页面)，试了很多方法都不可以。
单选按钮radio 使用图片美化
美化思路：使用绝对定位将单选按钮radio定位，用css属性opacity将其设置透明，再使用label添加为图片层，使用label的for属性绑定radio元素。
HTML代码：
<input type="radio" id="chooseP" value="1"/>
<label for="chooseP" id="choosePl"></label>CSS文本不换行 显示省略号代替
css属性注解：
white-space:nowrap; 文本不会换行，文本会在在同一行上继续，直到遇到换行标签为止。
text-overflow:ellipsis; 显示省略符号来代表被修剪的文本。
overflow:hidden; 内容会被修剪，并且其余内容是不可见的。
CSS美化文件上传按钮input[type=”file”]
美化思路：
1、将input输入框及图片用div包裹起来，使其成为一个块级元素。
2、外层div使用相对定位以及设置相应的宽高。
3、input输入框使用绝对定位，也定义显示图片的宽高，并设置透明。
JS控制浏览器缩放比例大小
JS代码：
var size = 1.0;
function zoomout(){
size = size + 0.1;
set();
}
function zoomin(){
size = size - 0.1;
set();
}
function set(){
document.body.style.zoom = size;
document.body.style.cssText += '; -moz-transform: scale(' + size + ');-moz-transform-origin: 0 0; ';
}Jquery设置Bootstrap进度条动画效果
.progress-bar默认样式的进度条，.progress-bar-success进度条组件使用与按钮和警告框相同的类，根据不同情境展现相应的效果。.progress-bar-striped通过渐变可以为进度条创建条纹效果，IE9 及更低版本不支持。.active使其呈现出由右向左运动的动画效果。IE9 及更低版本的浏览器不支持。
http状态码详解
Bootstrap模态框设置点击框以外区域不隐藏方法
Bootstrap模态框设置点击框以外区域不隐藏方法:
下面以button点击显示模态框为例：
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
显示模态框
</button>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">标题</h4>
</div>
<div class="modal-body">
模态框内容
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
<button type="button" class="btn btn-primary">保存</button>
</div>
</div>
</div>
</div>