1. 程式人生 > >Javascript面向物件例子--下雪效果

Javascript面向物件例子--下雪效果

javascripts中到底什麼是面向物件,直到現在我也很難說清楚,我看了網上的解釋也是雲裡霧裡,總覺得有些人故意把這個概念說的太專業,一大堆“深奧”的名詞,原型鏈,構造物件等等,其實對於新手來說,還沒理解到原理的地步,就像一個外掛,在你沒有能力之前,只需要知道如何使用,不用管他的底層原理。所以我自己參考了一些資料,用js面向物件試著寫了一個下雪的效果,先來看看效果圖。
這裡寫圖片描述
說一下總體思路:既然是面向物件,那首先建立一個物件,用定時器控制不斷建立雪花物件,並定義物件的屬性和方法;然後利用prototype,將物件的屬性和方法繼承過來,從而達到屬性方法複製的目的,這樣我們就能編寫自己想要的功能了;然後隨機雪花在頂部出現的位置,還有建立控制雪花下落速度的方法,不要忘了讓雪花到底部的時候消失,否則雪花會越來越多,直到瀏覽器崩潰~
下面是完整程式碼(public.js是自己封裝的一些方法,用於生成隨機數等,你們需要稍作修改)

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            *{
                margin:0;
                padding:0;
            }
            html{
                height:100%;
            }
body{ height:100%; background:url(img/mounten.jpg) center center no-repeat; background-size:cover; overflow:hidden; }
</style> </head> <body> <script src="js/public.js" type
="text/javascript" charset="utf-8">
</script> <script type="text/javascript"> //獲得瀏覽器寬高 var scWid = document.documentElement.offsetWidth||document.body.offsetWidth; var scHei = document.documentElement.offsetHeight||document.body.offsetHeight; var oBody = document.getElementsByTagName("body")[0]; //建立雪花建構函式 function SnowFlake(par,scWid,scHei){ this.par = par; this.scWid = scWid; this.scHei = scHei; this.createFlake(); } //建立雪花成員變數 SnowFlake.prototype.createFlake = function(){ this.allTime = oMath.getRan(5,10); this.wid = oMath.getRan(20,30); this.maxL = this.scWid - this.wid; this.ele = document.createElement("img"); this.ele.src = "img/snowflake.png"; this.ele.style.cssText = "position:absolute;left:"+oMath.getRan(0,this.maxL)+"px;top:"+(-this.wid)+"px;width:"+this.wid+"px;-webkit-transition: all "+this.allTime+"s;-moz-transition: all "+this.allTime+"s;-ms-transition: all "+this.allTime+"s;-o-transition: all "+this.allTime+"s;transition: all "+this.allTime+"s;"; oBody.appendChild(this.ele); this.fall(); } //控制雪花成員下落方法 SnowFlake.prototype.fall = function(){ var that = this; (function(that){ setTimeout(function(){ that.ele.style.top = that.scHei + "px"; },10); that.time = setInterval(function(){ var nowTop = parseInt(oGet.getStyle(that.ele,"top")); if(nowTop>=that.scHei){ clearInterval(that.time); //移除雪花 that.par.removeChild(that.ele); } },100) })(that); } //定時器建立物件 setInterval(function(){ for(var i=0;i<oMath.getRan(5,10);i++){ var newFlake = new SnowFlake(oBody,scWid,scHei); } },1000) </script> </body> </html>

相關推薦

Javascript面向物件例子--下雪效果

javascripts中到底什麼是面向物件,直到現在我也很難說清楚,我看了網上的解釋也是雲裡霧裡,總覺得有些人故意把這個概念說的太專業,一大堆“深奧”的名詞,原型鏈,構造物件等等,其實對於新手來說,還沒理解到原理的地步,就像一個外掛,在你沒有能力之前,只需要知道

JavaScript 面向物件程式設計實現

JavaScript 面向物件程式設計實現 本文主要講述js面向物件的實現方式(繼承) 面向物件本來就是把某些問題(邏輯),用物件的方式描述,使得業務邏輯能更加清晰,提高維護性,降低實現複雜度。 面向物件的三大特徵:封裝,多型,繼承。(JavaScript 是沒有多型的特性的

javascript面向物件程式設計--惰性載入函式(瀏覽器相容性處理)

因為各大瀏覽器所使用的JS引擎不同,所以在實現某一個功能時都或多或少的存在差異,導致在寫程式碼時要針對每一個功能給出相容瀏覽器的不同實現方式,這樣在執行程式碼時就會造成效能的損耗。所以就出現了惰性載入函式的概念。原理就是:當前瀏覽器第一次支援以該方法實現某功能,那麼在這個頁面執行期間會一直都支援該方

javascript面向物件程式設計--繼承--多重繼承+摻元類(多親繼承)

繼承一般包括 單向繼承 和 多重繼承   多重繼承:一個子類繼承多個超類 function A(x){this.x=x;} A.prototype.getx=function(){return  this.x;} function B(y){this.y=y;}

javascript面向物件程式設計--設計超類和子類,設計元類

在javascript中,Object物件是通用類,其他所有內建物件和自定義構造物件都是專用類,即Object物件是超類,其他內建物件和自定義物件都是Object的子類,所有在javascript語言中,所有的物件都繼承Object定義的屬性和方法 Object.prototype.name='

javascript面向物件程式設計--安全構造物件

建構函式 其實就是一種 使用new運算子的函式 function Person(name,age,job){      this.name=name;     this.age=age;     this.job=

javascript面向物件程式設計--惰性例項化(實現按需例項化)

javascript是以物件為基礎,以函式為模型,以原型為繼承機制的開發模式 惰性例項化:避免在頁面中使用javascript初始化執行時就例項化類,而是將一些類的例項化推遲到需要時候才去例項化,避免資源過早的消耗 var myNamespace=function(){   &

javascript面向物件程式設計--建構函式 實現動態構造

在面向物件過程中,構造和析構是類的兩個重要特性,建構函式在物件建立時候呼叫,解構函式在物件銷燬時被呼叫 建構函式:   function F(x,y){ this.x=x;this.y=y}   var f=new F(1,2);  alert(f.co

javascript面向物件程式設計--多型

方法過載和覆蓋(重寫) 過載:同名方法可以有多個實現,根據引數的型別,引數值,引數個數決定執行行為 var map=function(arr,callback,pThis){    var len=arr.length;   var rlt=new Ar

javascript面向物件程式設計--靜態方法

在面向物件程式設計中,類是不能夠直接訪問的,必須例項化後才可以訪問,大多數方法和屬性與類的例項產生聯絡。但是靜態屬性和方法與類本身直接聯絡,可以從類訪問,如javascript的核心物件中的Math和Global都是靜態物件,不需例項化,可以直接訪問 類的靜態成員(屬性和方法)包括私有和共有兩種

javascript面向物件程式設計--繼承--複製繼承+克隆繼承 混合繼承(常用)

複製繼承:利用for/in語句遍歷物件成員,逐一複製給另一個物件 funciton F(x,y){   this.x=x;  this.y=y; this.add=function(){      return this.x+th

javascript面向物件程式設計--繼承--例項繼承

類繼承和原型繼承的弊端:          它們在客戶端是無法繼承DOM物件的,同時他們也不支援繼承系統物件和方法 類繼承: function D(){ Date.apply(this.arguments);} var d=new D

JavaScript 面向物件(一)——原型

一、類,物件,函式 var obj = {};//物件 obj.num = 10;//js物件中成員的增加,可以通過直接賦值實現 console.log(obj); console.log(window); 執行結果: obj可以看做window的一個成員。 //fun是一

JavaScript 面向物件之二 —— 函式上下文(call() 和 apply())

本系列文章根據《愛前端邵山歡老師深入淺出的js面向物件》視訊整理歸納 call() 和 apply() 這兩個都是函式的方法,只有函式能夠通過點方法呼叫call()、apply(),表示用指定的上下文執行這個函式。 如下,定義一個函式 fun,當 fun 函式裡

JavaScript 面向物件之二 —— 函式上下文(this的指向)

本系列文章根據《愛前端邵山歡老師深入淺出的js面向物件》視訊整理歸納 函式上下文 在 JavaScript 中,函式的上下文是有規律可循的,基本可以分為以下幾項: 規律一:函式用圓括號呼叫,函式上下文是 window 物件。 如下,函式 function f

JavaScript 面向物件之一 —— 物件物件的方法)

本系列文章根據《愛前端邵山歡老師深入淺出的js面向物件》視訊整理歸納 物件的方法 如果一個物件的屬性值是一個函式,我們稱這個屬性為這個物件的方法(method)。 var obj = { name : "張鑫", sex : "男", s

JavaScript 面向物件之一 —— 物件物件與JSON的區別)

本系列文章根據《愛前端邵山歡老師深入淺出的js面向物件》視訊整理歸納 物件與JSON的區別 JSON 就是 JavaScript object notation ,JavaScript 物件表示法。是 JavaScript 物件的嚴格子集。 JSON 要求所有

JavaScript 面向物件之一 —— 物件(認識物件

本系列文章根據《愛前端邵山歡老師深入淺出的js面向物件》視訊整理歸納 認識物件 物件在JavaScript中分為狹義物件和廣義物件兩種。 ● 所謂的狹義物件,就是用{}這種字面量的形式定義的物件,它是一組屬性的無序集合 var obj = { n

介紹JavaScript面向物件

JavaScript中的引用型別 引用型別通常叫做類(class),也就是遇到引用值或者處理的物件。但是從嚴格意義上講JavaScript並不是面向物件的,而是基於物件(object)的。之所以說是基於面向物件的原因是JavaScript中並沒有類似Java中的多型,抽象,過載等面嚮物件語言

javascript 面向物件的幾種常見寫法(轉)

//定義Circle類,擁有成員變數r,常量PI和計算面積的成員函式area()  文章轉自:http://www.iteye.com/topic/434462 1.工廠方式 var Circle = function() { var obj = new Object