总结-活动领取页面（计时功能）

做的第一个活动页面，还是挺有意义的。终于可以归档啦：

黄金星期三活动

问题多多，收获自然也多多。写个总结：

一.页面部分

data参数用法

HTML中：data-id=”01″ / data-type=”0″

在ajax中：

var $this = $(this);  
var id = $this.data('id');  
var type = $this.data('type');  
data: {'uid': id, 'uType': type}

base.css

重置 + 常用类，比如通常的btn效果，不能修改
list要每个都一样

因为后台只写一个

比如，这里每一个框都是一样的，但是左边有右边距，而右边没有。是不能这么写的，要统一。因为后台写出来的list只有一个。
<a>标签不跳转的时候，不要用href="#",要用href="javascript:;"。因为#是表示指向页面中的锚(mao)，href="javascript:;"不会执行浏览器默认的onclick，而是执行javascript。
IE 6兼容性
- 问题描述：有两个div，均有高度、宽度、颜色。左边的div设float:left;，右边的div设position:absolute;
  解决方案：给float:left;的div也设置成position:absolute;
  
  特意画了图：
  
  举个例子：
  
  效果：
  
  正常浏览器下：
  
  IE 6下：
  
  解决方法：
  
  IE6和正常浏览器一致啦：
- 问题描述：当<a>标签有的在IE 6下，hover效果会出现，有的不会出现。
  解决方案：原因，<a>标签没有加href="#"
clearfix

以前接触过，但是一直不知道什么情况下要使用，今天研究了下几个清楚浮动的方式，再分析一下它们的利弊，就清晰了。

4种方法：

* 父级使用高度  
* 定义一个div使用clear:both;  
* 父级定义overflow:hidden;  
* 父级div定义伪类:after和zoom;

推荐最后一种。具体请看：http://makaiqian.com/?p=1028

和后台接口配置

一定要做好注释。
时间戳：通常以s来计
选择器：:last-child

CSS3的伪类，IE8及以前的版本均不支持，使用时要慎重。

二.JavaScript部分

倒计时功能

核心代码：

changeTime();  
function changeTime() {  
    // 当在活动当天的时候  
    if (countDown <= 0) {  
        countDown += 604800; // 加上一周  
    }  
    countDown–;  
    var day = <del>((countDown / 3600) / 24 % 7);  
    var hour = </del>((countDown / 3600) % 24);  
    var minute = <del>((countDown / 60) % 60);  
    var second = </del>(countDown % 60);  
    day_elem && $(day_elem).text(day);// 计算天  
    $(hour_elem).text(hour < 10 ? ‘0’ + hour : hour);// 计算小时  
    $(minute_elem).text(minute < 10 ? ‘0’ + minute : minute);// 计算分钟  
    $(second_elem).text(second < 10 ? ‘0’ + second : second);// 计算秒杀  
    setTimeout(changeTime, 1000);  
}

用ajax的时间：页面刚加载渲染的一般都是PHP做，比如要做一个领取功能，那么里面用户领取的是什么，就需要前端用ajax请求。
优化：代码重复
setInterval()和setTimeout()的区别
```
setInterval()：按照指定周期调用函数。会不停地调用函数，直到setInterval()被调用或者窗口被关闭。
setTimeout()：指定的毫秒数后调用函数；
```
通常我们用setTimeout的递归调用执行的代码来实现setInterval的功能。
比如：
```
changTime();  
    function changeTime() {  
    setTimeout(changeTime, 1000);  
}
```
分析：
- 为什么用setTimeout效果比setInterval效果好？
  
  答：setTimeout递归执行的代码必须是上一次执行完了并间隔一定时间才执行。所以，如果延时时间是1秒，而执行的代码需要2秒来执行，那么总共是3秒，不是我们想象中的1秒。但是，一般的主机几乎执行时间是几ms，可以忽略不计。
  
  而setInterval是排队执行的，上次没有执行完毕之后的代码会排队，上一次执行完下一次就立即执行。如果时间长了，队伍就非常的长，内存就被吃光了。如果某次执行卡住，程序就堵死。
- 为什么setTimeout(changeTime, 1000);中是changeTime而不是changeTime()？
  
  答：changeTime是函数名，是指向函数的一个指针。
  changeTime()则是返回的值。
Date():它是读取本地的时间的。为了活动页面的严谨，采用服务器端的时间。
考虑问题的逻辑性:一定要想好思路，再开始动手。一旦逻辑性出现问题，改动很有可能需要大片。
能用缓存的地方，多用缓存。
刷新功能：window.location.reload();
一般活动开始、结束时间由PHP给。
prop():jQuery1.6以后加入，和attr()用法相近，但也有区别。

outerHTML：获取当前元素所有的节点

prop(‘outerHTML’)：获取当前节点的HTML代码（包含节点），而attr()是不能拿到的。而html()不包含本身节点的代码。

三.交互

看到设计图的时候，就要沟通好哪部分前端、哪部分后端渲染。
一般进入页面，直接根据不同情况渲染出样式效果，由后台判定渲染。
一定要看清楚需求，特别是一些关键词。

四.其它

做完之后至少检查一遍，分别从功能、代码、关键点检查。减少后期因为功能不完善而耗时去不断修改。
优化：有的时候，功能实现了，但是代码的优化是无止尽的，里面有很多学问值得我们研究。

菜单