JavaScript+jQuery开发框架课程设计.docx
JavaScript+jQuery开发框架课程设计题 目 网络站点 院 （系） 信息工程学院 专 业 班 级 学 生 姓 名 学 号 设 计 地 点 指 导 教 师 起止时间：2016年5月30日至2016年6月5日站点截图基于javascript的网站开发摘要JavaScript是开发WEB应用程序不可或缺的一种语言，无论是为web页面增加交互性还是创建整个应用程序，如果没有Javascript，今天的web就不是现在这个样子了。JavaScript是具有正式规范的基于标准语言；然而，正如任何一个web开发人员所告诉你的那样，几乎每个web浏览器对这个规范的解释都不同。本网站充分的结合了HTML与CSS的结合充分显示了网站的动态效果，是客户与网站能够充分的结合，进行信息的交换信息不断的进行更新。基于新闻管理网站，国外新闻页面更具有代表性，是网站最标准型之一，通过Javascript脚本的交互式该页面更好与其他的页面相互结合。同时通常页面的下载是按照代码的排列顺序，而表格布局代码的排列代表从上向下，从左到右，无法改变。而通过CSS控制，您可以任意改变代码的排列顺序，比如将重要的右边内容先加载出来。关键字： Javascript脚本目录一、前言11.1课程设计11.2课程设计目标1二、关键技术12.1HTML相关概念12.2css22.3javascript3一、总体设计43.1网站总体架构43.2网站软件结构43.3网站功能设计5二、详细设计84.1中文日历84.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>与</head>之间的内容不会在浏览器的文档窗口显示，但是其间的元素有特殊重要的意义。 <title></title> <title>元素定义HTML文档的标题。<title>与</title>之间的内容将显示在浏览器窗口的标题栏。</HEAD><BODY> HTML 文件的正文/<body>元素表明是HTML文档的主体部分。在<body>与</body>之间，通常都会有很多其它元素；这些元素和元素属性构成HTML文档的主体部分。</BODY> </HTML>元素：是HTML语言的基本部分。元素总是成对出现，每一对元素一般都有一个开始的标记（如<body>），也有一个结束的标记（如</body>）。元素的标记要用一对尖括号括起来，并且结束的标记总是在开始的标记前加一个斜杠。HTML元素属性:HTML元素可以有自己的相关属性，每一个属性还可以由我们网页编制者赋一定的值。元素属性出现在元素的< >内，并且和元素名之间有一个空格分隔；属性值用“”引起来。2.2css1.css简介级联样式表（Cascading Style Sheet）简称“CSS”，它是用来进行网页风格设计。通过设立样式表，可以统一地控制HTML中各标签的显示属性。级联样式表可以使人更能有效地控制网页外观。使用级联样式表，可以扩充精确指定网页元素位置，外观以及创建特殊效果的能力。2.css文件当要在站点上所有或部份的网页上一致地应用相同样式时，可使用外部样式表。在一个或多个外部样式表中定义样式，并将它们链接到所有网页，便能确保所有网页外观的一致性。如果人们决定更改样式，只需在外部样式表中作一次更改，而该更改会反映到所有与该样式表相链接的网页上。通常外部样式表以 .css 做为文件扩展名，例如 Mystyles.css。2.3javascript 1javascript语言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：INTERNETIIS WEB SERVERSQL SERVER图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主页代码 <!DOCTYPE html><html><head><title>Home</title><meta name="viewport" content="width=device-width, initial-scale=1"><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta name="keywords" content="Fruit_Salad Responsive web template, Bootstrap Web Templates, Flat Web Templates, Andriod Compatible web template, Smartphone Compatible web template, free webdesigns for Nokia, Samsung, LG, SonyErricsson, Motorola web design" /><script type="application/x-javascript"> addEventListener("load", function() setTimeout(hideURLbar, 0); , false); function hideURLbar() window.scrollTo(0,1); </script><link href="css/bootstrap.css" rel='stylesheet' type='text/css' /><link href="css/style.css" rel='stylesheet' type='text/css' /><link href=' rel='stylesheet' type='text/css'><link href=' rel='stylesheet' type='text/css'><script src="js/jquery-1.11.0.min.js"></script><script src="js/jquery.min.js"> </script><!- start-smoth-scrolling-><script type="text/javascript" src="js/move-top.js"></script><script type="text/javascript" src="js/easing.js"></script><script type="text/javascript">jQuery(document).ready(function($) $(".scroll").click(function(event)event.preventDefault();$('html,body').animate(scrollTop:$(this.hash).offset().top,1000);););</script><!- start-smoth-scrolling-></head><body><!-start-header-><div class="header" id="home"><div class="container"><div class="logo"><a href="index.html"><img src="images/logo-23.png" alt=""></a></div><div class="navigation"> <span class="menu"></span> <ul class="navig"><li><a class="active" href="index.html">主页</a><span> </span></li><li><a href="about.html">关于我们</a><span> </span></li><li><a href="blog.html">博客</a><span> </span></li><li><a href="pages.html">Pages</a><span> </span></li><li><a href="gallery.html">作品展示</a><span> </span></li><li><a href="contact.html">联系我们</a><span> </span></li></ul></div> <!- script-for-menu -> <script>$("span.menu").click(function()$(" ul.navig").slideToggle("slow" , function();); </script> <!- script-for-menu -></div></div><!-end-header-><!-banner-starts-><div class="banner" id="home"><section class="slider"> <div class="flexslider"> <ul class="slides"><li><div class="banner-top"><div class="col-md-6 banner-left"><div class="bnr-one"><img src="images/b-2.jpg" alt="" /><h3>Donec interdum</h3><p>Ambrosia is a Traditional fruit salad</p></div></div><div class="col-md-6 banner-left"><div class="bnr-one"><img src="images/b-1.jpg" alt="" /><h3>Aliquam bibendum</h3><p>Ambrosia is a Traditional fruit salad</p></div></div><div class="clearfix"> </div></div></li><li><div class="banner-top"><div class="col-md-6 banner-left"><div class="bnr-one"><img src="images/b-2.jpg" alt="" /><h3>Aliquam bibendum</h3><p>Ambrosia is a Traditional fruit salad</p></div></div><div class="col-md-6 banner-left"><div class="bnr-one"><img src="images/b-3.jpg" alt="" /><h3>Quisque pharetra</h3><p>Ambrosia is a Traditional fruit salad</p></div></div><div class="clearfix"> </div></div></li><li><div class="banner-top"><div class="col-md-6 banner-left"><div class="bnr-one"><img src="images/b-1.jpg" alt="" /><h3>Quisque pharetra</h3><p>Ambrosia is a Traditional fruit salad</p></div></div><div class="col-md-6 banner-left"><div class="bnr-one"><img src="images/b-2.jpg" alt="" /><h3>Donec interdum</h3><p>Ambrosia is a Traditional fruit salad</p></div></div><div class="clearfix"> </div></div></li> </ul> </div> </section></div><!-banner-ends-> <!-FlexSlider-><link rel="stylesheet" href="css/flexslider.css" type="text/css" media="screen" /><script defer src="js/jquery.flexslider.js"></script><script type="text/javascript"> $(function() SyntaxHighlighter.all(); ); $(window).load(function() $('.flexslider').flexslider( animation: "slide", start: function(slider) $('body').removeClass('loading'); ); ); </script><!-End-slider-script-><div class="welcome"><div class="container"><h4>欢迎</h4><p>Ambrosia is a variation on the traditional fruit salad. Most ambrosia recipes contain fresh or sweetened pineapple, mandarin oranges or fresh orange sections, miniature marshmallows,1 and coconut.2</p></div></div><div class="welcome-bottom"><div class="container"><div class="welcome-bottom-info"><div class="col-md-8 slit-slider"><section class="main"><div class="ia-container"><figure><img src="images/port-1.jpg" alt="image01" /><input type="radio" name="radio-set" checked="checked"/><figcaption><span>Juicy Fruit Salad</span></figcaption><figure><img src="images/port-2.jpg" alt="image02" /><input type="radio" name="radio-set" /><figcaption><span>Fabulous Fruit Salad</span></figcaption><figure><img src="images/port-3.jpg" alt="image03" /><input type="radio" name="radio-set" /><figcaption><span>Blueberry Salad</span></figcaption><figure><img src="images/port-4.jpg" alt="image04" /><input type="radio" name="radio-set" /><figcaption><span>Apple Salad</span></figcaption><figure><img src="images/port-5.jpg" alt="image05" /><input type="radio" name="radio-set" /><figcaption><span>Strawberry Salad</span></figcaption><figure><img src="images/port-6.jpg" alt="image06" /><input type="radio" name="radio-set" /><figcaption><span>Orange Salad</span></figcaption><figure><img src="images/port-7.jpg" alt="image07" /><input type="radio" name="radio-set" /><figcaption><span>Mango Cashew Salad</span></figcaption><figure><img src="images/port-8.jpg" alt="image08" /><input id="ia-selector-last" type="radio" name="radio-set" /><figcaption><span>Green Grape Salad</span></figcaption></figure></figure></figure></figure></figure></figure></figure></figure></div><!- ia-container -></section></div><div class="col-md-4 slit-slider-text"><h4>Vitae elementum diam molestie</h4><p>Maecenas interdum augue eget elit interdum, vitae elementum diam molestie. Nulla facilisi.Phasellus tempor erat id erat gravida pulvinar. Aenean est felis, ullamcorper et volutpat sed, cursus at enim. Vestibulum vel finibus neque. In sed magna tellus.Phasellus tempor erat id erat gravida pulvinar. Aenean est felis, ullamcorper et volutpat sed, cursus at enim. Vestibulum vel finibus neque. In sed magna tellus</p></div><div class="clearfix"> </div></div></div></div><div class="copyrights">Collect from <a href=" ></a></div><!-offer-starts-><div class="offer"><div class="container"><div class="offer-top heading"><h4>精品沙拉</h4></div><div class="offer-bottom"><div class="col-md-3 offer-left"><a href="single.html"><img src="images/o-1.jpg" alt="" /><h6>Orange Salad</h6></a><h4><a href="single.html">Quisque sed neque</a></h4><p>Maecenas interdum augue eget elit interdum, vitae elementum diam molestie. Nulla facilisi.</p><div class="o-btn"><a href="single.html">Read More</a></div></div><div class="col-md-3 offer-left"><a href="single.html"><img src="images/o-2.jpg" alt="" /><h6>Mixed Salad</h6></a><h4><a href="single.html">Donec mattis nunc</a></h4><p>Maecenas interdum augue eget elit interdum, vitae elementum diam molestie. Nulla facilisi.</p><div class="o-btn"><a href="single.html">Read More</a></div></div><div class="col-md-3 offer-left"><a href="single.html"><img src="images/o-3.jpg" alt="" /><h6>Strawberry Salad</h6></a><h4><a href="single.html">Maecenas non risus</a></h4><p>Maecenas interdum augue eget elit interdum, vitae elementum diam molestie. Nulla facilisi.</p><div class="o-btn"><a href="single.html">Read More</a></div></div><div class="col-md-3 offer-left"><a href="single.html"><img src="images/o-5.jpg" alt="" /><h6>Grape Salad</h6></a><h4><a href="single.html">Nullam vitae nisl</a></h4><p>Maecenas interdum augue eget elit interdum, vitae elementum diam molestie. Nulla facilisi.</p><div class="o-btn"><a href="single.html">Read More</a></div></div><div class="clearfix"> </div></div></div></div><!-offer-ends-> <!-nature-starts-> <div class="nature"><div class="nature-top"><h3>Maecenas ornare lobortis</h3><p>Fruit salad is a dish consisting of various kinds of fruit, sometimes served in a liquid, either in their own juices or a syrup. When served as an appetizer or as a dessert, a fruit salad is sometimes known as a fruit cocktail or fruit cup. In different forms fruit salad can be served as an appetizer, a side-salad, or a dessert.</p></div></div><!-nature-ends-> <!-footer-><div class="footer"><div class="footer-grids"><div class="container"><div class="col-md-3 footer-grid"><h4>服务</h4><ul><li><a href="#">Contact Customer Service</a></li><li><a href="#">Free Delivery</a></li><li><a href="#">View your Wishlist</a></li><li><a href="#">Ring Size Guide</a></li><li><a href="#">Returns</a></li></ul></div><div class="col-md-3 footer-grid"><h4>信息</h4><ul><li><a href="#">Gift certificates</a></li><li><a href="#">Jewellery care guide</a></li><li><a href="#">International customers</a></li><li><a href="#">Wholesale enquires</a></li><li><a href="#">Returns</a></li></ul></div><div class="col-md-3 footer-grid"><h4>了解更多</h4><ul><li><a href="#">About us</a></li><li><a href="#">Privacy Policy</a></li><li><a href="#">Terms & Condition</
