JavaScript jQuery开发框架课程设计剖析文档格式.docx
- 文档编号:21621730
- 上传时间:2023-01-31
- 格式:DOCX
- 页数:23
- 大小:1.12MB
JavaScript jQuery开发框架课程设计剖析文档格式.docx
《JavaScript jQuery开发框架课程设计剖析文档格式.docx》由会员分享,可在线阅读,更多相关《JavaScript jQuery开发框架课程设计剖析文档格式.docx(23页珍藏版)》请在冰豆网上搜索。
3.3网站功能设计5
二、详细设计8
4.1中文日历8
4.2主页代码8
五、课设总结22
六、参考文献23
一、前言
1.1课程设计思路:
设计一个交互性强网络站点大量运用CSS样式等,美化网站,提升网站的吸睛度。
1.2课程设计目标
1.能够熟练使用css结合html,利用代码编写出日历雏形,。
2.熟练使用javascript和cookie实现日期精准查询,从而提高网页访问速度。
3.熟练使用javascript中的内建对象最终实现一个中文日历的雏形。
二、关键技术
2.1HTML相关概念
1.HTML语言
HTML语言(Hypertext
Markup
Language,中文通常称为超文本置标语言或超文本标记语言)是一种文本类、解释执行的标记语言,它是Internet上用于编写网页的主要语言。
用HTML编写的超文本文件称为HTML文件。
在WWW上,通常使用的发布语言是HTML,即超文本标识语言。
当用浏览器打开网页时,浏览器读取网页中的HTML代码,分析其语法结构,然后根据解释的结果显示网页内容,正是因为如此,制作网页的时候,如果不涉及HTML语言,几乎是不可能的。
如图:
WWW三个组成部分
图2-1WWW的组成
2.HTML文件结构
<
HTML>
HEAD>
<
head>
元素出现在文档的开头部分。
与<
/head>
之间的内容不会在浏览器的文档窗口显示,但是其间的元素有特殊重要的意义。
title>
/title>
元素定义HTML文档的标题。
之间的内容将显示在浏览器窗口的标题栏。
/HEAD>
BODY>
HTML文件的正文//<
body>
元素表明是HTML文档的主体部分。
在<
/body>
之间,通常都会有很多其它元素;
这些元素和元素属性构成HTML文档的主体部分。
/BODY>
/HTML>
元素:
是HTML语言的基本部分。
元素总是成对出现,每一对元素一般都有一个开始的标记(如<
),也有一个结束的标记(如<
)。
元素的标记要用一对尖括号括起来,并且结束的标记总是在开始的标记前加一个斜杠。
HTML元素属性:
HTML元素可以有自己的相关属性,每一个属性还可以由我们网页编制者赋一定的值。
元素属性出现在元素的<
>
内,并且和元素名之间有一个空格分隔;
属性值用“”引起来。
2.2css
1.css简介
级联样式表(CascadingStyleSheet)简称“CSS”,它是用来进行网页风格设计。
通过设立样式表,可以统一地控制HTML中各标签的显示属性。
级联样式表可以使人更能有效地控制网页外观。
使用级联样式表,可以扩充精确指定网页元素位置,外观以及创建特殊效果的能力。
2.css文件
当要在站点上所有或部份的网页上一致地应用相同样式时,可使用外部样式表。
在一个或多个外部样式表中定义样式,并将它们链接到所有网页,便能确保所有网页外观的一致性。
如果人们决定更改样式,只需在外部样式表中作一次更改,而该更改会反映到所有与该样式表相链接的网页上。
通常外部样式表以.css做为文件扩展名,例如Mystyles.css。
2.3javascript
1.javascript语言
JavaScript是一种基于对象和事件驱动并具有相对安全性的客户端脚本语言。
同时也是一种广泛用于客户端Web开发的脚本语言,常用来给HTML网页添加动态功能,响应用户的各种操作。
2.JavaScript嵌入HTML文件
JavaScript代码可直接嵌入HTML文件中,随网页一起传送到客户端浏览器,然后通过浏览器来解释执行。
1)、JavaScript语句插入HTML的方式:
(1)使用<
SCRIPT>
标签将语句嵌入文档
(2)将JavaScript源文件(.js)链接到HTML文档中
2)、JavaScript语句插入HTML的位置:
(1)body部分的JS
(2)head部分的JS:
当脚本被调用、事件被触发时执行,可保证在调用函数前,脚本已载入
一、总体设计
3.1网站总体架构
本系统的实现采用典型的B/S结构来实现,不同的客户端程序通过IE共同访问WEB服务器的发布页面、WEB服务器访问数据库服务器进行数据存取,系统结构如图3-1:
图3-1系统结构图
3.2网站软件结构
图3-2软件结构图
3.3网站功能设计
在本网站中包括动态切换广告条、浮动广告、中文小日历、电子时钟、数学计算器、购物车、树形结构菜单、用户注册等,并进行一定的美化和整理,基本完成商务网站的雏形结构。
显示的样式要求如下:
1.广告推荐:
一般有动态切换广告条、浮动图片和文字滚动等几种方式,通过动态样式表甚至可以让图片的切换获得多达20多种转场效果。
2.商品浏览:
一般用HTML表格显示商品的图片、价格、规格等信息,大部分网站都采用数据库和动态脚本语言来自动生成商品的列表。
3.电子购物车:
电子购物车一般有两种方式来实现,一种是在服务器端存储每个用户的每一次电子购物操作,还有一种是采用客户端cookie来实现电子购物车,cookie是网站存储在客户端的少量数据,可以让网站的不同网页之间共享相同的变量。
4.用户注册功能:
创建用户注册程序,需要输入的信息包括注册用户名、口令、姓名、出生年月日、身份证号码、住址、邮编。
重点体现在格式验证通过客户端,无须将数据提交到服务器端,从而提高了程序的效率,也可以避免程序提交数据的过程中重复输入的过程。
5.电子时钟设置:
通过JavaScript模仿液晶显示板的形式创建一个电子时钟,要求按照12小时制进行时间显示,如果是上午则显示AM,如果是下午则显示PM。
6.中文日历:
编写一个中文小日历程序,可以在网页中显示出当前客户端的日期信息,同时也可以显示出本月其他日期的星期。
必须采用中文星期表示来显示星期,如果是闰年则必须在年份的旁边注明。
7.树形结构菜单:
创建一个树形菜单,要求可以展开多级分类菜单,在包含内容的文件夹前显示加号图片,在展开后则显示减号图片,对于不包含内容的叶节点则用叶节点图片来表示。
二、详细设计
4.1中文日历
4.2主页代码
!
DOCTYPEhtml>
html>
Home<
metaname="
viewport"
content="
width=device-width,initial-scale=1"
>
metahttp-equiv="
Content-Type"
text/html;
charset=utf-8"
/>
keywords"
Fruit_SaladResponsivewebtemplate,BootstrapWebTemplates,FlatWebTemplates,AndriodCompatiblewebtemplate,
SmartphoneCompatiblewebtemplate,freewebdesignsforNokia,Samsung,LG,SonyErricsson,Motorolawebdesign"
scripttype="
application/x-javascript"
addEventListener("
load"
function(){setTimeout(hideURLbar,0);
},false);
functionhideURLbar(){window.scrollTo(0,1);
}<
/script>
linkhref="
css/bootstrap.css"
rel='
stylesheet'
type='
text/css'
css/style.css"
linkhref='
scriptsrc="
js/jquery-1.11.0.min.js"
js/jquery.min.js"
----start-smoth-scrolling---->
text/javascript"
src="
js/move-top.js"
js/easing.js"
jQuery(document).ready(function($){
$("
.scroll"
).click(function(event){
event.preventDefault();
$('
html,body'
).animate({scrollTop:
$(this.hash).offset().top},1000);
});
});
<
----start-header---->
divclass="
header"
id="
home"
container"
<
logo"
<
ahref="
index.html"
imgsrc="
images/logo-23.png"
alt="
"
/a>
/div>
navigation"
spanclass="
menu"
/span>
ulclass="
navig"
<
li>
aclass="
active"
href="
主页<
span>
/li>
about.html"
关于我们<
blog.html"
博客<
pages.html"
Pages<
gallery.html"
作品展示<
contact.html"
联系我们<
/ul>
--script-for-menu-->
script>
span.menu"
).click(function(){
$("
ul.navig"
).slideToggle("
slow"
function(){
});
----end-header---->
--banner-starts-->
banner"
sectionclass="
slider"
flexslider"
slides"
<
<
banner-top"
col-md-6banner-left"
bnr-one"
<
images/b-2.jpg"
h3>
Donecinterdum<
/h3>
p>
AmbrosiaisaTraditionalfruitsalad<
/p>
images/b-1.jpg"
Aliquambibendum<
clearfix"
images/b-3.jpg"
Quisquepharetra<
/section>
--banner-ends-->
--FlexSlider-->
linkrel="
stylesheet"
css/flexslider.css"
type="
text/css"
media="
screen"
scriptdefersrc="
js/jquery.flexslider.js"
$(function(){
SyntaxHighlighter.all();
});
$(window).load(function(){
$('
.flexslider'
).flexslider({
animation:
"
slide"
start:
function(slider){
body'
).removeClass('
loading'
);
}
--End-slider-script-->
welcome"
h4>
欢迎<
/h4>
Ambrosiaisavariationonthetraditionalfruitsalad.Mostambrosiarecipescontainfreshorsweetenedpineapple,mandarinorangesorfreshorangesections,miniaturemarshmallows,[1]andcoconut.[2]<
welcome-bottom"
welcome-bottom-info"
col-md-8slit-slider"
main"
ia-container"
figure>
images/port-1.jpg"
image01"
inputtype="
radio"
name="
radio-set"
checked="
checked"
/>
figcaption>
JuicyFruitSalad<
/figcaption>
images/port-2.jpg"
image02"
FabulousFruitSalad<
images/port-3.jpg"
image03"
BlueberrySalad<
<
images/port-4.jpg"
image04"
AppleSalad<
<
images/port-5.jpg"
image05"
StrawberrySalad<
<
images/port-6.jpg"
image06"
OrangeSalad<
<
images/port-7.jpg"
image07"
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- JavaScript jQuery开发框架课程设计剖析 jQuery 开发 框架 课程设计 剖析