已经写了两篇关于小白的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("");

    rows.style.position = "absolute";

    rows.style.left = "100px";

    rows.style.top = "100px"

    movement = setTimeout("moveMessage()",);

}

function moveMessage(){

    alert("");

    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 ==  && ypos == ){

        return false;//书中是return true，但是会出现<p>位置达到200时还会弹出js提示框的情况，写成return false就不会。

    }

    if(xpos < ){

        xpos++;

    }

    if(xpos > ){

        xpos--;

    }

    if(ypos < ){

        ypos++;

    }

    if(ypos > ){

        ypos--;

    }

    elem.style.left = xpos + "px";

    elem.style.top = ypos + "px";

    movement = setTimeout("moveMessage()",);//每隔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”文字一直移动会是什么效果，能不能做个反弹，这样就可以想见是一个屏保程序的模型了，先上代码。

 <html>

 <head>

 <meta http-equiv="content-type" content="text/html; charset=utf-8"/>

 <title>Just Move</title>

 <style>

 #rectanle {width:50px;height:50px;border:5px blue solid;position:absolute;}

 </style>

 </head>

 <body>

 <div id="rectanle""></div>

 <script>

 var flagX = true;

 var flagY = true;

 function addLoadEvent(func){

     var oldonload=window.onload;

     if(typeof window.onload!='function'){

         window.onload=func;

     }else{

         window.onload=function(){

             oldonload();

             func();

         }

     }

 }

 function positionMessage(){

     var para = document.getElementById("rectanle");

     alert("Go");

     para.style.position = "absolute";

     para.style.left = "50px";

     para.style.top = "50px";

 }

 function moveMessage(){

     var para = document.getElementById("rectanle");

     var xpos = parseInt(para.style.left);

     var ypos = parseInt(para.style.top);

     var width = document.body.clientWidth-100;

     var height = document.body.clientHeight-100;

     if(flagX){

         if(xpos <= width){

             xpos++;

         }

         else{

             flagX = false;

         }

     }else{

         if(xpos>0){

             xpos--;

         }

         else{

             flagX = true;

         }

     }

     if(flagY){

         if(ypos <= height){

             ypos++;

         }

         else{

             flagY = false;

         }

     }else{

         if(ypos > 0){

             ypos--;

         }else{

             flagY = true;

         }

     }

     para.style.left = xpos + "px";

     para.style.top = ypos + "px";

     moment = setTimeout("moveMessage()",10);

 }

 addLoadEvent(positionMessage);

 addLoadEvent(moveMessage);

 </script>

 </div>

 </body>

 </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. 微信

　　　　　　　　　　　　　　　　　　　　　　

初探JavaScript（三）——JS带我"碰壁"带我飞的更多相关文章

  1. JavaScript (三) js的基本语法 - - 数组 与函数 、关键字

    个人博客网:https://wushaopei.github.io/    (你想要这里多有) 一.关键字 1.break 关键字使用 break关键字:如果在循环中使用,遇到了break,则立刻跳出 ...

  2. 初探JavaScript(四)——作用域链和声明提前

    前言:最近恰逢毕业季,千千万万的学生党开始步入社会,告别象牙塔似的学校生活.往往在人生的各个拐点的时候,情感丰富,感触颇深,各种对过去的美好的总结,对未来的展望.与此同时,也让诸多的老“园”工看完这些 ...

  3. 初探JavaScript（二）——JS如何动态操控HTML

    除去五一三天,我已经和<JavaScript Dom编程艺术>磨合了六天,第一印象很好.慢慢的,我发现这是一块排骨,除了肉还有骨头.遇到不解的地方就会多看几遍,实在不懂的先跳过,毕竟,初次 ...

  4. 【JavaScript从入门到精通】第三课 初探JavaScript魅力-03

    第三课 初探JavaScript魅力-03 函数传参 上节课的时候我们已经讲了什么是函数,实际上,函数在功能上就类似于css的class一样,将一段代码包裹起来使用.为了让函数的功能更加的丰富和实用, ...

  5. JavaScript基本知识点——带你逐步解开JS的神秘面纱

    JavaScript基本知识点--带你逐步解开JS的神秘面纱 在我们前面的文章中已经深入学了HTML和CSS,在网页设计中我们已经有能力完成一个美观的网页框架 但仅仅是网页框架不足以展现出网页的魅力, ...

  6. 初探JavaScript（一）——也谈元素节点、属性节点、文本节点

    Javascript大行其道的时候,怎么能少了我来凑凑热闹^_^ 基本上自己对于js的知识储备很少,先前有用过JQuery实现一些简单功能,要论起JS的前世今生,来龙去脉,我就一小白.抱起一本< ...

  7. 【JavaScript从入门到精通】第二课 初探JavaScript魅力-02

    第二课 初探JavaScript魅力-02 变量 说起变量,我们不得不提起我们有一部比较古老的电视剧叫<包青天>.包青天有一把非常厉害的宝剑叫“尚方宝剑”,见到尚方宝剑有如见到皇帝.某种程 ...

  8. 第十二篇 JavaScript(简称JS) 实现显示与隐藏

    JavaScript   JavaScript简称JS.JS是脚本语言,它是一种轻量级的编程语言,是可以插入HTML页面的编程代码,几乎所有现代浏览器都是支持的. 理论老师不行,我就抄袭手册上的一些关 ...

  9. 【JavaScript】JS从入门到深入（复习查漏向

    [JavaScript]JS从入门到深入(复习查漏向 pre 精细得学过一遍JS后才发现,原来之前CTF中有些nodejs的题目以及一些游戏题的payload就变得很好理解了. 基础知识 ECMASc ...

随机推荐

  1. Understanding ASP.NET MVC Filters and Attributes

    这篇文章把Asp.net MVC的filter介绍的很详细,值得收藏. http://www.dotnet-tricks.com/Tutorial/mvc/b11a280114-Understandi ...

  2. STC12C5A60S2笔记4（复位）

    1. 基本特性 STC 单片机有5种复位方式: 1) 热启动复位: 1.1)外部RST引脚复位 第一功能复位脚,即管脚9 RST/P4.7,该管脚拉高维持24个时钟周期+10ms后,单片机进入复位状态 ...

  3. Hadoop日记Day18---MapReduce排序分组

    本节所用到的数据下载地址为:http://pan.baidu.com/s/1bnfELmZ MapReduce的排序分组任务与要求 我们知道排序分组是MapReduce中Mapper端的第四步,其中分 ...

  4. 为Angularjs ngOptions加上index解决方案

    今天在Angularjs交流群中有位童学问道如何为Angular select的ngOptions像Angularjs的ngRepeat一样加上一个索引$index. 其实对于这个问题来说Angula ...

  5. Java实现敏感词过滤

    敏感词.文字过滤是一个网站必不可少的功能,如何设计一个好的.高效的过滤算法是非常有必要的.前段时间我一个朋友(马上毕业,接触编程不久)要我帮他看一个文字过滤的东西,它说检索效率非常慢.我把它程序拿过来 ...

  6. java提高篇(四)-----理解java的三大特性之多态

    面向对象编程有三大特性:封装.继承.多态. 封装隐藏了类的内部实现机制,可以在不影响使用的情况下改变类的内部结构,同时也保护了数据.对外界而已它的内部细节是隐藏的,暴露给外界的只是它的访问方法. 继承 ...

  7. 项目开发之使用 maven

    本文将详述 maven 在软件项目中的使用.首先讲述 maven 的基本工作原理及环境的搭建.然后讲述开发及配置管理人员如何使用 maven,最后将介绍 maven 与 eclipse 集成使用. m ...

  8. js模版引擎handlebars.js实用教程——由于if功力不足引出的Helper

    返回目录 <!DOCTYPE html> <html> <head> <META http-equiv=Content-Type content=" ...

  9. [我给Unity官方视频教程做中文字幕]beginner Graphics – Lessons系列之灯光介绍Lights

    [我给Unity官方视频教程做中文字幕]beginner Graphics – Lessons系列之灯光介绍Lights 既上一篇分享了中文字幕的摄像机介绍Cameras后,本篇分享一下第2个已完工的 ...

  10. [源码]RandomId 生成随机字符串

    /* * 名称:RandomId * 功能:生成随机ID * 作者:冰麟轻武 * 日期:2012年1月31日 03:36:28 * 版本:1.0 * 最后更新:2012年1月31日 03:36:28 ...