上篇说了动态创建结点和删除结点的例子，这一篇说一些如何用setInterval和setTimeout做简单的动画。
语法皆是window.setTimeout(fn, delay), window.setInterval(fn, delay)
fn可以是一个函数名，也可以是一个执行的字符串，但要注意的是，如果fn是一个可以执行的字符串，且有参数，如window.setInterval("myFunction(obj)",1000)将可能抛出一个异常，这个时候，通常是你要传递一个对象参数，我建议用这样的一个办法来解决，也建议使用这种方法来使用window.setTimeout和window.setInterval：
window.setInterval(function (){
myFunction(obj);},1000);
还有一种情况就是在一个"class"里，即要执行this.myFunction(obj)如何实现呢？
function jsclass() {};
jsclass.prototype.init = function (obj) {
var self = this; //创建一个this指针的引用
window.setInterval(function(obj) {
self.myFunction(obj);},1000);
};
jsclass.prototype.myFunction = function (obj) {
//TODO
};
DHTML的全局方法setInterval和setTimeout，所谓全局，即在window层，不属于DHTML的DOM元素的方法里，这两个有一些区别，网上也有很多说明，也就是setInterval是循环执行一个指定函数，setTimeout是只执行一次。例外说明一点，属于window层次的，可以在前面不加window，即可以用window.setInterval也可以直接用setInterval。
它们都返回一个数字型的timerId，用于cleaverInterval/clearTimeout方法，从setInterval/setTimeout中返回。如果做过桌面应用的朋友，可以把这个setInterval和setTimeout假想成创建一个线程，而timerId则是一个线程Id，而cleaverInterval/clearTimeout方法则是消毁这个线程。也许这样可以更好的理解这两个方法。
(在具体的应用中，我更驱向于用setTimeout。)
知道这两个方法的功能，先来写一个简单的例子：
一个一秒后弹出的alert对话框。
<script>
window.setTimeout(function () {
alert("timeout example after 1 second");
},1000)
</script>
每一秒创建一个新DIV结点的函数
<script>
function intervalExample() {
var div=document.createElement("div");
div.innerHTML = "tutorial of DHTML and javascript programming, by www.never-online.net";
document.body.appendChild(div);
}
window.setInterval(intervalExample,1000);
</script>
而实际应用中，setTimeout可以有一个另类一些的应用，比如相当于VB中的DoEvents函数，或者.net桌面程序中Application.DoEvents();这样的功能，也就是异步处理，因为DHTML没有多线程，所以说这个功能在很多的时候是为了给用户觉得不是在假死状态，或者给其它的程序按照代码的逻辑继续执行下去而不会阻塞或者也不会跳过一段代码执行。
举个例子。
下段代码是没有加setTimeout的。运行后，锚点会马上指向hash2
<script>
window.location.hash="hash1";
window.location.hash="hash2";
</script>
这一段是加了setTimeout的，锚点会在3秒后指向hash1，再在3秒后指向hash2
<script>
var doEventsDelay = 0;
function DoEvents (fn) {
window.setTimeout(fn,doEventsDelay);
doEventsDelay+=3000;
}
DoEvents(function () {
window.location.hash="hash1";
doEventsDelay-=3000;
}
);
DoEvents(function () {
window.location.hash="hash2";
doEventsDelay-=3000;
}
);
</script>
下面我们做一个实用些的例子，比如一个动态显示tip的动态菜单。
一、这里只讲解setTimeout的方法，setInterval的请看demo里的代码，还要注明一点（本例中有一个比较严重的问题是没有解决的，这一问题我将留到以后再讲解）是关于坐标的。比如将下面代码中的sliderShow放到一个table中，就可能会发现一些问题了。:D
思路，得到一个元素，相对这个元素的作标，再根据一个tip的容器从而做一个动画，
主要用到的就是相对元素的X，Y坐标，关于坐标的一些属性意义，参见下图：
而整个动画的思路，见下图
注释代码：
[Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]是否觉得上面的例子很多都是重复的劳动？如果减少一些岂不更好？:D，的确如此，上面的JS代码有近一半都是重复的，在这里我就不把它优化了，还是留给大家做一些实质性的工作，减少上面代码的冗余。
语法皆是window.setTimeout(fn, delay), window.setInterval(fn, delay)
fn可以是一个函数名，也可以是一个执行的字符串，但要注意的是，如果fn是一个可以执行的字符串，且有参数，如window.setInterval("myFunction(obj)",1000)将可能抛出一个异常，这个时候，通常是你要传递一个对象参数，我建议用这样的一个办法来解决，也建议使用这种方法来使用window.setTimeout和window.setInterval：
window.setInterval(function (){
myFunction(obj);},1000);
还有一种情况就是在一个"class"里，即要执行this.myFunction(obj)如何实现呢？
function jsclass() {};
jsclass.prototype.init = function (obj) {
var self = this; //创建一个this指针的引用
window.setInterval(function(obj) {
self.myFunction(obj);},1000);
};
jsclass.prototype.myFunction = function (obj) {
//TODO
};
DHTML的全局方法setInterval和setTimeout，所谓全局，即在window层，不属于DHTML的DOM元素的方法里，这两个有一些区别，网上也有很多说明，也就是setInterval是循环执行一个指定函数，setTimeout是只执行一次。例外说明一点，属于window层次的，可以在前面不加window，即可以用window.setInterval也可以直接用setInterval。
它们都返回一个数字型的timerId，用于cleaverInterval/clearTimeout方法，从setInterval/setTimeout中返回。如果做过桌面应用的朋友，可以把这个setInterval和setTimeout假想成创建一个线程，而timerId则是一个线程Id，而cleaverInterval/clearTimeout方法则是消毁这个线程。也许这样可以更好的理解这两个方法。
(在具体的应用中，我更驱向于用setTimeout。)
知道这两个方法的功能，先来写一个简单的例子：
一个一秒后弹出的alert对话框。
<script>
window.setTimeout(function () {
alert("timeout example after 1 second");
},1000)
</script>
每一秒创建一个新DIV结点的函数
<script>
function intervalExample() {
var div=document.createElement("div");
div.innerHTML = "tutorial of DHTML and javascript programming, by www.never-online.net";
document.body.appendChild(div);
}
window.setInterval(intervalExample,1000);
</script>
而实际应用中，setTimeout可以有一个另类一些的应用，比如相当于VB中的DoEvents函数，或者.net桌面程序中Application.DoEvents();这样的功能，也就是异步处理，因为DHTML没有多线程，所以说这个功能在很多的时候是为了给用户觉得不是在假死状态，或者给其它的程序按照代码的逻辑继续执行下去而不会阻塞或者也不会跳过一段代码执行。
举个例子。
下段代码是没有加setTimeout的。运行后，锚点会马上指向hash2
<script>
window.location.hash="hash1";
window.location.hash="hash2";
</script>
这一段是加了setTimeout的，锚点会在3秒后指向hash1，再在3秒后指向hash2
<script>
var doEventsDelay = 0;
function DoEvents (fn) {
window.setTimeout(fn,doEventsDelay);
doEventsDelay+=3000;
}
DoEvents(function () {
window.location.hash="hash1";
doEventsDelay-=3000;
}
);
DoEvents(function () {
window.location.hash="hash2";
doEventsDelay-=3000;
}
);
</script>
下面我们做一个实用些的例子，比如一个动态显示tip的动态菜单。
一、这里只讲解setTimeout的方法，setInterval的请看demo里的代码，还要注明一点（本例中有一个比较严重的问题是没有解决的，这一问题我将留到以后再讲解）是关于坐标的。比如将下面代码中的sliderShow放到一个table中，就可能会发现一些问题了。:D
思路，得到一个元素，相对这个元素的作标，再根据一个tip的容器从而做一个动画，
主要用到的就是相对元素的X，Y坐标，关于坐标的一些属性意义，参见下图：
而整个动画的思路，见下图
注释代码： [Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]是否觉得上面的例子很多都是重复的劳动？如果减少一些岂不更好？:D，的确如此，上面的JS代码有近一半都是重复的，在这里我就不把它优化了，还是留给大家做一些实质性的工作，减少上面代码的冗余。
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！
如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
狼山资源网 Copyright www.pvsay.com
暂无“Javascript & DHTML 实例编程（教程）（四）初级实例篇2—动画”评论...
《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线
暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。
艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。
《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒 经典版》的玩家都可以获得奖励。