原生js面向對象式編程實現彈幕,原生js彈窗

本文目錄一覽：

• 1、請問一下js面向對象編程在網頁中什麼情況下才需要用到？
• 2、如何用面向對象的方法用寫JS
• 3、js面向對象的幾種方式
• 4、js實現視頻發送彈幕文字可暫停

請問一下js面向對象編程在網頁中什麼情況下才需要用到？

比如：做網頁輪播效果。效果是必須滿足可以在不同的HTML（相同的布局方式）、不同的DOM節點或則同個頁面多個輪播效果等。這種時候你就可以考慮封裝一個通用的輪播功能，然後實例化（new）該對象以實現效果。其實，面向對象只是一種在編寫程序中的一種思維方式，然而封裝網頁輪播效果你也可以用面向過程化來解決問題

如何用面向對象的方法用寫JS

1，html寫好界面，定義好class和id

2，為了模擬出撲克牌21點遊戲，應先定義卡牌池中有1-10，J,Q,K每個數字和字母分別有4個

3，js中實現界面交互，如點擊開始按鈕，隨機從卡牌池中抽取一個數字或字母存入臨時變數a，並附於點數之和num其相應的點數

4，點擊抽牌按鈕隨機從卡牌池剩餘的卡牌中抽取，對應的卡牌存入變數a中，點數之和num=num+本次抽卡的點數

5，當num21時提示玩家爆點，小於21點時可選按鈕抽牌，等於21點時提示恭喜之類的話，如果點擊完成抽牌則記錄此玩家點數

6，同理可擴充玩家至2,3,4….個，原理相同，不同玩家存儲對應的變數就可以了，最終通過所有=21點的玩家num,num1,num2來判斷輸贏

7，同理可設置莊家，莊家在與其他玩家點數相同時贏得對方

8，在此基礎上就能增添許多功能了，比如每個玩家默認100金幣，有底注，每輪開始的時候可加註，如玩家不跟則底注輸掉無法參加遊戲，等等之類的各種規則隨便發揮

js面向對象的幾種方式

JavaScript中對象的創建有以下幾種方式：

（1）使用內置對象

（2）使用JSON符號

（3）自定義對象構造

一、使用內置對象

JavaScript可用的內置對象可分為兩種：

1，JavaScript語言原生對象（語言級對象），如String、Object、Function等；

2，JavaScript運行期的宿主對象（環境宿主級對象），如window、document、body等。

我們所說的使用內置對象，是指通過JavaScript語言原生對象的構造方法，實例化出一個新的對象。如：

複製代碼 代碼如下:

var str = new String(“實例初始化String”);

var str1 = “直接賦值的String”;

var func = new Function(“x”,”alert(x)”);//示例初始化func

var o = new Object();//示例初始化一個Object

二、使用JSON符號

（i）何謂JSON ?

JSON （JavaScript Object

Notation）即JavaScript對象命名，是一種輕量級的數據交換格式，易於閱讀和編寫，同時也易於及其解析和生成。它基於

《JavaScript Programming Language, Standard ECMA-262 3rd Edition –

December 1999》的一個子集。JSON是完全獨立於語言的文本格式，因此成為數據交換的理想格式。

JSON作為

JavaScript的一個自己，同時ActionScript、C、C#、ColdFusion、E、Java、JavaScript、ML、

ObjectiveCAML、Perl、PHP、Python、Rebol、Ruby、Lua等一系列的語言都提供支持，使得JSON成為Ajax開發的

首選方案。

JSON有兩種構建方式，一種是採用簡單的「鍵/值對」的集合，在不同的語言中被理解為對象、記錄、結構、字典、哈希表、有鍵列表，或者關聯數組等，另一種採用有序的值列表，大部分語言把它理解為數組。

常用的創建方式是第一種，即採用「鍵/值對」集合的形式。在這種形式下，一個對象以「{」（左括弧）開始，「}」（右括弧）結束。每個「名稱」後跟一個「:」（冒號），「

『鍵/值’ 對」之間使用「,」（逗號）分隔。

JSON具有以下特點：（1）簡單格式化的數據交換；（2）易於人們的讀寫習慣；（3）易於機器的分析和運行。

在JavaScript中，JSON被理解為對象。通過字元串形式的JSON，數據可以很方便地解析成JavaScript獨享，並進行數據的讀取傳遞。通過JSON，在一定程度上客服了JavaScript對象無法作為參數系列化傳遞的問題。

1，簡單的JSON

{name:”劉德華”,age:”25″,sex:”男”}

2，JSON值的類型

JSON的值可以是簡單的數據類型，例如數字、浮點、字元等，也可以是數組及對象。例如以數組作為member鍵值的JSON：

{member:[{name:”劉德華”},{name:”郭富城”},{name:”張學友”},{name:”黎明”}]}

{

book:[{name:”三國演義”},{name:”西遊記”},{name:”水滸傳”},{name:”紅樓夢”}],

author:[{name:”羅貫中”},{name:”吳承恩”},{name:”施耐安”,{name:”曹雪芹”}}]

}

3，在JavaScript中使用JSON

JSON是JavaScript原生格式，這意味著在JavaScript中處理JSON數據不需要任何特殊的API或者工具包，JavaScript默認將JSON當做一個對象處理。

將對象傳遞給一個變數，例如：

複製代碼 代碼如下:

var somebooks = {

book:[{name:”三國演義”},{name:”西遊記”},{name:”水滸傳”},{name:”紅樓夢”}],

author:[{name:”羅貫中”},{name:”吳承恩”},{name:”施耐安”,{name:”曹雪芹”}}]

}

JSON的每個「鍵」相當於對象的屬性，例如訪問book中的第一個條目，在JavaScript中，就可以簡單地使用「somebooks.book[0].name」來獲取「三國演義」這個值。

我們不但可以將一個JSON字元串轉化為對象，反過來將一個對象「編譯」為一個JSON字元串，以方便JavaScript中的對象的傳輸。例如：

複製代碼 代碼如下:

var Animals = new Object();

Animals.name = “dog”;

Animals.sex = “Male”;

Animals.age = “2”;

Animals對象無法被序列化傳輸，將Animals對象轉化為JSON字元串，也就是「{name:”dog”,sex:”Male”,age:”2″}」。這樣，把該JSON字元串作為HTTP請求的一個參數傳遞，從而達到序列化傳輸Animals對象的目的。

（ii）JSON通過字元串形式來表達JavaScript的對象。如：

複製代碼 代碼如下:

var myObject = {nickname:”my girlfried”,name:”big

pig”};

JSON

實際上充當了一種在JavaScript對象和字元串之間實現相互轉換的協議。由於JSON的「外表」可以看成但村的字元串，因此JSON在

JavaScript的對象傳輸方面可以起到一定的作用。例如把對象strObject轉換成字元串後進行傳輸，在達到目的地後通過eval方法將其還原

成對象：

複製代碼 代碼如下:

function test (o)

{

alert (o.name)

}

var strObject = ‘{nickname:”my girlfriend”,name:”big pig”}’;

test (eval_r(“(” + strObject + “)”));

三、自定義對象構造

創建高級對象構造有兩種方式：使用「this」關鍵字構造、使用原型prototype構造。如：

複製代碼 代碼如下:

//使用this關鍵字定義構造的上下文屬性

function Girl()

{

this.name = “big pig”;

this.age = 20;

this.standing;

this.bust;

this.waist;

this.hip;

}

//使用prototype

function Girl(){}

Girl.prototype.name = “big pig”;

Girl.prototype.age = 20;

Girl.prototype.standing;

Girl.prototype.bust;

Girl.prototype.waist;

Girl.prototype.hip;

alert(new Girl().name);

上例中的兩種定義在本質上沒有區別，都是定義「Girl」對象的屬性信息。「this」與「prototype」的區別主要在於屬性訪問的順序。如：

複製代碼 代碼如下:

function Test()

{

this.text = function()

{

alert(“defined by this”);

}

}

Test.prototype.test = function()

{

alert(“defined by prototype”);

}

var _o = new Test();

_o.test();//輸出「defined by this」

當訪問對象的屬性或者方法是，將按照搜索原型鏈prototype

chain的規則進行。首先查找自身的靜態屬性、方法，繼而查找構造上下文的可訪問屬性、方法，最後查找構造的原型鏈。

「this」

與「prototype」定義的另一個不同點是屬性的佔用空間不同。使用「this」關鍵字，示例初始化時為每個實例開闢構造方法所包含的所有屬性、方法

所需的空間，而使用「prototype」定義，由於「prototype」實際上是指向父級的一種引用，僅僅是個數據的副本，因此在初始化及存儲上都比

「this」節約資源。

js實現視頻發送彈幕文字可暫停

這是要自己設置彈幕模式啊。

看見沒，在發送彈幕的左邊有選項可以選擇彈幕模式的，你想要停止不動的就選非滾動的彈幕就可以了。