JavaScript+jQuery课程设计.docx

上传人:b****3 文档编号:4000465 上传时间:2022-11-27 格式:DOCX 页数:16 大小:2.12MB
下载 相关 举报
JavaScript+jQuery课程设计.docx_第1页
第1页 / 共16页
JavaScript+jQuery课程设计.docx_第2页
第2页 / 共16页
JavaScript+jQuery课程设计.docx_第3页
第3页 / 共16页
JavaScript+jQuery课程设计.docx_第4页
第4页 / 共16页
JavaScript+jQuery课程设计.docx_第5页
第5页 / 共16页
点击查看更多>>
下载资源
资源描述

JavaScript+jQuery课程设计.docx

《JavaScript+jQuery课程设计.docx》由会员分享,可在线阅读,更多相关《JavaScript+jQuery课程设计.docx(16页珍藏版)》请在冰豆网上搜索。

JavaScript+jQuery课程设计.docx

JavaScript+jQuery课程设计

JavaScript+jQuery开发框架课程设计

题目网页特效文字设计

院(系)信息工程学院

专业班级14计算机应用技术2班

学生姓名蔡明伟

学号1432101201

设计地点

指导教师陈洋

起止时间:

2016年5月30日至2016年6月5日

目录

1正文3

1.1设计目的3

1.2总体设计3

1.3关键技术3

1.3.1HTML概念3

1.3.2网页文件命名3

1.3.3HTML文件结构3

1.3.4将JavaScript嵌入网页4

1.3.5部分关键元素及属性4

1.4程序流程图5

1.4.1上下跳动文本流程图5

1.5.主要源代码7

1.5.1文本上下跳动代码7

1.5.2定期滚动文本代码8

1.6运行结果及结论16

2参考资料21

1正文

1.1设计目的

JavaScript的特点是无穷无尽的,只要你有创意。

JavaScript是由Netscape公司开发的一种跨平台,面向对象(object-oriented)的网页脚本语言(WebScriptLanguage),是目前流行的网页特效设计语言。

本课设主题:

网页文字特效

通过两个Javascript程序(其实是一个文档,一个文本文件)分别实现文字上下跳动和滚动文本特效;

对网页布局的设计、色彩搭配;文字的编辑;背景音乐、图片的插入;实现视觉、听觉美的享受。

1.2总体设计

文字上下跳动文本:

通过anim函数来进行位置的变换(主要的原理就是改变文本所在对象的top属性)同时实现自身的递归循环,通过start函数来实现主函数的启动。

滚动文本:

浏览器情况(以document.all浏览器为例)选择不同调用函数,通过setTimeout()方法实现函数move3和move4的延迟调用(先执行其后语句)同时实现递归循环,达到滚动文本顺序滚进滚动页面区域的效果;语句:

window.onload=startscroll事件加载完成,通过函数startscroll来实现主函数的启动。

1.3关键技术

1.3.1HTML概念

HTML(HyperTextMarkupLanguage超文本标识语言)

–是一种用来制作超文本文档的简单标记语言。

–用HTML编写的超文本文件称为HTML文件,也称Web文件。

1.3.2网页文件命名

1.*.htm或*.html

1.3.3HTML文件结构

•元素出现在文档的开头部分。

与之间的内容不会在浏览器的文档窗口显示,但是其间的元素有特殊重要的意义。

元素定义HTML文档的标题。</p><p>–<title>与之间的内容将显示在浏览器窗口的标题栏。

–HTML文件的正文//元素表明是HTML文档的主体部分。

在与之间,通常都会有很多其它元素;这些元素和元素属性构成HTML文档的主体部分。

•元素:

是HTML语言的基本部分。

元素总是成对出现,每一对元素一般都有一个开始的标记(如),也有一个结束的标记(如)。

元素的标记要用一对尖括号括起来,并且结束的标记总是在开始的标记前加一个斜杠。

•HTML元素属性:

HTML元素可以有自己的相关属性,每一个属性还可以由我们网页编制者赋一定的值。

元素属性出现在元素的<>内,并且和元素名之间有一个空格分隔;属性值用“”引起来。

1.3.4将JavaScript嵌入网页

JavaScript代码可直接嵌入HTML文件中,随网页一起传送到客户端浏览器,然后通过浏览器来解释执行。

vJavaScript语句插入HTML的方式:

▪使用

vJavaScript语句插入HTML的位置:

▪body部分的JS

▪head部分的JS:

当脚本被调用、事件被触发时执行,可保证在调用函数前,脚本已载入

1.3.5部分关键元素及属性

表格元素及属性

定义表格的一个单元格

定义表格的行

定义一个表格

width属性:

指定表格或某一个表格单元格的宽度。

单位可以是%或者象素。

height属性:

指定表格或某一个表格单元格的高度。

单位可以是%或者象素。

border属性:

表格边线粗细

bgcolor属性:

指定表格或某一个单元格的背景颜色

align属性:

指定表格或某一个单元格里的内容(文本、图片等)的对齐方式

设置表格格子之间空间的大小

设置表格格子边框与其内部内容之间空间的大小

设置表格格子的水平对齐(左中右)

>or

>

设置表格格子的垂直对齐(上中下)

>or

>

文本

文字标签属性

指定颜色...

字体大小...

文字布局

段(Paragraph)

Center

粗体文本

left

right


元素不是成对出现的。

下划线文本

居中段落

超级链接

锚元素

元素属性hrefhref的属性值为一个URL地址

开一个新的(浏览器)窗口target=“_blank"

1.4程序流程图

1.4.1上下跳动文本流程图

 

图1.4.1

1.4.2定期滚动文本流程图

 

1.5.主要源代码

1.5.1文本上下跳动代码

DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.0Transitional//EN">

--

DOCTYPE>标签此标签可告知浏览器文档使用哪种HTML-->

文本上下跳动

\热们泽-心之逆鳞[mqms].mp3>

\1.jpg">

--

--定义变量,并赋初值。

-->

done=0;

step=4;

functionanim(yp,yk)

{

if(document.layers)document.layers["napis"].top=yp;

elsedocument.all["napis"].style.top=yp;

if(yp>yk)step=-40

if(yp<60)step=40

--注释2.3分情况讨论step的值。

-->

setTimeout('anim('+(yp+step)+','+yk+')',100);

--注释2.4设置定时-->

}

functionstart()

{

if(done)return

done=1;

if(navigator.appName=="Netscape"){

--利用对象navigator获得浏览器的名称-->

document.napis.left=innerWidth/2-145;

anim(60,innerHeight-60)

}

else{

napis.style.left=200;

anim(60,document.body.offsetHeight-60)

}

}

//-->

--注释3.1网页第一部分(标题)设置层-->

welcometo

red">文字跳动网页

--标题标签n越大字号越小;DIV(division)是一个块级元素,可以包含段落、标题、表格,乃至诸如章节、摘要和备注等-->

style="position:

absolute;top:

60px;width:

300px;height:

0px;left:

200">

color="yellow">明天,你好

--使用nameitem方法获得对id属性值为second2的div元素的引用;HTML网页内定义css样式:

每一个HTML元素都包含一个style属性,使用该属性可以直接指定样式,样式间用分号隔开-->

--

setTimeout('start()',1000);

--注释4.1每10毫秒,调用一次start()函数-->

//-->

--符号”//”前面的内容对于旧的浏览器来说是隐藏的-->

1.5.2定期滚动文本代码

DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.0Transitional//EN">

--声明了文档的根元素是html,它在公共标识符被定义为"-//W3C//DTDXHTML1.0Strict//EN"的DTD中进行了定义-->

定期滚动文本

\热们泽-心之逆鳞[mqms].mp3>

\2.jpg">

width="35%">

--表格-->

--表体-->

--行-->

--单元格-->

width="500%">

varscrollerwidth=450//滚动宽度属于单元格内容部分

varscrollerheight=250//滚动高度

varscrollerbgcolor='#fffaaa'

//3000miliseconds=4seconds

varpausebetweenimages=1000

varslideimages=newArray()

slideimages[0]='欢迎进入
不惋惜,不呼唤,我也不啼哭



一切将逝去……如苹果花丛的薄雾


金黄的落叶堆满我心间——
'

slideimages[1]='我已经再不是青春少年。




心儿啊,你已开始悄悄冷却,


如今再不会那样地跳跃:



'

slideimages[2]='这白桦的图案织成的家园,


再不能吸引我赤脚留连。




流浪者的激情哪!

越来越不见你,
'

slideimages[3]='促使我轻轻吐出火热的言语。




啊,我的白白流逝的华年!




迸发的憎恨和奔放的情感!


'

slideimages[4]='如今我已倦于期待未来,


生活呀,难道你是一场幻梦?




仿佛我曾在喧闹的春晨
'

slideimages[5]='在玫瑰色的骏马上尽情驰骋。




槭树的黄叶落地无声,


世人都必将腐朽无踪……
'

slideimages[6]='天下的众生啊,你们生生不息,


我愿你永远美好、繁荣!




——来自《平凡的世界》谢谢欣赏!


'

--创建数组,并初始化-->

if(slideimages.length>1)

i=2

else

i=0

functionmove1(whichlayer){//定义函数一,且带参数whichlayer

tlayer=eval(whichlayer)

--用来计算表达式,将表达式转换成一个变量名或者对象名,然后使用它就可以访问变量或者对象。

-->

if(tlayer.top>0&&tlayer.top<=5){

tlayer.top=0

setTimeout("move1(tlayer)",pausebetweenimages)

setTimeout("move2(document.main.document.second)",pausebetweenimages)

return

}

if(tlayer.top>=tlayer.document.height*-1){

tlayer.top-=5

setTimeout("move1(tlayer)",100)

--//延迟调用相对的方法clearTimeout()-->

}

else{

tlayer.top=scrollerheight

tlayer.document.write(slideimages[i])

tlayer.document.close()

if(i==slideimages.length-1)

i=0

else

i++

}

}

functionmove2(whichlayer){//函数二

tlayer2=eval(whichlayer)

if(tlayer2.top>0&&tlayer2.top<=5){

tlayer2.top=0

setTimeout("move2(tlayer2)",pausebetweenimages)

setTimeout("move1(document.main.document.first)",pausebetweenimages)

return

}

if(tlayer2.top>=tlayer2.document.height*-1){

tlayer2.top-=5

setTimeout("move2(tlayer2)",100)

}

else{

tlayer2.top=scrollerheight

tlayer2.document.write(slideimages[i])

tlayer2.document.close()

if(i==slideimages.length-1)

i=0

else

i++

}

}

functionmove3(whichdiv){//第二个被调用的函数,代参whichdiv(形参)=first2(实参)

tdiv=eval(whichdiv)

if(tdiv.style.pixelTop>0&&tdiv.style.pixelTop<=5){

tdiv.style.pixelTop=0

setTimeout("move3(tdiv)",pausebetweenimages)

setTimeout("move4(second2)",pausebetweenimages)

return//延迟意味先执行return语句

}

if(tdiv.style.pixelTop>=tdiv.offsetHeight*-1){

//offsetHeight获取对象(tdiv2=second2)的高度,相对于布局而言

tdiv.style.pixelTop-=5

setTimeout("move3(tdiv)",100)

}

else{

tdiv.style.pixelTop=scrollerheight

tdiv.innerHTML=slideimages[i]

--innerHTML设置,或者获取对象及其内容的html形式,使用这个方法可以在元素中加入其他的html元素内容。

-->

if(i==slideimages.length-1)

i=0

else

i++

}

}

functionmove4(whichdiv){//函数4

tdiv2=eval(whichdiv)

if(tdiv2.style.pixelTop>0&&tdiv2.style.pixelTop<=5){

tdiv2.style.pixelTop=0

setTimeout("move4(tdiv2)",pausebetweenimages)

setTimeout("move3(first2)",pausebetweenimages)

return

}

if(tdiv2.style.pixelTop>=tdiv2.offsetHeight*-1){

tdiv2.style.pixelTop-=5

setTimeout("move4(second2)",100)

}

else{

tdiv2.style.pixelTop=scrollerheight

tdiv2.innerHTML=slideimages[i]

if(i==slideimages.length-1)

i=0

else

i++

}

}

functionstartscroll(){//第一个被调用的函数

if(document.all){

move3(first2)

second2.style.top=scrollerheight

}

elseif(document.layers){//如果浏览器是Netscape

move1(document.main.document.first)

document.main.document.second.top=scrollerheight+5

document.main.document.second.visibility='show'

}

}

window.onload=startscroll

--从这里开始读程序当浏览器完成事件的加载后立即触发-->

if(document.layers)

document.write(slideimages[0])

if(document.layers)

document.write(slideimages[1])

if(document.layers)

document.write(slideimages[0])

if(document.all){

--span标签嵌入行内滚动区域-->

document.writeln('

relative;width:

'+scrollerwidth+';height:

'+scrollerheight+';overflow:

hidden;background-color:

'+scrollerbgcolor+'">')

document.writeln('

absolute;width:

'+scrollerwidth+';height:

'+scrollerheight+';clip:

rect(0+'+scrollerwidth+''+scrollerheight+'0);left:

0;top:

0">')//设置形状

document.writeln('

absolute;width:

'+scrollerwidth+';left:

0;top:

展开阅读全文
相关搜索

当前位置:首页 > 考试认证 > 其它考试

copyright@ 2008-2022 冰豆网网站版权所有

经营许可证编号:鄂ICP备2022015515号-1