java课设报告解析_第1页
java课设报告解析_第2页
java课设报告解析_第3页
java课设报告解析_第4页
java课设报告解析_第5页
已阅读5页，还剩9页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

1、精选优质文档-倾情为你奉上目 录专心-专注-专业1、 设计目的Javascript是由Ntscape公司开发的一种跨平台，面向对象的网页脚本语言，是目前流行的网页特效设计语言。本次课设的主要目的是掌握javascript的文字特效，对网页布局的设计、色彩的搭配、文字的编辑等的练习。本次课程设计的任务：基于javascript的网页文字特效设计，实现上下跳动的文本以及定期滚动的文本。2、 总体设计2.1、上下跳动的文本： 通过anim函数来进行位置的变换（主要的原理就是改变文本所在对象的top属性）同时实现自身的递归循环，通过start函数来实现主函数的启动。并通过setTimeout（）方法实

2、现了start（）的延迟调用。2.2、定期滚动的文本： 通过setTimeout()方法实现函数startmarquee（）的延迟调用同时利用setInterval（）函数实现循环的效果，通过start函数来实现主函数的启动。同时利用onmouseover、onmouseout达到鼠标移进滚动区域滚动停止，鼠标移出滚动区域继续循环滚动的效果。3、 关键技术 3.1、HTML概念 HTML（Hyper Text Markup Language 超文本表示语言） HTML不是编程语言，而是一种描述性的标记语言，用于描述网页中内容的显示方式 是一种用来制作超文本文档的简单标记语言。 用HTML编写的

3、超文本文件称为HTML文件，也成Web文件。 3.2、HTML文件结构 基本结构 ： <html> <head> <title>标题</title> </head> <body> 正文 </body></html> ·<html> 标识网页文件的开始与结束，所有的html元素都要放在这对标记中 ·<head><head>元素出现在文档的开头部分。<head>与</head>之间的内容不会在浏览器的文档窗口显示，但是期间的

4、元素有特殊重要的意义。· <title> <title>元素定义HTML文档的标题。<title>与</title>之间的内容 将显示在浏览器窗口的标题栏。 ·<body> HTML文件的正文/<body>元素表明是HTML文档的主体部分。在<body>与</body>之间，通常都会有很多其他元素；这些元素和元素属性所构成HTML文档的主体部分。 元素：是HTML语言的基本部分。元素总是成对出现，每一对元素一般都有一个开始的标记（如<body>），也有一个结束的标记（

5、如</body>）。元素的标记要用一对尖括号括起来，并且结束的标记总是在开始的标记前加一个斜杠。 HTML元素属性:HTML元素可以有自己的相关属性，每一个属性还可以由我们网页编制者赋一定的值。元素属性出现在元素的< >内，并且和元素名之间有一个空格分隔；属性值用“”引起来。 3.3、将JavaScript嵌入网页JavaScript代码可直接嵌入HTML文件中，随网页一起传送到客户端浏览器，然后 通过浏览器来解释执行。 v· JavaScript 语句插入 HTML的方式： § 使用 <SCRIPT> 标签将语句嵌入文档 §

6、将 JavaScript 源文件(.js)链接到 HTML 文档中 <script src="xxx.js">.</script> v ·JavaScript 语句插入 HTML的位置： § body部分的JS § head部分的JS：当脚本被调用、事件被触发时执行，可保证在调用函数前， 脚本已载入3.4部分关键元素属性表格元素及属性<td>定义表格的一个单元格<tr>定义表格的行<table>定义一个表格width属性：指定表格或某一个表格单元格的宽度。单位可以是%或者象素。heig

7、ht属性：指定表格或某一个表格单元格的高度。单位可以是%或者象素。border属性：表格边线粗细bgcolor属性：指定表格或某一个单元格的背景颜色align属性：指定表格或某一个单元格里的内容（文本、图片等）的对齐方式设置表格格子之间空间的大小 <table cellspacing=#>设置表格格子边框与其内部内容之间空间的大小 <table cellpadding=#>设置表格格子的水平对齐（左中右） <tr align=?> or <td align=?>设置表格格子的垂直对齐（上中下） <tr valign=?> or <

8、;td valign=?>文本文字标签属性指定颜色 <font color=#> . </font>字体大小<font size=#> . </font>文本文字布局段Paragraph) <p>Center<b>粗体文本</b>LeftRight换行符<br/>元素不是成对出现的<center>居中段落</center>超级链接 锚元素<a>元素属性href的属性值为一个URL地址开一个新的(浏览器)窗口 target=“_blank"无序列表&

9、lt;ul>标签定义无序列表<li>标签定义列表项目鼠标事件属性onmouseover当鼠标指针悬停于某元素之上时执行脚本onmouseout当鼠标指针移出某元素时执行脚本4、 程序流程4.1、上下跳动的文本（开始）Top=yp=60向下约100ms循环向下跳动4step至top=yp>yk约100ms向上循环跳动40step跳动方向改变至top=yp<60约100ms向下循环跳动40step跳动方向改变4.2、定期滚动的文本（开始）o.scrollTop = 0倒计时4so.scrollTop = 0文字向上滚动文字停止滚动至o.scrollTop >=

10、o.scrollHeight / 2鼠标移进5、 主要原代码5.1、文字上下跳动的代码 <!DOCTYPE HTML PUBLIC “-/W3C/DTD HTML 4.0 Transitional/EN”><html><head> <title>文本上下跳动</title><style type=”text/css”> #napis position:absolute; top:60px; width:300px; height:0; left:200px; </style></head><s

11、cript type=”text/javascript”> done=0;step=4;function anim(yp,yk) if(document.layers) document.;layers“napis”.top=yp; else document.all“napis” .style.top=yp; if(yp>yk) step= - 40if(yp<60) step= 40setTimeout(anim(+(yp+step)+,+yk+),100);function start() if(done) return done=1;if(navigator.appN

12、ame=”Netscape”) document.napis.left=innerWidth/2 145; anim(60,innerHeight - 60)else napis.style.left=200; anim(60,document.body.offsetHeight - 60)setTimeout(start().1000);</script><body> <div id=”napis” ><p>文字上下跳动</p></div></body></html>5.2、定期滚动文本的代码 &

13、lt;!DOCTYPE HTML PUBLIC “-/W3C/DTD HTML 4.0 Transitional/EN”><html><head> <title>定期滚动文本</title><style type="text/css"> ulheight:210px;width:500px;overflow:hidden;border:1px solid black; liline-height:20px;overflow: hidden; </style> </head><bo

14、dy> 定期滚动文本演示 <ul id="marquee"> <li>天上人间 昨日别年</li> <li>流逝的 经过的 越来越远</li> <li>但只有你的脸 清晰的越明显</li> <li>不觉中 胜过了时间</li> <li>枫叶正红 飞雁又南迁</li> <li>百转千结的是眷恋</li> <li>多少个日夜 辗转不成眠</li> <li>终有一天心愿都实现</

15、li> <li>缠绵望不穿 还记得那誓言</li> <li>相信有最后的圆满</li> <li>陪你去天边 经历过久久磨难</li> <li>放眼天下 信念不变</li> <li>记得昨日 孤伤的秋天</li> </ul> <script type="text/javascript"> window.onload = function() setTimeout("startmarquee(34, 50, 0, 

16、9;marquee')", 4000); function startmarquee(lh,speed,delay,id) var t; var p = false; var o = document.getElementById(id); o.innerHTML += o.innerHTML + o.innerHTML + o.innerHTML; o.onmouseover = function() p = true; o.onmouseout = function() p = false; o.scrollTop = 0; function start() t = se

17、tInterval(scrolling,speed); if(!p) o.scrollTop += 2; function scrolling() if(o.scrollTop%lh != 0) o.scrollTop += 2; if(o.scrollTop >= o.scrollHeight / 2) o.scrollTop = 0; else clearInterval(t); setTimeout(start,delay); setTimeout(start,delay); </script></body></html>6、 运行结果及结论 6

18、.1、上下跳动的文本图1.1 上下跳动的文本图1.2 上下跳动的文本 6.2、定期滚动的文本图2.1 定期滚动的文本图2.2 定期滚动的文本 图2.3 定期滚动的文本结 论想想这次课程设计的全过程，我有很多感慨，从理论知识到上机实践，在这个过程中，我意识到了理论与操作之间的差距,理论知识好不代表上机时可以成功运行。我和同组的同学一起查阅书籍笔记，上网查找资料，咨询老师学长同学们，终于一点一点把难题解决，成功的运行出了正确的程序。在这次课设的过程中，我发现我们对之前所需的知识并不如想象中的那么牢固，很多知识点模糊，理解不够深刻,还有待加强。通过这次课程设计，我将模糊和不懂的知识点彻底的巩固了，可以说我得到了很多。在最开始的时候，我对于自己的课题没有太多的想法只是觉得对自己来说太难了,是不可完成的任务，所以很担忧，但是通过和组员一起努力，相互帮助最终还是完成了。以后，我一定要好好学习和掌握理论知识，并且学会应用和实践，做到不单单只是纸上谈兵。同时，这次课设也让我有了人生感悟，不能应为事情有点难，就弃之不做，只要心意诚，

人人文库> 全部分类> 教育资料 > 辅导培训

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论