實現小功能窗口右下角消息彈窗框
遇到的問題:寫完窗口右下角消息彈窗框代碼后,功能沒有實現,重要是在頁面上的控制台還沒有報錯,而且在用嚴格模式下,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();
}