标题: 网页制作前台之javascript
作者: dnawo
日期: 2007-01-18 09:31 PM
分类: 脚本语言
内容: 如果你完全不懂，那么期望1-2周看完一遍拉倒....不用看的太仔细，后面再看到不懂的时候回头去看这些东西好了
1. 前言和准备工作
这里不会介绍什么软件的用法一类的东西。如果觉得手写代码是在装的人可以出去了，谢谢。
首先你要有台电脑。然后它应该装着windows 和 IE。下面所谈到的代码都仅在IE6.0下调试通过，但是我会尽量用标准的写法。这里先不仔细介绍兼容性问题了，那是另一个教程的事情。我习惯用记事本或者UltraEdit来编辑，实际上任何文本编辑器都可以，只要你喜欢。具体怎么用这些工具就不说了，俺们加快速度。
2. 第一个例子
做什么好呢？俺们从最简单的开始吧....给自己一个作个特效玩玩？...让俺想想....做一个可以扔的方块怎么样？开始做了...
2.1 方块
HTML代码
[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]
不要说俺在敷衍啊，万事都有个非常简单的开始，就像俺被俺前mm踹掉一样...
ps： 细心的朋友也许会发现俺的 cursor 用的是 pointer 而不是 hand，这是因为hand 属性不符合标准。虽然俺只为IE写代码，但是保持好的习惯是必要的。以后此类问题一律用 “(兼)”标记。
2.2 可以拖动的方块
2.21 绑定鼠标事件：按下，拖动，释放；获取事件信息：位置，发生的元素
HTML代码I am a div.
function divBlock_event_mousedown(){
document.onmousemove=document_event_mousemove;
var I_do_not_care=document.attachEvent?document.attachEvent("onmouseup",document_event_mouseup):document.addEventListener("mouseup",document_event_mouseup,"");
}
function document_event_mousemove(e){
var e, obj;
obj=document.getElementById("divBlock");
e=window.event?window.event:e;
obj.firstChild.nodeValue=e.clientX+":"+e.clientY;
}
function document_event_mouseup(e){
document.onmousemove="";
var I_do_not_care=document.detachEvent?document.detachEvent("onmouseup",document_event_mouseup):document.removeEventListener("mouseup",document_event_mouseup,"");
}
[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]
对于菜鸟来说，这段代码其实包含了很多的内容。
⑴ 变量的命名
这是个非常重要的东西，我不得不把这段话编号为 2.210 就是为了提醒刚入门的菜鸟 － 用一个自己能明白的名字去命名你的变量。如果你要以此为生，最好也要让你的变量名能被别人看懂。
⑵ 绑定事件 － 回字的四种写法
a) 直接在HTML元素标记中写入： onmousedown="divBlock_event_mousedown();"
b) 将事件函数的句柄赋值给相应的事件：document.onmousemove=document_event_mousemove; （注意赋值的函数名后面并没有括号）
c) 使用 attachEvent 方法（对于FF类的浏览器来说是 addEventListener）
ps：解除事件的绑定也有相应方式，就不罗嗦了
⑶ 不要被那个 I_do_not_care=... 什么的迷惑，那个是三元表达式，如果你有认真学习 JS语法的话。那样写的目的是兼容。
⑷ 在函数体的最前面就声明需要用到的变量是个好习惯，它可以避免你犯很多莫名其妙的错误 － 比如递归的死循环之类的。当然，如果你压根不喜欢这个变量（就像俺那个 I_do_not_care 一样），那么就随它去吧。
⑸ e=window.event?window.event:e; 也是为了兼容。其实这句只是获得 event 对象而已。用 e.clientX 而不用 e.x 也是兼容问题。obj.firstChild.nodeValue 而不是 obj.innerText 同理。<div>I am a div.</div>而不是 <div></div>也是同理。 － 兼容真是个tnnd 问题。
⑹ 如果你发现自己还是有些糊涂，回去复习 0.1 和 0.2 节中提到的事件部分
2.22 拖动方块
HTML代码
function divBlock_event_mousedown(e){
var e, obj, temp;
obj=document.getElementById("divBlock");
e=window.event?window.event:e;
obj.startX=e.clientX-obj.offsetLeft;
obj.startY=e.clientY-obj.offsetTop;
document.onmousemove=document_event_mousemove;
temp=document.attachEvent?document.attachEvent("onmouseup",document_event_mouseup):document.addEventListener("mouseup",document_event_mouseup,"");
}
function document_event_mousemove(e){
var e, obj;
obj=document.getElementById("divBlock");
e=window.event?window.event:e;
with(obj.style){
position="absolute";
left=e.clientX-obj.startX+"px";
top=e.clientY-obj.startY+"px";
}
}
function document_event_mouseup(e){
var temp;
document.onmousemove="";
temp=document.detachEvent?document.detachEvent("onmouseup",document_event_mouseup):document.removeEventListener("mouseup",document_event_mouseup,"");
}
[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]
⑴ 编程是件脑力活动，呵呵。首先要先琢磨出来，拖动意味着什么。其实拖动就是判断鼠标位置，然后改变你需要拖动的元素的坐标而已。那么分成两步：判断鼠标位置，改变元素的坐标。这个看起来也不难。前一点 2.21 刚讨论过。后一点，如果你对 JS 操作 CSS 有所了解的话也是轻而易举（不明白的回头去看0.3节）。
⑵ 现在俺详细描述下这个过程：
a) 鼠标按下时，判断鼠标的位置。将鼠标坐标和元素坐标的差存在元素的 startX 和 startY 两个自定义的属性里。绑定鼠标移动事件。
b) 鼠标移动时，判断鼠标的位置。将鼠标坐标和 startX / startY 的差值作为新的元素坐标。（你问我为啥这样算？帅哥请回去重修高中数学，呵呵）
c) 鼠标按键抬起，清除鼠标移动事件的相应。（不然你放开了鼠标方块还是跟着你跑）
⑶ 为啥用 document 的事件绑定而不是把事件绑定在 div上面？问的好（你不会没想到这个问题吧？...）如果你试着将事件绑定在div上，你会发现随着鼠标的快速移动，很容易把div给甩掉（不理解的同学请自己去动动手）。具体的为什么不多说了，点到即止，希望菜鸟多多思考。
⑷ 不定义 position="absolute" 的话，left 和 top 是无效的 － 方块不会动的说
2.3 可以移动的方块
2.31 物理模型和面向对象
HTML代码
f=0.95; // 运动阻尼
k=0.85; // 碰撞弹性系数
g=1; // 重力加速度
window.onload=init;
function init(){
var obj;
obj=document.getElementById("divBlock");
obj.speedX=parseInt(Math.random()*5);
obj.speedY=parseInt(Math.random()*5);
obj.move=function(){
// 这里俺暂时不写，呵呵
}
}
[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]
⑴
这个模型很简单：
物体的属性：速度（包含 x 分量和 y 分量，这里设置为一个0-5的随机数）
物体的方法：运动
环境属性：运动阻尼 f, 和窗口边缘碰撞弹性系数 k, 重力加速度 g
⑵ 注意 obj.move 那个方法（函数）的写法
2.32 让方块动起来
HTML代码
f=0.005; // 运动阻尼
k=0.7; // 碰撞弹性系数
g=1; // 重力加速度
var obj;
window.onload=init;
function init(){
obj=document.getElementById("divBlock");
obj.speedX=140;
obj.speedY=400;
obj.move=function(){
var x, y, mx, my;
x=this.offsetLeft;
y=this.offsetTop;
mx=document.body.clientWidth-this.offsetWidth; // 计算允许运动的最大范围
my=document.body.clientHeight-this.offsetHeight;
this.speedY+=g; // 计算重力加速度影响的y方向速度
this.speedX-=f*this.speedX*this.speedX*(this.speedX>0?1:-1); // 计算阻尼后的速度
this.speedY-=f*this.speedY*this.speedY*(this.speedY>0?1:-1); // 阻尼大小和速度平方成正比
if(Math.abs(this.speedX)>mx||Math.abs(this.speedY)>my){ this.speedX=this.speedX%mx; this.speedY=this.speedY%my; }
x+=this.speedX; y+=this.speedY; // 计算坐标
if(xmx){ x=mx*2-x; this.speedX=-Math.abs(this.speedX)*k; }
if(y>my){ y=my*2-y; this.speedY=-Math.abs(this.speedY)*k; }
if(Math.abs(this.speedX)
[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]
代码开始变难了啊，呵呵。请仔细阅读注释。
⑴ 说到底只不过是个物理过程的算法表达而已。其中移动的实现和前面 2.22 节的拖动是类似的。
⑵ 注意感觉这里代码中 this 的使用。我在 Obj.move 中使用 this 的时候，this指的就是 Obj
⑶ 注意我把 Obj 放在了函数外面。这时候它就是一个全局变量。这是为了后面使用 setInterval 而准备的。很多菜鸟在用定时器的时候常常发现“找不到对象”的错误，请注意一下变量的定义域问题。
⑷ 菜鸟注意学习内置对象 Math 的方法
2.33 让方块停下来
HTML代码
f=0.005; // 运动阻尼
k=0.7; // 碰撞弹性系数
g=1; // 重力加速度
var obj, timeHandle;
window.onload=init;
function init(){
obj=document.getElementById("divBlock");
obj.speedX=140;
obj.speedY=400;
obj.move=function(){
var x, y, mx, my;
x=this.offsetLeft;
y=this.offsetTop;
mx=document.body.clientWidth-this.offsetWidth; // 计算允许运动的最大范围
my=document.body.clientHeight-this.offsetHeight;
this.speedY+=g; // 计算重力加速度影响的y方向速度
this.speedX-=f*this.speedX*this.speedX*(this.speedX>0?1:-1); // 计算阻尼后的速度
this.speedY-=f*this.speedY*this.speedY*(this.speedY>0?1:-1); // 阻尼大小和速度平方成正比
if(Math.abs(this.speedX)>mx||Math.abs(this.speedY)>my){ this.speedX=this.speedX%mx; this.speedY=this.speedY%my; }
x+=this.speedX; y+=this.speedY; // 计算坐标
if(xmx){ x=mx*2-x; this.speedX=-Math.abs(this.speedX)*k; }
if(y>my){ y=my*2-y; this.speedY=-Math.abs(this.speedY)*k; }
if(Math.abs(this.speedX)
[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]
在方块上按下鼠标，它会停下来，弹起鼠标，它就继续跑了，呵呵。
⑴ 没人注意到 2.211 绑定事件 － 回字的四种写法只举出了三种绑定事件的方法吗？呵呵，这里是第四种：
obj.onmousedown=function(){ this.stop(); }
⑵ 我把 setInterval 改成了 setTimeout, 并且将定时器的句柄保存在了 obj 的属性里。这种使用定时器的做法是值得菜鸟借鉴的。
2.4 大结局 － 可以抛出的方块
HTML代码
f=0.003; // 运动阻尼
k=0.8; // 碰撞弹性系数
g=0.6; // 重力加速度
var obj, timeHandle;
window.onload=init;
function init(){
obj=document.getElementById("divBlock");
obj.speedX=0;
obj.speedY=0;
obj.lastX=obj.offsetLeft;
obj.lastY=obj.offsetTop;
obj.move=function(){
this.stop();
var x, y, mx, my;
x=this.offsetLeft;
y=this.offsetTop;
mx=document.body.clientWidth-this.offsetWidth; // 计算允许运动的最大范围
my=document.body.clientHeight-this.offsetHeight;
this.speedY+=g; // 计算重力加速度影响的y方向速度
this.speedX-=f*this.speedX*this.speedX*(this.speedX>0?1:-1); // 计算阻尼后的速度
this.speedY-=f*this.speedY*this.speedY*(this.speedY>0?1:-1); // 阻尼大小和速度平方成正比
if(Math.abs(this.speedX)>mx||Math.abs(this.speedY)>my){ this.speedX=this.speedX%mx; this.speedY=this.speedY%my; }
x+=this.speedX; y+=this.speedY; // 计算坐标
if(xmx){ x=mx*2-x; this.speedX=-Math.abs(this.speedX)*k; }
if(y>my){ y=my*2-y; this.speedY=-Math.abs(this.speedY)*k; }
if(Math.abs(this.speedX)
[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]
用鼠标按住方块，然后移动鼠标，同时松开鼠标，看看效果吧，呵呵
这个例子算结束了，哈哈。不作讲解了，各位自己看吧。
+ 查看当前日志评论 (2)
────────────
PJBlog3 v3.2.9.518 Inside.
Processed In 0.063 ms
你没有权限发表评论
────────────
PJBlog3 v3.2.9.518 Inside.
Processed In 0.063 ms
评论内容:
== 虎子 2007-01-21 12:50 AM ----
好文章
────────────
PJBlog3 v3.2.9.518 Inside.
Processed In 0.063 ms