首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >初探JavaScript(三)——JS带我"碰壁"带我飞

初探JavaScript(三)——JS带我"碰壁"带我飞

作者头像
JackieZheng
发布2018-01-16 16:31:06
1.4K0
发布2018-01-16 16:31:06
举报
文章被收录于专栏:JackieZhengJackieZheng

  已经写了两篇关于小白的JavaScript之行,不可否认,每一种语言都有其精华与糟粕之处,来不及细细体味其精华奥妙,也没法对其评头论足,只能先了解,后深入。到目前为止已经看完《JavaScript Dom 编程艺术》(ps:看过书评,网友对其褒贬不一,个人感觉还是不错的,适合初学者。不是每本书都能得到所有读者的认可,只能让部分适合的读者对其称赞,而我,就是其中一个)。

  前面介绍了JavaScript的一些常用方法,如何与DOMHTML配合完成一些交互。今天主要介绍JavaScript在动画效果方面的处理,以及通过自己在书中例子的一个延伸来视觉感受下JavaScript的动画效果。

序言:一个网页或网站的组成就前端呈现来说,也是有其结构、章法可循的。涉及到的技术或元素主要有:HTMLDOMJavaScriptCSS等。按照结构来分,可以分为以下三个部分:

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挺近啦!!!

  如果对你有用,欢迎点赞哦,也欢迎加群讨论。

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2015-05-09 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档