🌓

图片加载失败，导致的浏览器兼容问题

2016-03-10

网站当中经常会遇到图片加载失败的问题，img中有地址，但是地址打开是错误的。情况如下：
图片加载失败，所导致的浏览器兼容问题
不同浏览器处理错误图片是不一样的，有的干脆就显示差号，例如IE，有的显示一张破碎的图片，有的则是给一张高度比较大的默认图，例如PC端的火狐，IOS中Safari,还有安卓中的UC浏览器。这样在手机中就会导致左右两侧图片高度不一致！如下图：
图片加载失败，所导致的浏览器兼容问题

检测设备平台、操作系统、方向 Javascript 库:Device.js

2016-03-08

在 Web 项目中，有时候我们需要根据程序运行的环境采取特定操作。Device.js 是一个很小的JavaScript库，它简化了编写和平台，操作系统或浏览器相关的条件 CSS 或 JavaScript 代码。
Device.js 是一个可以让你检测设备的平台，操作系统和方向 JavaScript 库，它会自动在标签添加一些设备平台，操作系统，方向相关的 CSS class，这样就能让你针对不同设备撰写不同的 CSS，并且还提供一些 Javascript 函数来判断设备。

解决移动端页面上下滑动Bug

2016-03-08

继续上一篇文章移动web页面支持弹性滚动解决方案，其实这里面的demo有一个小小的bug，现在为大家解决此bug，直接上图吧，看来就明白了！

移动web页面支持弹性滚动解决方案

2016-03-08

一直折腾移动端页面弹性滚动的各种问题，做了点研究，今天做个小分享，首先本人不建议使用第三方js插件来做，一方面性能方面不是很好，另外一方面本身移动端的网络不是很快也不是稳定，加载会出现卡顿现象或者是运行出现问题，落叶归根，一切回归本质，强大的css3给予我们无比的力量！

传统 pc 端中，子容器高度超出父容器高度，通常使用 overflow:auto 可出现滚动条拖动显示溢出的内容，而移动web开发中，由于浏览器厂商的系统不同、版本不同，导致有部分机型不支持对弹性滚动，从而在开发中制造了所谓的 BUG。

炫酷全屏式的弹窗jQuery插件 – animatedModal.js

2016-03-07

animatedModal.js 是一个全屏式的弹窗jQuery插件，而且弹出效果很漂亮，全屏的弹窗特别适用于移动手机网站，所以做响应式网页的设计师们可以尝试使用这款插件。

animatedModal.js 的弹出动画可以结合 animate.css 这个样式库来实现漂亮酷弦的动画特效。

如何判断一个对象是否是数组？

2016-03-04

我们知道在js中除了function以外的所有对象如果用typeof来判断的话，它们都显示Object，但是有时候我们并不想这样，比如我判断一个数组就应该是个数组而不是打印Object。

1 2	var arr = []; console.log(typeof arr); //object

JS对象的几个方法介绍

2016-03-04

1、hasOwnProperty判断是不是对象自身的属性，如果是继承的返回false否则true

function Fn(){
}
Fn.prototype.num = 10;

var obj = new Fn();
obj.id = 1;

console.log(obj.hasOwnProperty("id")); //true
console.log(obj.hasOwnProperty("num")); //false

清除浮动详解

2016-03-04

本尊今天听某丝提起了清除浮动，刚开始以为清除浮动是个很简单的话题，但是仔细深入思考一下清除浮动，这个话题既简单又沉重，简单得说一下就懂了，沉重得只可意会不可言传，于是疯狂的翻阅了很多资料，浏览了很多网站，下面详细的为大家总结讲述一下清除浮动！

清浮动小结

1、{clear:both;}设置了clear

属性的元素，其上边框位置会紧贴浮动元素的 margin-bottom 边界位置渲染，使包含浮动元素的容器高度正常。所以适用于浮动元素后面容器之内有个非浮动元素，或是额外添加一个新的空元素。

js滚动条的常用操作

2016-03-04

网页可见区域宽： document.body.clientWidth;

网页可见区域高： document.body.clientHeight;

网页可见区域宽： document.body.offsetWidth (包括边线的宽);

网页可见区域高： document.body.offsetHeight (包括边线的宽);

wamp改网站默认根目录,使用域名重定向,多站点配置

2016-02-08

wamp安装目录:C:\wamp

安装wamp前保存的项目目录:E:\wamp\www

先在源目录:C:\wamp中实现多站点配置:

1.在C:\wamp\bin\apache\apache2.4.9\conf目录中文件:httpd.conf找到这一行#Include conf/extra/httpd-vhosts.conf
去掉最前面的#(这样httpd-vhosts.conf文件才能生效)

提高CSS文件可维护性的五种方法

2016-01-29

当完成一项前端的工作之后，许多人都会忘记该项目的结构与细节。然而代码并不是马上就能完全定型，在余下的时间里还有不断的维护工作，而这些工作也许不会是你自己完成。所以，结构优良的代码能很大程度上优化它的可维护性。下面列出五种提高CSS文件可维护性的方法，也就是一种较好的CSS样式指南。

1.分解你的样式

轻松使用px为单位开发移动端页面

2016-01-28

研究移动端页面已经有许久了，一直执着于rem来开发，不谈性能怎么样，单从工作效率上看影响了不少，首先要固定设计稿的宽度，一般都是固定在640px，然后在根据根目录的字体大小来计算出每个元素的rem的值，无疑在开发中切图，每个元素都要去计算一边，是不是感觉很麻烦，有没有一种方法，像切PC端页面一样，切了直接写css，不用去计算这么麻烦，答案是肯定有的！好吧，先给大家看一下，我以前用rem来开发的技术文章吧(由于之前博客的迁移，博客地址已经改变，请自行去搜索栏进行搜索相应的文章)！

js中encodeURI和decodeURI介绍(解决Url中传递中文参数乱码)

2016-01-28

一、基本概念

encodeURI和decodeURI是成对来使用的，因为浏览器的地址栏有中文字符的话，可以会出现不可预期的错误，所以可以encodeURI把非英文字符转化为英文编码，decodeURI可以用来把字符还原回来。encodeURI方法不会对下列字符进行编码：”:”、”/“、”;” 和 “?”，encodeURIComponent方法可以对这些字符进行编码。

通过身份证号码获取人的年龄和性别

2016-01-22

通过身份证号码获取人的年龄和性别:
身份证可以识别一个人的信息，下面就介绍一下如何利用js通过身份证号码获取当事人的年龄和性别。
代码实例如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>GryCheng前端博客</title>
<script type="text/javascript"> 
function discriCard(UUserCard)
{ 
 UUserCard.substring(6,10)+"-"+UUserCard.substring(10,12)+"-"+UUserCard.substring(12,14); 
 //获取性别 
 if(parseInt(UUserCard.substr(16,1))%2==1) 
 { 
 alert("男"); 
 //是男则执行代码 ... 
 } 
 else 
 { 
 alert("女"); 
 //是女则执行代码 ... 
 } 
 //获取年龄 
 var myDate = new Date(); 
 var month = myDate.getMonth() + 1; 
 var day = myDate.getDate(); 
 var age = myDate.getFullYear()-UUserCard.substring(6, 10) - 1; 
 if (UUserCard.substring(10,12)<month||UUserCard.substring(10,12)==month&amp;&amp;UUserCard.substring(12,14)<=day) 
 { 
 age++; 
 } 
 alert(age); 
 //年龄 age 
} 
window.onload=function()
{
 var txt=document.getElementById("txt");
 var bt=document.getElementById("bt");
 bt.onclick=function(){discriCard(txt.value);}
}
</script>
</head>
<body>
<input type="text" id="txt" />
<input type="button" value="点击获取信息" id="bt" />
</body>
</html>

JS中实现密码加密

2016-01-17

1、base64加密
在页面中引入base64.js文件，调用方法为：

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>base64加密</title>
<script type="text/javascript" src="base64.js"></script>
<script type="text/javascript">
var b = new Base64();
var str = b.encode("admin:admin");
alert("base64 encode:" + str);
//解密
str = b.decode(str);
alert("base64 decode:" + str);
</script>
</head>

<body>
</body>
</html>

CSS定义input disabled样式

2016-01-14

disabled 属性规定应该禁用 input 元素。
被禁用的 input 元素既不可用，也不可点击。可以设置 disabled 属性，直到满足某些其他的条件为止（比如选择了一个复选框等等）。然后，就需要通过 JavaScript 来删除 disabled 值，将 input 元素的值切换为可用。
以下三种写法都可以禁用 input

封装HTML5中localStorage（本地存储）

2016-01-12

localStorage，俗名本地存储，是一个只有5M大小的浏览器端存储工具，不过相比cookie的几K存储量来说，存储空间还算是提升了不少，这个东东在哪里看呢(⊙o⊙)?

打开浏览器—>F12—>直接上图吧！

上图：

看吧，不是个很复杂的东西，很直观嘛，下面教大家如何使用，

最新纯js移动端日期选择插件（转载）

2016-01-12

最近在项目上需要使用日期选择插件，由于是移动端的项目，对请求资源还是蛮节约的，可是百度上一搜，诶~全是基于jquery、zepto的，本来类库就很大，特别像mobiscroll这种样式文件一大堆又丑又长还收费，我就忍不住自己做了一个，也不过就10几kb的事情嘛，想想独乐乐不如众乐乐，如果伙伴们手上没有轻量级的日期选择插件不如先拿我这个应付一下吧！

为什么我们的web前端变的越来越复杂

2016-01-11

前端发展了也有些年头了，曾记得很多年前，聊起前端，都觉得是很简单，那个时候都没有前端工程师这个职位。可现在，前端已经逆袭了，已经不是原来的样子了,各种技术层出不穷，显的越来越高深莫测了。前端真的变得那么难了吗？在我看来，前端还是原来的前端，虽然有些关变换，但不应该像现在一样复杂。

框架太多了,新技术太多了

我们总是迷失在各种技术了，总是迷失在新技术带了的各种概念里。angular rect bootstrap 等等，他们给我们带来便利的同时也给我们带来了麻烦。我们真的需要这些框架吗？学会了这些框架就等于学会了前端吗？

Fetch：下一代 Ajax 技术

2016-01-09

Ajax，2005年诞生的技术，至今已持续了 10 年。它是一种在客户端创建一个异步请求的技术，本质上它不算创新，是一组技术的组合。它的核心对象是 XMLHttpRequest。

简单回顾下历史

1996年，IE 中首先添加了 iframe 用来实现异步请求获取服务器内容
1998年，微软 Outlook 在客户端 script 中实现了 XMLHttp 对象
1999年，微软在 IE5 中添加了 XMLHTTP ActiveX 对象用来异步获取服务器内容，该对象直到 Edge 浏览器才废弃。其它浏览器陆续实现了类似的对象称为 XMLHttpReques。
2004年，Google Gmail 中大量使用 XMLHttpRequest
2005年，Google Map 中大量使用 XMLHttpRequest
2005年，Jesse James Garrett 发表了文章 “ Ajax: A New Approach to Web Applications “，Ajax 诞生
2006年，XMLHttpRequest 被 W3C 采纳，最后更新时间是 2014年1月
使用步骤大概如下