项目七使用javascript控制.pptx

CSS+DIV网页布局技术教程

项目七使用JavaScript控制CSSJavaScript与CSS一样，是可以在客户端浏览器上解析并执行的脚本语言。通过JavaScript与CSS相配合可以这现很多动态的页面效果。在本项目中，通过1个工作任务，向读者展示动态网页带给人的视觉冲击。

目录任务制作跑马灯特效

制作跑马灯特效准备知识制作跑马灯特效JavaScript的基本概念JavaScript的特点JavaScript与CSSJavaScript语法基础数据类型和变量表达式及运算符基本语句

1.JavaScript的基本概念1.JavaScript的基本概念JavaScript是一种基于客户端浏览器的语言，有了JavaScript便可以使网页变得生动。使用它的目的是与HTML和其他脚本语言一起实现在一个网页中链接多个对象，与网络客户交互作用，从而开发客户端的应用程序。它能通过被嵌入或调入标准的HTML语言中来实现。

知识点链接HTML、JavaScript、和CSS构成了Web设计与开发的基础。HTML负责构建网页结构和内容，JavaScript负责设计动态效果和交互，而CSS则负责设计网页显示。

2.JavaScript的特点2.JavaScript的特点JavaScript的特点如下：简单性动态性跨平台性安全性节省CGI的交互时间

拓展提高：一个完整的JavaScript实现是由以下3个不同部分组成的：核心（ECMAScript）、文档对象模型（DocumentObjectModel，简称DOM）、浏览器对象模型（BrowserObjectModel，简称BOM），如下图所示。

3.JavaScript与CSS3.JavaScript与CSSJavaScript与CSS都是可以直接在客户端浏览器解析并执行脚本的语言，通常意义上认为CSS是静态的样式设置，而JavaScript则是动态的实现各种功能。

4.JavaScript语法基础4.JavaScript语法基础JavaScript的基本特点如下。scriptlanguage=javascript…//JavaScript代码…/script

5.数据类型和变量5.数据类型和变量JavaScript脚本语言同其他语言一样，有它自身的基本数据类型、表达式和算述运算符以及程序的基本框架结构。JavaScript提供了6种数据类型，其中4种的数据类型用来处理数字和文字，而变量提供存放信息的地方，表达式则可以完成较复杂的信息处理。

6.表达式及运算符6.表达式及运算符运算符完成操作的一系列符号，在JavaScript提供了丰富的运算功能，包括算术运算、关系运算、逻辑运算和连接运算。

知识点链接赋值表达式主要用于给变量赋值，包括=（将右边的值赋给左边）、+=（将右边的值加上左边的值后赋给左边）、-=、*=、/=和%=等。

7.基本语句7.基本语句JavaScript中的语句与其程序语言的语句类似，用来实现程序的控制和各种基本功能。在JavaScript中每条语句都以分号结束，但其本身对是否添加分号要求并不严格。但建议每条语句结束都加上分号，养成良好的编程习惯。JavaScript的基本语句主要包括条件语句、循环语句和函数。

任务实施张晓是某网络公司设计师，接到项目主管任务，她需要制作类似跑马灯的特效，并将其直接应用到网页设计中，形成广告标语，制作跑马灯特效任务：制作跑马灯特效

任务分析：理解牢记！由于在Web开发中，经常需要使用JavaScript动态控制CSS样式，使CSS+JavaScript可以制造出各种各样的奇幻的视觉效果。因此，张晓决定使用JavaScript来完成此任务。任务：制作跑马灯特效

任务实施制作跑马灯特效

（1）首先按照传统的JavaScript的方法制作跑马灯的效果，包括设置文字内容、跑动速度、以及相应的输入框。htmlheadtitle跑马灯/titlescriptlanguage=javascriptvarmsg=这是跑马灯，我跑啊跑啊跑; //跑马灯的文字varinterval=400; //跑动的速度varseq=0;

functionLenScroll(){ document.nextForm.lenText.value=msg.substring(seq,msg.length)++msg; seq++; if(seqmsg.length) seq=0; window.setTimeout(LenScroll();,interval);}/script/headbodyonLoad=LenScroll()centerformnam