标签：
2016年4月23学习经历总结
作为一个前端初学者来说，初学的路上肯定会遇到很多问题，遇到问题的时候不要怕，相信自己，耐心、努力、坚持、方法、总结。
今天用javascript、HTML、CSS在做一个窗口右下角消息弹窗框遇到问题了，
遇到的问题：写完窗口右下角消息弹窗框代码后，功能没有实现，重要是在页面上的控制台还没有报错，而且在用严格模式下，js依然没有报错
作为一个菜鸟目前来说，我是用笨方法去排除，
怎么解决问题：
1、检查JS代码，语法，发现没有错，（如果有错的话控制台也会报错吧！）
2、检查html代码，没有错
3、检查css样式，发现存放css样式的文件路径放错了
完成解决问题：修改css样式之后，在运行代码，发现果然可以运行。
总结今天的经历：写程序就是要细心做每一步小步骤，严格要求自己养成良好的习惯，如，代码缩进，耐心调试代码，解决每一个问题。
扩展今天的知识点：编程上的对象，在内存中一段有意义的区域，具备相关的成员变量和成员函数（方法）；
面向对象：面向对象是一种对现实世界理解和抽象的方法，90年代软件开发的主流，计算机编程技术发展到一定阶段后的产物。
具备3个特点：封装、继承、多态
封装：将一个事物的属性和功能集中封装在一个对象中，代码重用，更方便程序开发，
封装的方法：1、直接量封装一个函数对象
Var obj={属性名：”属性值”，}, 方法名：function(){...this.属性名...}
2、构造函数反复创建多个相同结构对象2个步骤
1、定义构造函数：
function 类型名(属性参数){this.属性名=属性参数; this.方法名=function(){}}
2、实例化类型对象
var newobj=new 类型名(属性值列表);
构造函数是用来初始化新创建的对象，并且新创建的对象会继承构造函数的原型
new创建了一个对象，让空对象继承了构造函数的原型，调用构造函数向空对象中添加属性和方法，返回新对象的地址给变量
定义对象的类，让每个对象都共享某些属性，类的实现是基于其原型继承机制的
什么是继承：父对象的成员，子对象可以继承使用，实际上就是构造函数初始化之后的的空对象可以使用构造函数的原型对象
什么是多态：同一类型对象或父子对象之间都存在中差异
如有错误，欢迎各位前辈纠正！
窗口右下角消息弹出框js代码
//直接量封装一个函数对象
var adv={
distance:0,//总距离
duration:5000,//总时长 5秒上升
steps:50,//总步长，上升的速度，步数
timer:null,//计时器
moved:0,//移动步数
interval:0,//间隔
step:0,//步数，步长
wait:5000,//下落后等待上升的时间 5秒
//创建一个init函数，
init:function(){
//总距离=获得计算后元素的msg高,转为浮点数 //bottom:-200px;
this.distance=parseFloat(getComputedStyle(msg).height);
//间隔=总时长/总步长 (每一步走的时间)
this.interval=this.duration/this.steps;
//步长=总距离/总步长
this.step=this.distance/this.steps;
//计时器=一次性定时器(adv的移动的绑定(adv，1) ，adv的间隔); timer=setTimeout(task,wait)
this.timer=setTimeout(this.move.bind(this,1),this.interval);
},
//创建上移的任务函数
move:function(n){
//获得msg元素计算后样式的bottom,转化为浮点数，保存在变量bottom中
var bottom=parseFloat(getComputedStyle(msg).bottom);
//msg底部样式=底部+参数n*adv的步长+"px";
msg.style.bottom=bottom+n*this.step+"px";
//adv的移动步数+1
this.moved++;
//如果(adv的移动<adv的总步长)
if(this.moved<this.steps){
//就启动：adv计时器=一次性定时器(adv的移动的绑定(adv,n),adv间隔)
this.timer=setTimeout(this.move.bind(this,n),this.interval);
}else{//否则
//停止执行(adv的计时器)
clearTimeout(this.timer);
//adv的计时器为空，dav的移动归0
this.timer=null; this.moved=0;
//如果参数==-1
if(n==-1){
//启动一次性定时器(adv的移动的绑定(adv,1),avd的等待)
setTimeout(this.move.bind(this,1),this.wait);
}
}
},
//定义一个向下移动的方法
moveDown:function(){
//如果计时器为空
if(this.timer==null){
//调用move方法，传入-1作为参数
this.move(-1);
}
}
}
//window的加载方法，adv的init方法
window.onload=function(){
adv.init();
}
2016年4月23学习经历总结（实现小功能窗口右下角消息弹窗框）
标签：
原文地址：http://www.cnblogs.com/jiayingzi/p/5425215.html
