PHP中的日期和时间 今天上午同学问了我一个 mysql 数据库存储时间的问题，就忽然想起要不就总结一下 php 和 mysql 中的日期和时间吧。我们在一个项目中往往对同一个时间会使用多种方式表达，比如我曾经在 mysql 数据库中是用 int(11)存储 unix 时间戳，查询出来后再用 date()函数进行格式化，或者还有‘Tuesday 18th March 2013’、‘03/18/2013’（美国格式），‘18/03/2013’（欧洲格式），‘20130318’等等。这么多的时间格式我们怎么选择呢，如何显示冲数据库获取的文章列表，并按照日期排序？如果希望呈现更复杂的内容，例如在线日历，应该怎么做？不过在此之前我们要说明一下，我们整个地球有很多的时区，不是说我们在哪儿使用服务器，就会显示哪个时区的时间，如果我们不进行设置的话，默认的是 0 时区的时间，对于我们来说会相差 8 个小时。不过呢，我们可以使用date_default_timezone_get()获取服务器所在的时区，可以使用 date_default_timezone_set(string $timezone_identifier)设置时区，比如 date_default_timezone_set("Asia/Shanghai");，那么此时服务器的时区就改成了东八区了。关于 UNIX 时间戳:什么是 unix 是时间戳，unix 时间戳就是从某一个标准时间点（1970/1/1 00:00:00）到某一点所经过的秒数，比如现在（2013/04/11 15:20:47）的时间戳就是 1365664847。php 中有很多对时间戳进行操作的函数，比如 time()、 mktime()、 date()、 strtotime()、 microtime()等等。对于 time()函数：int time ( void )，返回自从 Unix 纪元（格林威治时间 1970 年 1 月 1 日 00:00:00）到当前时间的秒数（unix 时间戳）。我们可以看到，time()函数没有参数，返回的就是当前时间的 unix 是时间戳。 mktime():int mktime(int $hour, int $minute, int $second, int $month, int $day, int $year)，返回unix时间戳。对于传入的参数，可以从右往左依次省略，如果省略的话，默认的是当前时间的某个值，比如省略了$year 则默认是 2013。 date():string date(string format, int timestamp)，返回将整数 timestamp 用 format 格式化后的时间格式，timestamp 可以省略，若省略则默认是当前的时间戳(time())。 strtotime():这个函数的功能很强大，通过例子我们就能理解了。 microtime():返回当前时间的 unix 时间戳和微秒数。 让我们尝试一下上面的几个函数，看看都能输出些什么。//date_default_timezone_set("Asia/Shanghai"); echo 'date_default_timezone:'.date_default_timezone_get().''; echo 'time():'.time().''; echo 'date("Y/m/d H:i:s"):'.date('Y/m/d H:i:s').''; echo 'date("Y/m/d H:i:s", 1365665148)'.date("Y/m/d H:i:s", 1365665148).''; echo 'microtime():'.microtime().''; echo 'microtime(true):'.microtime(true).''; echo 'mktime(14, 43, 0, 4, 11, 2013):'.mktime(14, 43, 0, 4, 11, 2013).''; echo 'mktime(14, 43, 0, 4):'.mktime(14, 43, 0, 4).''; echo 'strtotime("April 11th 2013 14:43:00"):'.strtotime('April 11th 2013 14:43:00').''; echo 'strtotime("April"):'.strtotime('April').''; echo 'strtotime("+1 day"):'.date("Y/m/d l H:i:s", strtotime('+1 day')).''; echo 'strtotime("-1 month"):'.date("Y/m/d l H:i:s", strtotime('-1 month')).''; echo 'strtotime("-2 year"):'.date("Y/m/d l H:i:s", strtotime('-2 year')).''; echo 'strtotime("next friday"):'.date("Y/m/d l H:i:s", strtotime('next friday')).''; echo 'strtotime("last saturday"):'.date("Y/m/d l H:i:s", strtotime('last saturday')).''; 是不是发现 strtotime 很强大啊，他能将一些可以判定的时间字符串转换为时间戳。有没有一种想要做一个简单的日历的冲动呢？让我们来试试吧。我们就做下面的这种效果。首先我们的准备工作有： 一个月的第一天（1 号）的时间戳，这个时间戳的作用是获取该月的上一个月、下一个月和上一年、下一年的时间节点； 为了展示一个月的完整的日历，我们需要：1 号距离星期日前面有几个空白天（假如星期日是一个月的第一天），该月一共有多少天，该月最后剩余的空白。如果你还想弄一个回到今天的链接，那么我还需要获取今天的日期； 我们链接的跳转可以设置为向 url 传递参数，然后页面根据获取的参数展示相应的月历； 上一年的链接制作：上一年的年份和现在的月份；下一年的链接制作：下一年的年份和现在的月份； 上一个月的链接制作：上一个月所在的年份和上一个月的月份；下一个月的链接制作：下一个月所在的年份和下一个月的月份。为什么不能直接用现在的年份呢？你懂得。 按照格式填入到表格中，然后输出。 完成。 我们来一步步的写，定义一个数组$calender_data 来存储数组中所有的数据，包括空的格子。获取当月的第一天的时间戳，同时生成上一月、下一月、上一年和下一年的时间戳：$g = $_REQUEST; $year = isset($g['year'])?$g['year']:date("Y"); //获取$year $month = isset($g['month'])?$g['month']:date("F"); //获取$month $start_day = strtotime("{$month} 1 {$year}"); //$year $month的第一天的时间戳 $day_num = date('t', $start_day); //一个月的天数 $date_range = range(1, $day_num); // $pre_month = strtotime("-1 month", $start_day); //上一月的第一天的时间戳 $next_month = strtotime("+1 month", $start_day); //下一个月的第一天的时间戳 $pre_year = strtotime("-1 year", $start_day); // $next_year = strtotime("+1 year", $start_day); range() 函数创建并返回一个包含指定范围的元素的数组。生成上一月、下一月、上一年和下一年的链接：define(EMP, ' '); $html = "%s"; $calender_data = array(); $calender_data[] = sprintf($html, date('Y', $pre_month), $month, date('Y', $pre_year)); $calender_data[] = EMP; $calender_data[] = EMP; $calender_data[] = $year; $calender_data[] = EMP; $calender_data[] = EMP; $calender_data[] = sprintf($html, date('Y', $next_year), $month, date('Y', $next_year)); $calender_data[] = sprintf($html, date('Y', $pre_month), date('F', $pre_month), date('M', $pre_month)); $calender_data[] = EMP; $calender_data[] = EMP; $calender_data[] = $month; $calender_data[] = EMP; $calender_data[] = EMP; $calender_data[] = sprintf($html, date('Y', $next_month), date('F', $next_month), date('M', $next_month)); 生成一周的星期简称：$calender_data[] = 'Sun'; $calender_data[] = 'Mon'; $calender_data[] = 'Tue'; $calender_data[] = 'Wed'; $calender_data[] = 'Thu'; $calender_data[] = 'Fri'; $calender_data[] = 'Sat'; 将一个月前面的空格，天和最后的空格追加到数组中：$start_blank = date('N', $start_day)%7; for($i=0; $i

CSS 左边div固定，右边div自适应 有时候我们会有这样的需求，如图，aside是导航或者某些链接，右边的main是显示重要的内容，左边需要定宽，右边的main能够自适应剩余的宽度： test *{margin:0; padding:0;} /* div{border:1px solid #CCC;} */ .home{width:70%; min-width:270px;margin:0 auto;} .header{height:80px; width:100%; background:#CCC} .nav{height:50px; width:100%; background:#bbb} .content{} .content .aside{width:260px; height:400px; float:left; background:#999} .content .main{height:400px; margin-left:260px; overflow:hidden;zoom:1; background:#eee} .footer{height:80px; background:#888;} header nav aside main footer

CSS之position体验 1. position 介绍 # position 最简单的理解就是元素位置的定位，该元素相对于其他元素的位置或者想要该元素出现在合适的位置。这里我们用一个简单的例子来解释一下 position 的使用* { margin: 0; padding: 0; } .parent { width: 100%; height: 100%; background: #ddd; } .aa { width: 100px; height: 100px; background: #00f; } .bb { width: 100px; height: 100px; background: #f00; } aa bb 很简单的代码，三个 div 没有任何的 position 属性，初始的效果是这样的： 2. relative # relative 是‘相对的’的意思，那么他相对谁呢，答案是相对他自己，相对他本应该存在的位置进行偏移，而不是他的父级节点或兄弟节点。同时，relative 属性不影响其父级节点域兄弟的任何属性，不会让他们产生任何的位移与宽度和高度的变化。首先我们让 aa 的 position 为 relative，parent 和 bb 均不变。为 aa 添加的 CSS 属性有：.aa { position: relative; top: 50px; left: 50px; } 现在我们看到的就变成这样子了，aa 的 top 与 left 已经偏离了原来位置的 50px，可是 bb 的位置一点也没有改变，完全不受影响。现在，我们也给 bb 添加上相同的 CSS 属性，看看是什么样的效果。bb 的位置也相对原来的位置偏移了 50px，注意：是相对 bb 自己原来的位置，而不是相对于父级节点的位置。如果是相对于父级节点的位置的话，那么 aa 与 bb 就应该是重合的。现在又出现了新的问题：如果我们在偏移之后的 aa 添加上了 margin 属性怎么办，是按照 margin 的边界进行计算呢，还是按照现在的边界进行计算呢？试验告诉你，{position:relative; top:50px; left:50px;margin-left:10px;}：虽然我们具体不知道他的数值，可是从比例上我们能够看到left 的偏移量是按照 margin 的边界进行计算的。同时我们也可以将上面的那些情况理解为是{margin:0}的特殊情况。如果给父级元素添加上 position，会影响到 aa, bb 的位置变化么？现在我们给 parent 添加{position:relative}和{position:absolute}看看有什么效果。答案是aa 和 bb 完全不受 parent 的 position 设置的影响，该是什么偏移还是什么偏移，只不过是给 parent 添加{position:absolute}时，parent 会铺满整个窗口，其他的没有任何变化。 3. absolute # absolute，‘绝对地’，如果 aa 的 position 值为 absolute 时，会参照谁进行偏移呢？aa 会按照 DOM 元素从内层向 body 一直找，直到出现某一元素有 position 属性（值为 relative, absolte 或 fixed）或者到 body，那么 aa 就会参照该元素进行偏移。也就是说，从离 aa 最近的父级元素开始查找 position，如果当前的父级元素没有，那么就找父级的父级，直到出现 position 属性，如果一直没有出现 position 属性，aa 就会参照 body 进行偏移。同时，{position:absolute}也会影响兄弟节点的定位，后面的节点会填充上该位置。设置 parent 的 CSS 属性：.parent { position: relative; top: 50px; left: 50px; } 设置 aa 的 CSS 属性：.aa { position: absolute; top: 50px; left: 50px; } 我们从图片中能够看到：parent, aa, bb 均发生了偏移。parent 的 position 值为 relative，那么他会参照他自己原来的位置 top 与 left 均偏移 50px；aa 的 position 值为 absolute，向外层查找时，parent 就有 position 属性，那么 aa 就会参照 parent 进行偏移；bb 的位置到了 parent 内部的左上角。如果把 parent 的 position 值更改为 absolute 或者 fixed，aa 与 bb 会有同样的效果。也就是说，某元素只是寻找所有父级元素中是否有 position 值（relative, absolute 或 fixed），而不关心她具体是什么值，而且是按照离该元素最近的父级元素进行偏移。现在我们把页面的结构弄的复杂一点，给 parent 添加一个兄弟节点 parent2 和父级节点 grandpa，grandpa 有一个兄弟节点 grandpa2： parent2 aa bb 新的 CSS 属性如下，两个 grandpa 节点的边框是红色的：* { margin: 0; padding: 0; } .grandpa { border: 1px solid red; } .grandpa2 { width: 100%; height: 100px; border: 1px solid red; } .parent { width: 100%; height: 100%; background: #ddd; } .parent2 { width: 100px; height: 100px; background: #bbb; } .aa { width: 100px; height: 100px; background: #00f; } .bb { width: 100px; height: 100px; background: #f00; } 搞得这么复杂就是为了证明{position:absolute}的参照点是什么。上面的那个例子已经证明如果最近的父级节点有 position 属性的话，就会参照最近的父级节点，如果该父级节点没有，而二级父级节点有呢。给 aa 添 CSS 属性{position:absolute; top:50px; height:50px;}，给 grandpa 添加 CSS 属性：{position:relative;}，下面的红色边框是 grandpa，上面的红色边框是 grandpa2，可以看到 aa 是以 grandpa 进行偏移的。现在我们把刚才给 grandpa 添加的 CSS 属性{position:relative}去掉，aa 在寻找了 parent 和 grandpa 之后依然没有 position 属性，于是只能以 body 的左上角作为参照点了。这里依然有一个同样的问题：如果父级元素有 margin 和 padding 会怎么办？答案是 aa 元素会参照{padding-left:0; padding-top:0;}进行偏移。现在父级元素既有 margin 又有 padding，从图片中可以看出，aa 会忽略掉 padding 的值，按照{padding-left:0; padding-top:0}的基准点进行偏移。 4. fixed 与 static # 当某一元素的 position 属性为 fixed 时，不管该元素的父级元素是否有 position 属性，它总是以浏览器窗口的左上角进行定位（说按 body 进行定位其实不准确，当给 body 添加 margin 和 padding 属性时，该元素的位置依然没有变化）。我在某一篇文章中看到这样的一句话“fixed 是特殊的 absolute，即 fixed 总是以 body 为定位对象的，按照浏览器的窗口进行定位”，我当时还以为如果给 body 添加 margin 属性会影响元素的定位。试验后才知道，fixed 是以浏览器窗口进行定位的，而不是以 body 进行定位的。static 是 position 的默认属性值，如果不给元素设置其他的属性值，元素就会按照正常的文档流进行排列。 5. 总结 # 真是不写不知道，一写吓一跳。原本很模糊的东西，通过试验并加以总结，会变得如此清晰。只能说看别人的东西，如果不加以实践的话，过去就忘了，而且还依然是浑浑噩噩的状态。本人才疏学浅，如果有哪里不正确的地方，欢迎指正。

js事件在不同浏览器之间的差异 1. 介绍 # javascript与HTML之间的交互是通过事件实现的。事件，就是文档或浏览器窗口中发生的一些特定的交互瞬间。只不过在当年还没有统一标准的时候，各个浏览器厂商都制定了自己的标准，当我们编写代码时就要考虑不同浏览器之间的各种差异。事件流一般包括三个阶段：事件捕获阶段，处于目标阶段和事件冒泡阶段。所有现代浏览器都支持时间冒泡，但在具体实现上有一些差异，IE5.5及更早版本中的事件冒泡会跳过元素（从直接跳到document），IE9、Firefox、Chrome和Safari则将事件一直冒泡到window对象；老版本的浏览器不支持事件捕获。 2. 不同浏览器之间的差异 # 各个浏览器之间确实存在差异，这是我们不可避免的。我们能做的就是尽量去寻找一个通用的方法，如果没有通用的方法，那我们只能针对不同浏览器的特性分别写代码了。当然，也有很多人专门写了一些JS代码来消除这些差异，比如jQuery，在我们jQuery时很少会考虑浏览器的差异，那是因为jQuery内部已经为我们处理好了。IE什么的最讨厌了。 2.1 添加事件的方法 # 我们通常是这样为某元素添加事件的：var btn = document.getElementById("myBtn"); btn.addEventListener("click", function(){ //处理代码 }) 这样就能为id是myBtn的元素绑定一个click事件了。其实addEventListener有三个参数，只不过我们通常会省略掉第三个参数： 第一个参数：添加事件的类型，比如click, mouseover, mousemove等等，这里的事件类型是没有on，不是"onclick"； 第二个参数：事件处理函数，这里用来添加需要执行的代码； 第三个参数：在哪个阶段调用事件处理程序，布尔值。若为true，表示在捕获阶段处理；若为false则在冒泡阶段进行处理。默认为false。 而且如果我们用addEventListener为同一个元素添加多个相同事件时，事件会按添加的顺序依次执行。IE中为某元素添加事件的方法：var btn = document.getElementById("myBtn"); btn.attachEvent("onclick", function(){ //处理代码 }) 这里我们能够很明显地看到两者的不同：IE中使用attachEvent添加事件，而且添加事件的类型有"on"，这个方法只有两个参数，因为用attachEvent添加的事件会被添加到冒泡阶段。 第一个参数：添加事件的类型，比如有"onclick", "onmouseover"等，这里的事件类型是带有"on"的； 第二个参数：事件处理函数，用来处理程序。 如果用attacheEvent为某一元素添加多个相同事件时，最后添加的事件会首先被执行。 2.2 事件对象event # IE和其他浏览的event对象是不同的。在其他浏览器中若要使用时，都要传入event对象，而在IE中，event却是window对象的一个属性。var btn = document.getElementById("myBtn"); /* 非IE */ btn.addEventListener("click", function(event){ //处理代码 alert(event.type); }) /* IE */ btn.attachEvent("onclick", function(){ //处理代码 var event = window.event; alert(event.type); }) 不过在实际中，我们却不能把这两个并列地写，因为其中一个方法在某一个浏览器中肯定是没有定义的，会报错。当我们确实要使用event对象时，我们可以这样写：function(event){ //处理代码 event = event || window.event; alert(event.type); } 这样就能保证event对象必然是存在可用的。 2.3 event中的属性/方法 # 不同浏览器的event存在方法不同，而且各自的属性与方法也不尽相同。 属性/方法 类型 读/写 说明 bubbles Boolean 只读 表明事件是否冒泡 cancelable Boolean 只读 是否可以取消事件的默认行为 currentTarget Element 只读 其事件处理程序当前正在处理事件的那个元素 eventPhase Integer 只读 调用事件处理程序的阶段：1捕获阶段，2处于目标，3冒泡阶段 preventDefault() Function 只读 取消事件的默认行为。只在cancelable为true时才可使用该方法 stopPropagation() Function 只读 取消事件的进一步捕获或冒泡。只在bubbles为true时才可使用该方法 target Element 只读 真正触发事件的那个元素 type String 只读 被触发事件的类型 IE中event的属性与方法： 属性/方法 类型 读/写 说明 cancelBubble Boolean 读/写 是否取消事件的进一步冒泡。为true时取消冒泡，默认为false returnValue Boolean 读/写 是否取消事件的默认行为。为false时取消事件的默认行为，默认为true srcElement Element 只读 事件的目标 type String 只读 被触发事件的类型 我们从两个表格中能够看到，还是有很多的属性和方法是相似的，虽然名称和使用的方法不同，但最终的目的都是一样的。不过为了在各个浏览器之间的通用，我们可以这样写：function(event){ //处理代码 event = event || window.event; //取消事件的默认行为 if (event.preventDefault) { event.preventDefault(); }else{ event.returnValue = false; } //取消事件的进一步冒泡 if(event.stopPropagation){ event.stopPropagation(); } else{ event.cancelBubble = true; } } 首先判断浏览器是否支持该属性或方法，如果支持则使用该属性或方法，否则使用另一个属性或方法。 3. 总结 # 浏览器兼容是前端程序员永远的痛，不只是在js，css也有很大的不同。不过在标准越来越统一的大环境下，将来要考虑的差异性就会少多了。这里要说一句：IE11现在已经废除了attachEvent方法。

2014的希冀 好快，2013年就这么过去了。每当停下脚步回头看时，才发现时间是过得如此之快；在这个公司感觉还没工作多长时间，这一年就这样过去了。这一年对我来说的确是特殊的一年，我完成了从学生到社会人的转变。7月1号的大学毕业，分别了同学、分别了老师，再也回不去那熟悉的宿舍与教室；取而代之的是为生活而打拼。我们终究要靠着自己活下去，终究要撒开父母的手自己行走。我也在一步步的尝试。回头看看去年写的文章（http://www.xiabingbao.com/summary/2013/01/01/2013-summary.html），里面定的目标确实完成了不少。不过说实话，写完那篇文章后，不知过了多久就已经忘得差不多了。那些目标都是顺便完成的，不过也总算是实现了一些既定的计划。总结一下完成的情况： 确实在北京找了份工作，不过不确定是不是好的工作，工作倒是比较轻松，但是感觉学到的东西不是很多；不过从另一方面讲：既然工作轻松了，就有足够的时间来进行自学，而很多人还没有这个时间呢，要懂得珍惜。 应聘的是PHP的工作，不过现在主要做的是前端方面的。工作清闲时学习的东西很多也是前端部分的。 平时在家闲暇时读完了《黑客与画家》、《软件随想录》，那本《程序员修炼之道》放在了公司，本来想在工作闲着的时候看呢，结果几乎都没有动过。我看还是拿回来吧。 星期天总是无聊的，实在是闲不住的时候，就找几个同学逛逛，如果找不到人的话，就一个人逛，逛的景点应该有：鼓楼大街、国家博物馆、天安门、天坛、鸟巢（水立方）、颐和园（2012年来北京比赛的时候逛过，那个时候还迷路了呢）。 好吧，.net根本一点也没学。主要是一个同学学的.net，我也想着能够多接触一门语言，希望能够理解的更广泛一些。不过可惜，没有更多的时间来学习.net。 毕业设计就是做的算法题，毕业后也做过几个算法题，不过没有坚持下来每个星期都做。因为现在的主要精力不是在算法上了，好多算法都忘的差不多了，也懒得去想了，就想着做一些简单的题目。各种借口吧，反正没有坚持下来，希望接下来能够坚持每个星期做几个简单的算法题，虽然做不了难的了，但是做几个简单的题目应该是没问题的。 确实比较顺利地毕业了，不用为户口担心，因为我根本就没有转户口；倒是为毕业证和学位证纠结了一会儿，但是还是顺利拿到手了。由于自己的不理智，毕业设计就拿了个“中”。 这个应该怎么说呢，确实平平安安，身体没生过病；要说快快乐乐呢，不是很准确，应该说是五味俱全吧。 对去年写的总结总结了一下。现在具体回顾一下2013年的情况。1月：完成了我自认为最牛逼的课程设计，页面是扒的淘宝的（仅是学术交流），用的codeIgniter框架（http://wobingbing.sinaapp.com/baihui/）；确实找到了一个比较合适的工作，然后又在北京找到了一个落脚的地方；发小结婚了，我却没有去成，惭愧！2月：过了一个平淡的春节，跟村里的小学同学小聚了一下，春节后直接去了公司；2月有个“情人节”？别搞笑了！一个人平平淡淡的看完了元宵晚会；3月：毕业设计开始了；4月：与同在北京实习的同学逛了逛鼓楼大街，只能说“人真他么的多”！5月：回学校做毕业设计，跟同学再多聚聚！6月：毕业设计答辩，顺利通过，只是没拿到想要的成绩！7月：顺利地拿到毕业证和学位证，正式毕业，正式从实习生转正！8月：“七夕节”？又是在搞笑吧！租的房子到期了，又重新找了一个地儿；回家给奶奶过生日。9月：祝老师：教师节快乐；老师们都不容易，互相体谅。自己一个人去鸟巢、水立方转了转。10月：回家帮忙秋收，国庆与春节是每年必然回家的节日；一个人去天坛。11月：跟同学去农家乐转了转，好远。2013年是丰富的一年，是举国欢庆的一年，是承上启下的一年，依然是国外人民生活在水深火热之中，中国人生活在幸福安康之中！2013年习大大当了国家主席，2013年南非前总统曼德拉去世了，2013年“嫦娥”上月球了，2013年的天气更操蛋了，2013年的房价更高了！2013年的谷歌是让人惊奇的，2013年科技的发展是有目共睹的。在至此2014年到来之际，我相信，2014年的天气会更加的操蛋；2014年的房价会更高；会相信如果发生战争，我们承诺不首先使用城管；2014年的科技会更加让人目瞪口呆。2014年，我能干些什么呢，实现几个小小的愿望就行了： 好好学习一下linux，买的那本《鸟哥私房菜》可不能用来垫桌底了； 学习一下最近新兴的、流行的技术：HTML5、CSS3、Android等； 把《三国演义》看完了，时不时的看看《宋体》，提升下文学素养； 希望工资能提升一个档次，不管怎么努力，都是为了赚更多的钱嘛！梦想总是能被现实碾压的粉碎； 再买几本有质量的书，不过目前现在还没有想好买什么； 游览一下北京的名胜：长城、故宫、圆明园、颐和园、欢乐谷、三里屯、海洋馆、八大胡同、海底世界； 让我们平平安安、快快乐乐过完整个2014. 至此，敬礼！