包含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方法后面有说，是自己封装的。

然后进行舞台循环设置，上面有注释了，就不说了。