总结-活动领取页面(计时功能)

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

黄金星期三活动

问题多多,收获自然也多多。写个总结:


一.页面部分

  1. 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}
    
  2. base.css

    重置 + 常用类,比如通常的btn效果,不能修改

  3. list要每个都一样

    因为后台只写一个

    list-same

    比如,这里每一个框都是一样的,但是左边有右边距,而右边没有。是不能这么写的,要统一。因为后台写出来的list只有一个。

  4. <a>标签不跳转的时候,不要用href="#",要用href="javascript:;"。因为#是表示指向页面中的锚(mao),href="javascript:;"不会执行浏览器默认的onclick,而是执行javascript

  5. IE 6兼容性

    • 问题描述:有两个div,均有高度、宽度、颜色。左边的div设float:left;,右边的div设position:absolute;
      解决方案:给float:left;的div也设置成position:absolute;

      特意画了图:

      ie6-ie6

      举个例子:

      code-1

      效果:

      正常浏览器下:

      ie6-2

      IE 6下:

      ie6

      解决方法:

      code-2

      IE6和正常浏览器一致啦:

      ie6-2

    • 问题描述:当<a>标签有的在IE 6下,hover效果会出现,有的不会出现。
      解决方案:原因,<a>标签没有加href="#"
  6. clearfix

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

4种方法:

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

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

  1. 和后台接口配置

    一定要做好注释。

  2. 时间戳:通常以s来计

  3. 选择器::last-child

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


二.JavaScript部分

  1. 倒计时功能

    核心代码:

    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);  
    }
    
  2. 用ajax的时间:页面刚加载渲染的一般都是PHP做,比如要做一个领取功能,那么里面用户领取的是什么,就需要前端用ajax请求。

  3. 优化:代码重复

  4. 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()则是返回的值。

  5. Date():它是读取本地的时间的。为了活动页面的严谨,采用服务器端的时间。

  6. 考虑问题的逻辑性:一定要想好思路,再开始动手。一旦逻辑性出现问题,改动很有可能需要大片。

  7. 能用缓存的地方,多用缓存。

  8. 刷新功能:window.location.reload();

  9. 一般活动开始、结束时间由PHP给。

  10. prop():jQuery1.6以后加入,和attr()用法相近,但也有区别。

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

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

 

三.交互

  1. 看到设计图的时候,就要沟通好哪部分前端、哪部分后端渲染。
    一般进入页面,直接根据不同情况渲染出样式效果,由后台判定渲染。

  2. 一定要看清楚需求,特别是一些关键词。


四.其它

  1. 做完之后至少检查一遍,分别从功能、代码、关键点检查。减少后期因为功能不完善而耗时去不断修改。

  2. 优化:有的时候,功能实现了,但是代码的优化是无止尽的,里面有很多学问值得我们研究。

麻凯倩

微信:makaiqian