本文目录一览：
- 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方法后面有说，是自己封装的。
然后进行舞台循环设置，上面有注释了，就不说了。
