原生js平滑滚动【我写的很菜】

    /**
* 平滑滚动
* @param target[document.Element] 滚动目标
* @param lengthTo[number] 滚动到达
* @param type[string] 滚动x/y轴
* @param callback[function] 滚动后回调
*/
function roll(target,lengthTo,type,callback){
  var type = type || "x";
  var dd = target,
      dnow = (type == "x") ? dd.scrollLeft : dd.scrollTop;
      dmin = 0,
      dmax = (type == "x") ? dd.scrollWidth : dd.scrollHeight,
      dto = (lengthTo > dmin) ? ( ( lengthTo < dmax ) ? lengthTo : dmax ): dmin,
      step = 20,
      distance = Math.abs (dto - dnow),
      count = 1 ,
      direction = (dto > dnow)? 1 : -1 ;
       (function() {
         var timePre = count / step;
         var dnow = (type == "x") ? dd.scrollLeft : dd.scrollTop;
         var speed = Math.floor( distance / step ) ;
         // speed = Tween.Quad.easeIn(1,0, speed * 1.5  , 0.5 + 0.1 * count); //需要有缓动函数支持
         var move = dnow + direction * speed ;

// console.log(distance,speed , move);

         if(timePre > 1 || Math.abs(move - dto ) <= Math.abs(speed)){
           (type == "x") ? target.scrollLeft = dto :  target.scrollTop = dto;
                     if(typeof callback =="function"){
                         callback();
                     }
           return ;
         }
         (type == "x") ? target.scrollLeft = move : target.scrollTop = move;

         count++;
         setTimeout(arguments.callee, 40);
       })();
}

缓动函数计算公式

    /**
* 缓动计算公式
*/
var Tween = {
    Linear: function(t, b, c, d) {
        return c * t / d + b;
    },
    Quad: {
        easeIn: function(t, b, c, d) {
            return c * (t /= d) * t + b;
        },
        easeOut: function(t, b, c, d) {
            return - c * (t /= d) * (t - 2) + b;
        },
        easeInOut: function(t, b, c, d) {
            if ((t /= d / 2) < 1) return c / 2 * t * t + b;
            return - c / 2 * ((--t) * (t - 2) - 1) + b;
        }
    },
    Cubic: {
        easeIn: function(t, b, c, d) {
            return c * (t /= d) * t * t + b;
        },
        easeOut: function(t, b, c, d) {
            return c * ((t = t / d - 1) * t * t + 1) + b;
        },
        easeInOut: function(t, b, c, d) {
            if ((t /= d / 2) < 1) return c / 2 * t * t * t + b;
            return c / 2 * ((t -= 2) * t * t + 2) + b;
        }
    },
    Quart: {
        easeIn: function(t, b, c, d) {
            return c * (t /= d) * t * t * t + b;
        },
        easeOut: function(t, b, c, d) {
            return - c * ((t = t / d - 1) * t * t * t - 1) + b;
        },
        easeInOut: function(t, b, c, d) {
            if ((t /= d / 2) < 1) return c / 2 * t * t * t * t + b;
            return - c / 2 * ((t -= 2) * t * t * t - 2) + b;
        }
    },
    Quint: {
        easeIn: function(t, b, c, d) {
            return c * (t /= d) * t * t * t * t + b;
        },
        easeOut: function(t, b, c, d) {
            return c * ((t = t / d - 1) * t * t * t * t + 1) + b;
        },
        easeInOut: function(t, b, c, d) {
            if ((t /= d / 2) < 1) return c / 2 * t * t * t * t * t + b;
            return c / 2 * ((t -= 2) * t * t * t * t + 2) + b;
        }
    },
    Sine: {
        easeIn: function(t, b, c, d) {
            return - c * Math.cos(t / d * (Math.PI / 2)) + c + b;
        },
        easeOut: function(t, b, c, d) {
            return c * Math.sin(t / d * (Math.PI / 2)) + b;
        },
        easeInOut: function(t, b, c, d) {
            return - c / 2 * (Math.cos(Math.PI * t / d) - 1) + b;
        }
    },
    Expo: {
        easeIn: function(t, b, c, d) {
            return (t == 0) ? b: c * Math.pow(2, 10 * (t / d - 1)) + b;
        },
        easeOut: function(t, b, c, d) {
            return (t == d) ? b + c: c * ( - Math.pow(2, -10 * t / d) + 1) + b;
        },
        easeInOut: function(t, b, c, d) {
            if (t == 0) return b;
            if (t == d) return b + c;
            if ((t /= d / 2) < 1) return c / 2 * Math.pow(2, 10 * (t - 1)) + b;
            return c / 2 * ( - Math.pow(2, -10 * --t) + 2) + b;
        }
    },
    Circ: {
        easeIn: function(t, b, c, d) {
            return - c * (Math.sqrt(1 - (t /= d) * t) - 1) + b;
        },
        easeOut: function(t, b, c, d) {
            return c * Math.sqrt(1 - (t = t / d - 1) * t) + b;
        },
        easeInOut: function(t, b, c, d) {
            if ((t /= d / 2) < 1) return - c / 2 * (Math.sqrt(1 - t * t) - 1) + b;
            return c / 2 * (Math.sqrt(1 - (t -= 2) * t) + 1) + b;
        }
    },
    Elastic: {
        easeIn: function(t, b, c, d, a, p) {
            if (t == 0) return b;
            if ((t /= d) == 1) return b + c;
            if (!p) p = d * .3;
            if (!a || a < Math.abs(c)) {
                a = c;
                var s = p / 4;
            } else var s = p / (2 * Math.PI) * Math.asin(c / a);
            return - (a * Math.pow(2, 10 * (t -= 1)) * Math.sin((t * d - s) * (2 * Math.PI) / p)) + b;
        },
        easeOut: function(t, b, c, d, a, p) {
            if (t == 0) return b;
            if ((t /= d) == 1) return b + c;
            if (!p) p = d * .3;
            if (!a || a < Math.abs(c)) {
                a = c;
                var s = p / 4;
            } else var s = p / (2 * Math.PI) * Math.asin(c / a);
            return (a * Math.pow(2, -10 * t) * Math.sin((t * d - s) * (2 * Math.PI) / p) + c + b);
        },
        easeInOut: function(t, b, c, d, a, p) {
            if (t == 0) return b;
            if ((t /= d / 2) == 2) return b + c;
            if (!p) p = d * (.3 * 1.5);
            if (!a || a < Math.abs(c)) {
                a = c;
                var s = p / 4;
            } else var s = p / (2 * Math.PI) * Math.asin(c / a);
            if (t < 1) return - .5 * (a * Math.pow(2, 10 * (t -= 1)) * Math.sin((t * d - s) * (2 * Math.PI) / p)) + b;
            return a * Math.pow(2, -10 * (t -= 1)) * Math.sin((t * d - s) * (2 * Math.PI) / p) * .5 + c + b;
        }
    },
    Back: {
        easeIn: function(t, b, c, d, s) {
            if (s == undefined) s = 1.70158;
            return c * (t /= d) * t * ((s + 1) * t - s) + b;
        },
        easeOut: function(t, b, c, d, s) {
            if (s == undefined) s = 1.70158;
            return c * ((t = t / d - 1) * t * ((s + 1) * t + s) + 1) + b;
        },
        easeInOut: function(t, b, c, d, s) {
            if (s == undefined) s = 1.70158;
            if ((t /= d / 2) < 1) return c / 2 * (t * t * (((s *= (1.525)) + 1) * t - s)) + b;
            return c / 2 * ((t -= 2) * t * (((s *= (1.525)) + 1) * t + s) + 2) + b;
        }
    },
    Bounce: {
        easeIn: function(t, b, c, d) {
            return c - Tween.Bounce.easeOut(d - t, 0, c, d) + b;
        },
        easeOut: function(t, b, c, d) {
            if ((t /= d) < (1 / 2.75)) {
                return c * (7.5625 * t * t) + b;
            } else if (t < (2 / 2.75)) {
                return c * (7.5625 * (t -= (1.5 / 2.75)) * t + .75) + b;
            } else if (t < (2.5 / 2.75)) {
                return c * (7.5625 * (t -= (2.25 / 2.75)) * t + .9375) + b;
            } else {
                return c * (7.5625 * (t -= (2.625 / 2.75)) * t + .984375) + b;
            }
        },
        easeInOut: function(t, b, c, d) {
            if (t < d / 2) return Tween.Bounce.easeIn(t * 2, 0, c, d) * .5 + b;
            else return Tween.Bounce.easeOut(t * 2 - d, 0, c, d) * .5 + c * .5 + b;
        }
    }
}

函数自调用 arguments.callee

    (function() {
      lengthNow -= step;
      if (lengthNow > -step) {
          lengthNow.scrollTop = lengthNow;
          setTimeout(arguments.callee, 20);
      }
  })();

box-sizing 导致的宽高问题原理

来源：http://www.cnblogs.com/huangyin1213/p/6245109.html

css3的Sizing

Box-sizing是css3的box属性之一，遵循css的boxmodel原理，css中box model是分为两种，第一种是w3c的标准模型，另一种是ie的传统模型，他们相同之处都是对元素极端的模型，具体说就是对元素的width，height,padding,border以及元素实际尺寸的计算关系。

w3c的标准box model

外盒尺寸计算(元素控件尺寸)

Element空间高度 = content height +padding+border+margin

Element空间宽度 = content width +padding+border+margin

内盒尺寸计算(元素大小)

Element Height = content Height+padding+border（height为内容的高度）

Element Width = content Width +padding+border(width为内容的宽度)

ie传统下Box Model(ie6一下，不包括ie6版本)

外盒尺寸计算（元素空间尺寸）

Element空间的高度 = content heigth +margin（height包含了元素内容宽度，边框宽度，内距宽度）

Element空间的宽度 = content Width +margin(Width包含了元素内容宽度，边框宽度，内距宽度)

内盒尺寸计算(元素大小)

Element height = content height (height包含了的元素内容高度，边框高度，内距高度)

Element Width = content width(width包含了元素内容宽度，边框宽度，内距宽度)

box-sizing属性定义盒元素尺寸的计算方法：

content-box:默认值，计算方法为width/height = content，表示指定的宽度和高度仅限内容区域，边框和内边距的宽度不包含在内

padding-box:计算方法为width/height = content+padding，表示指定的宽度和高度包含内边距和北荣区域，边框宽度不包含在内

border-box:计算方法为width/height = content+padding+border，表示指定的w/h包含边框，内边距和内容区域。

inherit：表示继承父元素中box-sizing属性的值

正常情况下offsetWidth,offsetHeight获取元素的尺寸是足够了，但是某些元素比如SVG，MathML返回尺寸出错(这里不考虑),css3增加了一个box-sizing选择盒子模型，于是jquery里面就引入了augmentWidthOrHeight这个方法来处理因为box-sizing设置导致的问题，augmentWidthOrHeight这个方法其实就是对盒子模型的一个处理，所以jquery获取一个元素的w/h都是，ele.offsetW/H+augmentHeight方法也可以。

lodash 插件小用延迟抛送数据

    //lodash 是一个优化过的js工具，虽然我还没看懂。
    //如果你想要了解更多，请看中文文档：http://lodashjs.com/docs/#_debouncefunc-wait0-options
    
    /**
    *@param: func (Function): The function to debounce.
    *@param: [wait=0] (number): The number of milliseconds to delay.
    */
    _.debounce(function(){},500);

解决tp5 未定义数组下标等问题

明明php 可以判断未定义数组是否存在，然而tp5的判错函数会将这种情况视为错误
解决办法就是把报错函数的等级改写成 php的报错等级

首先找到 aplication下 common.php
第一行写入error_reporting(E_ERROR | E_WARNING | E_PARSE);

Vue初探笔记

Vue初探笔记

绑定事件

绑定事件可以用v-on，并且在函数中 this 指向了data,
一般文档操作需要转换思路，改为对 app对象进行操作比如

this.message = [String]

<pre class="lang:html decode:true"><!-- html --></pre>
<div id="app-5">{{ message }} <button> 翻滚吧！ </button></div>
<!-- js --> var app5 = new Vue({ el:"#app-5", data:{ 'message':"基拉", }, methods:{ reverseMessage: function(){ this.message = this.message.split("").reverse().join(""); } } })

结合css过渡动画

触发事件不一定要用v-on 使用@click也可以完成简单的点击触发事件
通过切换状态触发css动画，v-enter 可以用 transition的name来代替，比如 .silde-fade-enter
css动画也有技巧：

v-enter: 定义进入过渡的开始状态。在元素被插入时生效，在下一个帧移除。
v-enter-active: 定义进入过渡的结束状态。在元素被插入时生效，在 transition/animation 完成之后移除。
v-leave: 定义离开过渡的开始状态。在离开过渡被触发时生效，在下一个帧移除。
v-leave-active: 定义离开过渡的结束状态。在离开过渡被触发时生效，在 transition/animation 完成之后移除。

hello

实例化的一些小事

如果我实例化的时候没有定义b变量，在监听a变化之后才定义值的话
第一次b会正常显示出来，但是第二次dom（{{ b }}）没有反应但赋值（vm.b）已经变了也就是，
第三次a改变，dom（{{ b }}）显示第二次的结果，但赋值（vm.b）和第三次同步
假如一开始就定义b，就不会发生这种玄学的事情

Vue实例暴露的一些实例属性与方法

到控制台改变data.a的值试试吧数据 a={{ a }}

tip:{{ b }}

jquery.datetimepicker 只依赖jq

demohttp://down.admin5.com/demo/code_pop/18/1202/

ch那里改成

    ch:{ // Simplified Chinese
                months: [
                    "一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一月","十二月"
                ],
                dayOfWeek: [
                    "周日","周一", "周二","周三","周四","周五","周六"
                ]
            },

调用

    //插件
        $(".date").datetimepicker({
            step:5,
            lang:'ch',
            timepicker:false,
            format:'Y-m-d 00:00:00',
            formatDate:'Y-m-d 00:00:00',
     });

百度地图初使用

百度地图api 1.2
类库列表：[http://lbsyun.baidu.com/index.php?title=open/library]
GeoUtils地图几何类文件-参考[http://api.map.baidu.com/library/GeoUtils/1.2/docs/symbols/BMapLib.GeoUtils.html]
引用<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.2&ak=密钥"></script>
密钥来源：http://lbsyun.baidu.com/apiconsole/key

百度地图api 2.0
引用<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=密钥"></script>
密钥来源：http://lbsyun.baidu.com/apiconsole/key

tp 3.2 模板通过include传值来高亮导航

1.页面文件引入导航模板

2.导航模板





    
        
            数据采集
            售后对账结果
            应收款项对账结果
            系统配置