我的php学习经历 你没发现你的学习方式跟我的学习方式不一样么。我是自己硬着头皮学，去网上找，在网上问（百度知道，论坛），如果没有解决方案，那我就换个方式来实现我的想法，实在不行了，才去找小乐问一下。你知道么，这样学到的东西才是最牢固的；因为这是我经历了千辛万苦才得到的答案，顿时有一种茅塞顿开的感觉。我不知道跟你说过我学php的经历没： 第一个作品（医院门诊管理系统）：所有的界面都是自己弄得，界面是用的表格布局，界面上没有数据，所有的界面都是表单，不会使用jQuery，不会框架；在页面上如果要看到数据的话，只有点击了按钮，才能看到后台查询到的数据。 第二个作品（模拟进程调度）：这个不是php的，是用纯javascript实现的，不过从此学会了使用jQuery。 第三个作品（图书馆管理系统）：这个项目的思想跟第一个相同，只不过界面是别人的。 从第一个作品到第三个，已经有半年的时间了（大三第一个学期末到第二个学期末），编程思想一点也没变。第四个作品（小型论坛）：这时页面上已经有数据了，界面也是扒的别人的网站，有了一些基本的功能。可是这个项目全是靠ajax支撑的，页面的数据是用ajax想后台获取的，然后连同数据和样式一同加载到页面上；登录和注册也是用ajax进行判断的；分页也是用ajax实现的，url里没有参数。第三个和第四个作品都是在大三暑假的时候写的，第四个差不多到9月份才完成，这时应该找工作了。当开学后我又向小乐请教了一个页面显示数据的问题：‘网站的数据总不能用ajax来实现加载吧？’，小乐给我讲了很长的时间我才明白一个原理：‘先查询数据，然后显示数据’因为要找工作，就开始学习smarty、js、php等等其他的知识。说实话，大部分的东西都是现在学到的，前面那么长的时间也只学到了一点点（忽然感觉像上学，小学的时间那么长，可是学到的东西不是很多，但是还不能没有小学）。第五个作品（二手物品交易网站）：这个网站是我目前来说最满意的作品了，用到了CI框架、扒的淘宝的界面，学到了很多很多的东西。除了第三个和第四个作品外，这些都是课程设计的题目，很多的同学都在逃避课程设计，可是我依然做了下来，而且整个项目都是我一个人写出来的，尽管有很多不如意的地方，可是我从里面学到了很多的东西，而同组的其他同学就逊色了很多，到找工作时，肚子里空空如也，没有项目经历，没有经验教训。当然自己写项目有好处也有坏处，好处是自己能学到很多方面的东西，每个方面都能了解一些，html、javascript、php、css等等；坏处就是学不到团队合作。可是一个最主要的问题是，分组的时候就是一个组长带几个组员，组员不能说有多笨，至少对项目帮助不大；比如让他写一个js代码，他憋了好几天憋不出来，还不如自己写了省事；想团队合作都没得办法。其实写了这么多，回过头来看看，很多的东西只有自己经历了才学的最深，只有自己拼命的去找解决方案才能将答案记得牢固。每个作品都比之前的好一些，这就足够了。

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方法。