javascript课程设计电子商务.doc

JavaScript课程设计潍坊科技学院JavaScript课程设计报 告 书设计题目 基于javascript的电子商务网站开发 专业班级 11软件一 学生姓名 江京翔 学 号 201101080002 指导教师 陈凤萍 日 期 2012.12.242012.1.11 成 绩 课程设计任务书院系： 软件学院 专业： 软件技术 班级： 11软1 学号： 201101080036 一、课程设计时间2012年12月24日至2013年1月11日，共计3周。二、课程设计内容使用html+javascript+css 完成以下任务：1、能够熟练使用css结合html实现网页布局。2、熟练使用文档对象模型和事件驱动，能够很好的实现web表单的交互式操作。3、熟练使用javascrip中的对象，实现网页的动态效果。三、课程设计要求1. 课程设计质量： 贯彻事件驱动的程序设计思想，熟练使用javascript中的对象，实现网页特效。 网页设计布局合理，色彩搭配合理，网页操作方便。 设计过程中充分考虑浏览器兼容等问题，并做适当处理。 代码应适当缩进，并给出必要的注释，以增强程序的可读性。2. 课程设计说明书：课程结束后，上交课程设计报告书和相关的网页。课程设计报告书的格式和内容参见提供的模板。四、指导教师和学生签字指导教师： 学生签名： 江京翔 五、教师评语：基于javascript的电子商务网站开发摘要JavaScript是开发WEB应用程序不可或缺的一种语言，无论是为web页面增加交互性还是创建整个应用程序，如果没有Javascript，今天的web就不是现在这个样子了。JavaScript是具有正式规范的基于标准语言；然而，正如任何一个web开发人员所告诉你的那样，几乎每个web浏览器对这个规范的解释都不同。本网站充分的结合了HTML与CSS的结合充分显示了网站的动态效果，是客户与网站能够充分的结合，进行信息的交换信息不断的进行更新。基于新闻管理网站，国外新闻页面更具有代表性，是网站最标准型之一，通过Javascript脚本的交互式该页面更好与其他的页面相互结合。同时通常页面的下载是按照代码的排列顺序，而表格布局代码的排列代表从上向下，从左到右，无法改变。而通过CSS控制，您可以任意改变代码的排列顺序，比如将重要的右边内容先加载出来。关键字：节假日、日历、Javascript脚本I目录一、前言11.2课程设计目标1二、关键技术12.1HTML相关概念12.2css32.3javascript3三、总体设计43.1网站总体架构43.2网站软件结构43.3网站功能设计5四、详细设计64.1中文日历64.2主要代码6五、课设总结37六、参考文献37一、 前言1.1课程设计思路为网站设计一个中文小日历方便游客查看日期以及节假日，方便游客了解时间，以增强网站人性化设计可以增强时间观念。日期跟附农历日期以及闰年提醒以及传统24节气。可以在网页中显示出当前客户端的日期信息，1.2课程设计目标1.能够熟练使用css结合html，利用代码编写出日历雏形，。2熟练使用javascript和cookie实现日期精准查询，从而提高网页访问速度。3熟练使用javascript中的内建对象最终实现一个中文日历的雏形。二、关键技术2.1HTML相关概念1.HTML语言HTML语言(HypertextMarkupLanguage，中文通常称为超文本置标语言或超文本标记语言)是一种文本类、解释执行的标记语言，它是Internet上用于编写网页的主要语言。用HTML编写的超文本文件称为HTML文件。在WWW上，通常使用的发布语言是HTML，即超文本标识语言。当用浏览器打开网页时，浏览器读取网页中的HTML代码，分析其语法结构，然后根据解释的结果显示网页内容，正是因为如此，制作网页的时候，如果不涉及HTML语言，几乎是不可能的。如图：WWW三个组成部分图2-1WWW的组成2.HTML文件结构 元素出现在文档的开头部分。与之间的内容不会在浏览器的文档窗口显示，但是其间的元素有特殊重要的意义。 元素定义HTML文档的标题。与之间的内容将显示在浏览器窗口的标题栏。 HTML 文件的正文/元素表明是HTML文档的主体部分。在与之间，通常都会有很多其它元素；这些元素和元素属性构成HTML文档的主体部分。 元素：是HTML语言的基本部分。元素总是成对出现，每一对元素一般都有一个开始的标记（如），也有一个结束的标记（如）。元素的标记要用一对尖括号括起来，并且结束的标记总是在开始的标记前加一个斜杠。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)使用 标签将语句嵌入文档（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网站功能设计在本网站中包括动态切换广告条、浮动广告、中文小日历、电子时钟、数学计算器、购物车、树形结构菜单、用户注册等，并进行一定的美化和整理，基本完成商务网站的雏形结构。显示的样式要求如下： 图 33商务网站样式1.广告推荐：一般有动态切换广告条、浮动图片和文字滚动等几种方式，通过动态样式表甚至可以让图片的切换获得多达20多种转场效果。2商品浏览：一般用HTML表格显示商品的图片、价格、规格等信息，大部分网站都采用数据库和动态脚本语言来自动生成商品的列表。3电子购物车：电子购物车一般有两种方式来实现，一种是在服务器端存储每个用户的每一次电子购物操作，还有一种是采用客户端cookie来实现电子购物车，cookie是网站存储在客户端的少量数据，可以让网站的不同网页之间共享相同的变量。4用户注册功能：创建用户注册程序，需要输入的信息包括注册用户名、口令、姓名、出生年月日、身份证号码、住址、邮编。重点体现在格式验证通过客户端，无须将数据提交到服务器端，从而提高了程序的效率，也可以避免程序提交数据的过程中重复输入的过程。5.电子时钟设置：通过JavaScript模仿液晶显示板的形式创建一个电子时钟，要求按照12小时制进行时间显示，如果是上午则显示AM，如果是下午则显示PM。6.中文日历：编写一个中文小日历程序，可以在网页中显示出当前客户端的日期信息，同时也可以显示出本月其他日期的星期。必须采用中文星期表示来显示星期，如果是闰年则必须在年份的旁边注明。7.树形结构菜单：创建一个树形菜单，要求可以展开多级分类菜单，在包含内容的文件夹前显示加号图片，在展开后则显示减号图片，对于不包含内容的叶节点则用叶节点图片来表示。二、 详细设计在整个网站设计主要负责设计中文小日历4.1中文日历 4.2主要代码首先编写cookie的写入程序和读取程序。购物车物品信息主要包括两个属性,物品名称，物品价格，在这里不考虑物品的数量，每次将物品放入购物车就在cookie中添加一条信息，在购物车中可以存放多种物品，而且每种物品可能购买多个，所以每次将物品放入时必须用一个唯一的名称来定义cookie的名称。在读取cookie信息的时候由于系统会一次性把所有可以访问的cookie读出来，所以如果需要只读取指定名称的cookie值需要通过定位截取指定名称cookie的值。 本地计算机时间 0x8; i=1) sum += (lunarInfoy-1900 & i)? 1: 0 return(sum+leapDays(y)/= 传回农历 y年闰月的天数function leapDays(y) if(leapMonth(y) return(lunarInfoy-1900 & 0x10000)? 30: 29) else return(0)/= 传回农历 y年闰哪个月 1-12 , 没闰传回 0function leapMonth(y) return(lunarInfoy-1900 & 0xf)/= 传回农历 y年m月的总天数function monthDays(y,m) return( (lunarInfoy-1900 & (0x10000m)? 30: 29 )/= 算出农历, 传入日期物件, 传回农历日期物件/ 该物件属性有 .year .month .day .isLeap .yearCyl .dayCyl .monCylfunction Lunar(objDate) var i, leap=0, temp=0 var baseDate = new Date(1900,0,31) var offset = (objDate - baseDate)/86400000 this.dayCyl = offset + 40 this.monCyl = 14 for(i=1900; i0; i+) temp = lYearDays(i) offset -= temp this.monCyl += 12 if(offset0) offset += temp; i-; this.monCyl -= 12 this.year = i this.yearCyl = i-1864 leap = leapMonth(i) /闰哪个月 this.isLeap = false for(i=1; i0; i+) /闰月 if(leap0 & i=(leap+1) & this.isLeap=false) -i; this.isLeap = true; temp = leapDays(this.year); else temp = monthDays(this.year, i); /解除闰月 if(this.isLeap=true & i=(leap+1) this.isLeap = false offset -= temp if(this.isLeap = false) this.monCyl + if(offset=0 & leap0 & i=leap+1) if(this.isLeap) this.isLeap = false; else this.isLeap = true; -i; -this.monCyl; if(offset0) offset += temp; -i; -this.monCyl; this.month = i this.day = offset + 1/=传回国历 y年某m+1月的天数function solarDays(y,m) if(m=1) return(y%4 = 0) & (y%100 != 0) | (y%400 = 0)? 29: 28) else return(solarMonthm)/= 传入 offset 传回干支, 0=甲子function cyclical(num) return(Gannum%10+Zhinum%12)/= 月历属性function calElement(sYear,sMonth,sDay,week,lYear,lMonth,lDay,isLeap,cYear,cMonth,cDay) this.isToday = false; /国历 this.sYear = sYear; this.sMonth = sMonth; this.sDay = sDay; this.week = week; /农历 this.lYear = lYear; this.lMonth = lMonth; this.lDay = lDay; this.isLeap = isLeap; /干支 this.cYear = cYear; this.cMonth = cMonth; this.cDay = cDay; this.color = ; this.lunarFestival = ; /农历节日 this.solarFestival = ; /国历节日 this.solarTerms = ; /节气/= 某年的第n个节气为几日(从0小寒起算)function sTerm(y,n) var offDate = new Date( ( 31556925974.7*(y-1900) + sTermInfon*60000 ) + Date.UTC(1900,0,6,2,5) ) return(offDate.getUTCDate()/= 传回月历物件 (y年,m+1月)function calendar(y,m) var sDObj, lDObj, lY, lM, lD=1, lL, lX=0, tmp1, tmp2 var lDPOS = new Array(3) var n = 0 var firstLM = 0 sDObj = new Date(y,m,1) /当月一日日期 this.length = solarDays(y,m) /国历当月天数 this.firstWeek = sDObj.getDay() /国历当月1日星期几 for(var i=0;ilX) sDObj = new Date(y,m,i+1) /当月一日日期 lDObj = new Lunar(sDObj) /农历 lY = lDObj.year /农历年 lM = lDObj.month /农历月 lD = lDObj.day /农历日 lL = lDObj.isLeap /农历是否闰月 lX = lL? leapDays(lY): monthDays(lY,lM) /农历当月最後一天 if(n=0) firstLM = lM lDPOSn+ = i-lD+1 /sYear,sMonth,sDay,week, /lYear,lMonth,lDay,isLeap, /cYear,cMonth,cDay thisi = new calElement(y, m+1, i+1, nStr1(i+this.firstWeek)%7, lY, lM, lD+, lL, cyclical(lDObj.yearCyl) ,cyclical(lDObj.monCyl), cyclical(lDObj.dayCyl+) ) if(i+this.firstWeek)%7=0) thisi.color = red /周日颜色 if(i+this.firstWeek)%14=13) thisi.color = red /周休二日颜色 /节气 tmp1=sTerm(y,m*2 )-1 tmp2=sTerm(y,m*2+1)-1 thistmp1.solarTerms = solarTermm*2 thistmp2.solarTerms = solarTermm*2+1 if(m=3) thistmp1.color = red /清明颜色 /国历节日 for(i in sFtv) if(sFtvi.match(/(d2)(d2)(s*)(.+)$/) if(Number(RegExp.$1)=(m+1) thisNumber(RegExp.$2)-1.solarFestival += RegExp.$4 + if(RegExp.$3=*) thisNumber(RegExp.$2)-1.color = red /月周节日 for(i in wFtv) if(wFtvi.match(/(d2)(d)(d)(s*)(.+)$/) if(Number(RegExp.$1)=(m+1) tmp1=Number(RegExp.$2) tmp2=Number(RegExp.$3) this(this.firstWeektmp2)?7:0) + 7*(tmp1-1) + tmp2 - this.firstWeek.solarFestival += RegExp.$5 + /农历节日 for(i in lFtv) if(lFtvi.match(/(d2)(.2)(s*)(.+)$/) tmp1=Number(RegExp.$1)-firstLM if(tmp1=-11) tmp1=1 if(tmp1 =0 & tmp1= 0 & tmp21874 & SY1908 & SY1911 & SY1949) yDisplay = 共和国 + (SY-1949)=1)?元:SY-1949) / GZ.innerHTML = yDisplay +年 农历 + cyclical(SY-1900+36) + 年 ?【+Animals(SY-4)%12+】; if(SY1949) yDisplay = GZ.innerHTML = yDisplay + 农历 + cyclical(SY-1900+36) + 年 ?【+Animals(SY-4)%12+】; YMBG.innerHTML = ? + SY + ? + monthNameSM; for(i=0;i-1 & sDcld.length) /日期内 sObj.innerHTML = sD+1; if(cldsD.isToday) sObj.className = todyaColor; /今日颜色 sObj.style.color = cldsD.color; /国定假日颜色 if(cldsD.lDay=1) /显示农历月 lObj.innerHTML = +(cldsD.isLeap?闰:) + cldsD.lMonth + 月 + (monthDays(cldsD.lYear,cldsD.lMonth)=29?小:大)+; else /显示农历日 lObj.innerHTML = cDay(cldsD.lDay); s=cldsD.lunarFestival; if(s.length0) /农历节日 if(s.length6) s = s.substr(0, 4)+; s = s.fontcolor(red); else /国历节日 s=cldsD.solarFestival; if(s.length0) size = (s.charCodeAt(0)0 & s.charCodeAt(0)size+2) s = s.substr(0, size)+; s = s.fontcolor(blue); else /廿四节气 s=cldsD.solarTerms; if(s.length0) s = s.fontcolor(limegreen); if(s.length0) lObj.innerHTML = s; else /非日期 sObj.innerHTML = ; lObj.innerHTML = ; function changeLong()var y,m,ly,lm,id,im,iy,yangy,yangm,deltm,miny,tt;CLD.SY.selectedIndex=CLD.D1.selectedIndex;CLD.SM.selectedIndex=CLD.D2.selectedIndex;yangm=0;yangy=0;tt=true;while (tt)yangm=0;yangy=0;changeCld(); for(i=0;i-1 & sDcld.length) /日期内 if (cldsD.lMonth=CLD.D2.selectedIndex+1)&(cldsD.lYear=CLD.D1.selectedIndex+1900) yangy=CLD.SY.selectedIndex+1900; yangm=CLD.SM.selectedIndex ;tt=false;break; if (!tt) break;pushBtm(MD);changeCld();/alert(CLD.SY.selectedIndex+ +CLD.SM.selectedIndex); for(i=0;i-1 & sD0) CLD.SY.selectedIndex