已经写了两篇关于小白的JavaScript之行，不可否认，每一种语言都有其精华与糟粕之处，来不及细细体味其精华奥妙，也没法对其评头论足，只能先了解，后深入。到目前为止已经看完《JavaScript Dom 编程艺术》（ps：看过书评，网友对其褒贬不一，个人感觉还是不错的，适合初学者。不是每本书都能得到所有读者的认可，只能让部分适合的读者对其称赞，而我，就是其中一个）。
前面介绍了JavaScript的一些常用方法，如何与DOM、HTML配合完成一些交互。今天主要介绍JavaScript在动画效果方面的处理，以及通过自己在书中例子的一个延伸来视觉感受下JavaScript的动画效果。
序言：一个网页或网站的组成就前端呈现来说，也是有其结构、章法可循的。涉及到的技术或元素主要有：HTML、DOM、JavaScript、CSS等。按照结构来分，可以分为以下三个部分：
1.结构层：一个网页的结构层主要由HTML或XHTML之类的标记语言负责创建。成对出现的标记如“<h1></h1>”用于描述网页内容。
2.表示层：网页的表示层由CSS负责创建，CSS主要用于解决网页中的元素如何显示的问题，比如字体、颜色、位置。
3.行为层：网页的行为层主要有今天提到的JavaScript和DOM负责，用于解决网页元素对事件的反应。
除去一些CSS伪类不说，如果我们希望实现随着事件的变化不断操控网页元素的样式，这个活就非JavaScript莫属了。JavaScript脚本能够按照预定的时间间隔重复调用一个函数。
书中通过一个setTimeout（）函数来演示JavaScript如何让元素随时间而动。
<html> <head> </head> <body> <p id = "message">Don't laugh, I can move, really!!!</p> <script> function positionMessage(){ var rows = document.getElementById("message"); alert("1"); rows.style.position = "absolute"; rows.style.left = "100px"; rows.style.top = "100px" movement = setTimeout("moveMessage()",10); } function moveMessage(){ alert("2"); if(!document.getElementById) return false; if(!document.getElementById("message")) return false; var elem = document.getElementById("message"); var xpos = parseInt(elem.style.left);//将字符串转换为整型，如"100px"->100 var ypos = parseInt(elem.style.top); if(xpos == 200 && ypos == 200){ return false;//书中是return true，但是会出现<p>位置达到200时还会弹出js提示框的情况，写成return false就不会。 } if(xpos < 200){ xpos++; } if(xpos > 200){ xpos--; } if(ypos < 200){ ypos++; } if(ypos > 200){ ypos--; } elem.style.left = xpos + "px"; elem.style.top = ypos + "px"; movement = setTimeout("moveMessage()",10);//每隔10毫秒，调用一次moveMessage()函数 } function addLoadEvent(func) { var oldonload = window.onload; if (typeof window.onload != 'function') { window.onload = func; } else { window.onload = function() { oldonload(); func(); } } } addLoadEvent(positionMessage); addLoadEvent(moveMessage); </script> </body> </html>
其中：addLoadEvent（）函数主要用于加载函数，使得这些被加载进来的函数在网页加载后执行（防止因为在JS使用了页面元素，但是页面又没有完成加载，无法找到相应元素的情况）；positionMessage（）函数设定了一个初始位置；moveMessage（）函数用于监控<p>元素的位置并不断更新其位置。
执行过程图如下：
（1）起始位置：
（2）执行positionMessage后的位置：
（3）执行完moveMessage后的最终位置：
延伸：写完这段代码，不禁要想，如果让这段“Don't laugh，I can move，really”文字一直移动会是什么效果，能不能做个反弹，这样就可以想见是一个屏保程序的模型了，先上代码。
1 <html> 2 <head> 3 <meta http-equiv="content-type" content="text/html; charset=utf-8"/> 4 <title>Just Move</title> 5 <style> 6 #rectanle {width:50px;height:50px;border:5px blue solid;position:absolute;} 7 </style> 8 </head> 9 <body> 10 <div id="rectanle""></div> 11 <script> 12 var flagX = true; 13 var flagY = true; 14 function addLoadEvent(func){ 15 var oldonload=window.onload; 16 if(typeof window.onload!='function'){ 17 window.onload=func; 18 }else{ 19 window.onload=function(){ 20 oldonload(); 21 func(); 22 } 23 } 24 } 25 function positionMessage(){ 26 var para = document.getElementById("rectanle"); 27 alert("Go"); 28 para.style.position = "absolute"; 29 para.style.left = "50px"; 30 para.style.top = "50px"; 31 32 } 33 function moveMessage(){ 34 var para = document.getElementById("rectanle"); 35 var xpos = parseInt(para.style.left); 36 var ypos = parseInt(para.style.top); 37 var width = document.body.clientWidth-100; 38 var height = document.body.clientHeight-100; 39 if(flagX){ 40 if(xpos <= width){ 41 xpos++; 42 } 43 else{ 44 flagX = false; 45 } 46 }else{ 47 if(xpos>0){ 48 xpos--; 49 } 50 else{ 51 flagX = true; 52 } 53 } 54 if(flagY){ 55 if(ypos <= height){ 56 ypos++; 57 } 58 else{ 59 flagY = false; 60 } 61 }else{ 62 if(ypos > 0){ 63 ypos--; 64 }else{ 65 flagY = true; 66 } 67 } 68 para.style.left = xpos + "px"; 69 para.style.top = ypos + "px"; 70 moment = setTimeout("moveMessage()",10); 71 } 72 addLoadEvent(positionMessage); 73 addLoadEvent(moveMessage); 74 </script> 75 </div> 76 </body> 77 </html>
相比上面的例子，这里：
1.将文字的<p>标记换成一个<div>版的框，加了一个CSS样式
2.在moveMessage添加了两个布尔变量，用于控制方框在达到边界时可以反弹，朝相反的方向移动，自己一开始的代码如下：
if(xpos < 55){ xpos++; } if(xpos > 55){ xpos--; } if(ypos < 55){ ypos++; } if(ypos > 55){ ypos--; }
这是一种没法实现碰壁反弹效果的代码。通过debug调试我们可以发现，假设当前位置是x:50 y:50,当执行到xpos也ypos都为55的时候就会一直在55上下徘徊，在网页中表现就是一直停滞在x:55 y:55的位置，究其原因还是缺少一个控制变量作为一个开关，控制方框在反弹后相应的x或y轴上坐标会增加或减少（不知道我有没有讲清楚，不行的话自己写代码，然后debug）。
程序的执行过程图部分如下：
后续要向AngularJS挺近啦！！！
本文链接：《初探JavaScript（三）——JS带我碰壁带我飞》
如果对你有用，欢迎点赞哦，也欢迎加群讨论。
友情赞助
如果你觉得博主的文章对你那么一点小帮助，恰巧你又有想打赏博主的小冲动，那么事不宜迟，赶紧扫一扫，小额地赞助下，攒个奶粉钱，也是让博主有动力继续努力，写出更好的文章^^。
1. 支付宝 2. 微信
