包含createjs文字分行的詞條

本文目錄一覽：

• 1、javascript在追加元素節點時怎麼換行？
• 2、javascript實現可編輯樣式的文本
• 3、如何使用Createjs來編寫HTML5遊戲完成一個簡單的打飛機遊戲
• 4、js動態的在頁面上增加或刪除三個文本框並換行
• 5、如何使用Createjs來編寫HTML5遊戲TweenJS和Tick動畫

javascript在追加元素節點時怎麼換行？

做了個頁面，看下面的粗體部分

html xmlns=” “

head

title/title

/head

body

script type=”text/javascript”

var k=1;

function aa()

{

k=k+1;

var fnode=document.body.lastChild;

//創建元素節點

var mynode=document.createElement(“input”);

//給元素添加屬性

mynode.id=k;//這裡應該用k吧，而不是”k”

mynode.type = “text”;

var br = document.createElement(“br”);

//把創建的節點添加到指定節點中

fnode.appendChild(mynode);

fnode.appendChild(br);//添加一個換行

}

/script input type=”button” onclick=”aa()” value=”sfsf” /

div id=”sdfsdf”/div

/body

/html

javascript實現可編輯樣式的文本

你要的是所見即所得HTML編輯器，簡單來說需要幾個基本步驟：

1，需要一個可以編輯同時又可顯效果的編輯框。textarea不行，它只能用來輸入純文本，不能顯示顏色、斜體之類的文字樣式，就像記事本。

你可以使用iframe來實現，修改iframe的designMode屬性使其可以被編輯。

iframe id=”myEditer” width=”100%” height=”150px”/iframe

scriptmyEditer.document.designMode = ‘on’;/script

這樣你就可以在這個iframe區域里寫字了。

2，選中要添加樣式的文字。通常我們用WORD編輯一段文字的樣式時，一般是先打字，再編輯樣式。所以你需要一個選中要處理文本的方法。JS的selection.createRange()可以選中文本，返回一個對象，你可以通過訪問該對象的text屬性得到被選中的文本。

iframe id=”myEditer” width=”100%” height=”150px”/iframe

input type=”button” value=”加粗” onclick=”Bold()”

script

myEditer.document.designMode = ‘on’;

function Bold(){

var sel = myEditer.document.selection.createRange();

alert(sel.text);

}

/script

3，改變被選中文本的樣式。selection.createRange()選中文本，返回一個對象，該對象有一個方法execCommand()，可以用來改變被選中文本的樣式。

iframe id=”myEditer” width=”100%” height=”150px”/iframe

input type=”button” value=”加粗” onclick=”Bold()”

script

myEditer.document.designMode = ‘on’;

function Bold(){

var sel = myEditer.document.selection.createRange();

//alert(sel.text);

sel.execCommand(“Bold”)

}

/script

execCommand()的常用用法：

字體–宋體、黑體、楷體等

execCommand(“fontname”,””,字體)

字型大小–字型大小大小

execCommand(“fontsize”,””,字型大小)

加重

execCommand(“Bold”)

斜體

execCommand(“Italic”)

下劃線

execCommand(“Underline”)

刪除線

execCommand(“StrikeThrough”)

居左

execCommand(“JustifyLeft”)

居右

execCommand(“JustifyRight”)

居中

execCommand(“JustifyCenter”)

剪切

execCommand(“Cut”)

拷貝

execCommand(“Copy”)

粘貼

execCommand(“Paste”)

取消操作–IE5.0以後可以無限取消

execCommand(“Undo”)

重複操作

execCommand(“Redo”)

把上面的每個用法用按鈕來實現，你就已經完成了一個簡單的可視文本編輯器。

如何使用Createjs來編寫HTML5遊戲完成一個簡單的打飛機遊戲

CreateJS包含4個部分，EaselJS、TweenJS、PreloadJS、SoundJS，其中最主要的部分EaselJS包含了開發Html5遊戲的所有功能，僅僅使用EaselJS幾乎可以完成所有的開發工作，其餘三項可以看作EaselJS的輔助工具。比如響應tick事件然後改變元素坐標就可以實現動畫功能，而使用TweenJS來創建補間動畫，則可以省去你很多代碼，簡化了操作。一個簡單的tick動畫看起來是這樣的：pre t=”code” l=”js”var stage, circle;

function init(){

stage = new createjs.Stage(document.getElementById(‘game’));

createjs.Ticker.addEventListener(“tick”, handleTick);

createjs.Ticker.setFPS(60);

circle = new createjs.Shape();

circle.graphics.f(“red”).dc(0,0,50);

circle.x = 0;

circle.y = 100;

stage.addChild(circle);

circle.addEventListener(“click”, function(event){

createjs.Ticker.setPaused(!createjs.Ticker.getPaused());

});

}

function handleTick(event){

if(!event.paused){

circle.x +=5;

if(circle.x 1000){

circle.x = 0;

}

}

stage.update();

}

js動態的在頁面上增加或刪除三個文本框並換行

html

head

titlejs動態的在頁面上增加或刪除一個文本框/title

script type=”text/javascript”

!–

var textNumber = 1;

function addTextBox(form, afterElement) {

// Increment the textbox number

textNumber++;

// Create the label

var p = document.createElement(“p”);

p.id=”txt”+textNumber;

var label = document.createElement(“label”);

// Create the textbox

var textField = document.createElement(“input”);

textField.setAttribute(“type”,”text”);

textField.setAttribute(“name”,”biaozhundaan”+textNumber);

textField.setAttribute(“id”,”biaozhundaan”+textNumber);

// Add the label’s text

label.appendChild(document.createTextNode(“第”+textNumber+”空: “));

// Put the textbox inside(裡面)的//把文本框放進去

label.appendChild(textField);

// Add it all to the form fengshu

p.appendChild(label);

var label = document.createElement(“label”);

// Create the textbox

var textField = document.createElement(“input”);

textField.setAttribute(“type”,”text”);

textField.setAttribute(“name”,”pingfengA”+textNumber);

textField.setAttribute(“id”,”pingfengA”+textNumber);

// Add the label’s text

label.appendChild(document.createTextNode(“評分詞”+textNumber+”: “));

// Put the textbox inside(裡面)的//把文本框放進去

label.appendChild(textField);

// Add it all to the form

p.appendChild(label);

var label = document.createElement(“label”);

// Create the textbox

var textField = document.createElement(“input”);

textField.setAttribute(“type”,”text”);

textField.setAttribute(“name”,”fengshu”+textNumber);

textField.setAttribute(“id”,”fengshu”+textNumber);

// Add the label’s text

label.appendChild(document.createTextNode(“分數”+textNumber+”: “));

// Put the textbox inside(裡面)的//把文本框放進去

label.appendChild(textField);

// Add it all to the form

//

p.appendChild(label);

form.insertBefore(p,afterElement);

return false;

}

function removeTextBox(form) {

if (textNumber  1) { // If there’s more than one text box

// Remove the last one added

form.removeChild(document.getElementById(“txt”+textNumber));

textNumber–;

}

}

//–

/script

/head

body

form id=”myForm” method=”get” action=”./” /

labelText Box #1a: input type=”text” name=”txt1″ id=”txt1″ //label

p

input type=”button” value=”Add Textbox” onClick=”addTextBox(this.form,this.parentNode); ” /

input type=”button” value=”Remove Textbox” onClick=”removeTextBox(this.form)” /

/p

pinput type=”Submit” value=”Submit” //p

/form

/body

/html

如何使用Createjs來編寫HTML5遊戲TweenJS和Tick動畫

createJs的由來，基礎什麼的就不說了，就直接說createJs的用法吧。

首先到createJs官網下載，createJs分成easelJs（圖形動畫）、preloadJs（文件載入）、soundJs（音頻控制）以及tweenJs（補間動畫）四部分，大家下載的時候，建議下載兩個文件，一個是壓縮版文件，用於項目中的引用，再下載個源碼文件，用於查看用法、API、demo等。因為樓主目前只用了easelJs和preloadJs，所以暫時就只說這兩個，其實就這兩個已經非常夠用了。

接下來開始分析代碼：

首先引入js文件

script src=”easeljs-0.7.1.min.js”/script

script src=”preloadjs-0.4.1.min.js”/script

然後進行舞台初始化操作：

function init(){

stage = new createjs.Stage(“cas”);

C_W = stage.canvas.width;

C_H = stage.canvas.height;

var manifest = [

{src:”image/man.png” , id:”man”},

{src:”image/ground.png” , id:”ground”},

{src:”image/bg.png” , id:”bg”},

{src:”image/high.jpg” , id:”high”},

{src:”image/coins.png” , id:”coin”}

]

loader = new createjs.LoadQueue(false);

loader.addEventListener(“complete” , handleComplete);

loader.loadManifest(manifest);

drawLoading();

}

上面就用到了preloadJs中的方法，實例化一個loader，把需要載入的圖片文件放在manifest裡面，進行載入，載入完成後調用回調handleCompelete函數：

function handleComplete(){ //當圖片素材load完後執行該方法

var manImage = loader.getResult(“man”),

lowground = loader.getResult(“ground”),

highground = loader.getResult(“high”),

bgImage = loader.getResult(“bg”),

coins = loader.getResult(“coin”);

sky = new createjs.Shape();

sky.graphics.bf(bgImage).drawRect(0,0,C_W,C_H);

sky.setTransform(0, 0, 1 , C_H/bgImage.height);

stage.addChild(sky);

man = createMan(200,326,manImage);

//該框為判定角色的判定區域

kuang = new createjs.Shape();

kuang.graphics.beginStroke(“rgba(255,0,0,0.5)”).drawRect(0 , 0 , man.size().w , man.picsize().h*1.5);

// stage.addChild(kuang);

mapHandle(lowground , highground , coins);

createjs.Ticker.timingMode = createjs.Ticker.RAF;//設置循環方法，可以是requestAnimationFrame或者是setTimeout

createjs.Ticker.setFPS(30);//舞台幀率控制

createjs.Ticker.addEventListener(“tick”, tick);//綁定舞台每一幀的邏輯發生函數

window.addEventListener(“keydown” , function(event){

event = event||window.event;

if(event.keyCode===32man.jumpNumman.jumpMax){

man.jump();

}

})

}

獲得載入完成後端的圖片數據就直接用loader.getResult就可以獲取了，跑酷遊戲需要一個背景，所以，我們實例化一個sky，然後進行點陣圖繪製，bf方法是beginBitmapFill的縮寫，該方法就是開始繪製點陣圖，後面的drawRect是點陣圖的繪製區域，區域當然是整個畫布啦，所以就是drawRect(0,0,C_W,C_H)。實例化出來sky後就直接添加到舞台stage裡面就行了。接下來是實例化一個角色，createMan方法後面有說，是自己封裝的。

然後進行舞台循環設置，上面有注釋了，就不說了。