已经写了两篇关于小白的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("");
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. 使用VirtualBox自带管理工具命令为虚拟磁盘扩展空间

    VirtualBox虚拟磁盘空间不够了,默认10G.想扩大,图形界面下没有找到可操作菜单.Google了一下用 Vbox自带的命令工具VBoxManage即可解决. C:\Program Files\ ...

  2. linux-8 基本命令---date

    2,date命令用于显示.设置系统的时间或日期,格式如下: date[选项][+指定格式]. date的详细格式如下: date命令格式 参数 作用 %t 跳个[tab]键 %H 小时(00-23) ...

  3. Oracle基本数据字典:v$database、v$instance、v$version、dba_objects

    v$database: 视图结构: SQL> desc v$database; Name                                      Null?    Type - ...

  4. I/O requests taking longer than 15 seconds to complete on file I/O瓶颈问题

    I/O requests taking longer than 15 seconds to complete on file I/O瓶颈问题 http://mssqlwiki.com/2012/08/ ...

  5. maven自动编译脚本

    在maven工程根目录创建windows批处理脚本文件,例如tool.bat,内容如下 @echo off color 1f :menu echo -------------------------- ...

  6. Rubinius 2.0 发布,Ruby 虚拟机

    Rubinius 2.0 发布了,官方发行说明请看这里. Rubinius是一个运行Ruby程序的虚拟机,其带有Ruby的核心库. Rubinius的设计决定了其调试功能的强大,使得在运行时常规的Ru ...

  7. chrome浏览器渲染白屏问题剖析

    刚截图十几次,终于捕捉到了这个白屏现象,hiahia~~ 大家可以很清晰地看到下边还木有渲染完毕的透明层,这是一个十分普遍的问题,经常遇到.我的浏览器版本是 到目前为止应该是最新版(release版本 ...

  8. Linux split拆分文件

    200 ? "200px" : this.width)!important;} --> 介绍 split可以将一个大文件拆分成指定大小的多个文件,并且拆分速度非常的快,拆分一 ...

  9. 获取IOS应用的子目录

    在开发IOS应用时,我们经常需要将素材分类,并放入相应地子目录中. 在开发代码时,需要访问这些素材时,就需要获取对应的子目录路径.那么如何获取呢? 获取应用路径 首先,要找到应用所在的路径. NSSt ...

  10. 虚拟化平台cloudstack(6)——使用maven:jetty调试

    调试环境 ubuntu 12.04 JDK1.7 apache-maven-3.10 eclipse 4.2 Juno mysql 5 apache ant JDK的配置和安装 安装可以参考: htt ...