java时间特效设计课设.doc

成 绩 评 定 表学生姓名班级学号专 业电子信息工程课程设计题目基于JavaScript的网页时间特效设计（连连看）评语组长签字：成绩日期 2014 年 月 日课程设计任务书学 院信息学院专 业电子信息工程学生姓名班级学号课程设计题目基于JavaScript的网页时间特效设计（连连看）实践教学要求与任务: 基于JavaScript设计网页，网页可以在IE中运行（设置成允许脚本访问）。实现如下时间特效1.万年历 有了一个电子万年历，就不用翻看日历了，本例是使用JavaScript内置的时间对象，获取相关的值，通过巧妙的页面设计，显示出了一个万年日历。2.JavaScript时钟 通过JavaScript能够创建出时钟效果。本例主要原理是需要构建时钟的布局，以及根据当前时间，动态的改变创建时钟的指针位置。这是一个完全用JavaScript实现的时钟，结合了数学函数来实现精确定位，没有使用任何的图片。工作计划与进度安排: 第19周：布置课程设计任务，查阅资料，分组设计，程序调试。 第20周：程序调试，编写课程设计报告，验收，答辩。指导教师： 2014年 月 日专业负责人： 2014年 月 日学院教学副院长： 2014年 月 日目 录 1 设计目的-42 总体设计-42.1万年历-42.2 JavaScript时钟-42.3连连看-53 关键技术-54 程序流程-6 4.1万年历 -7 4.2 数字时钟-8 4.3 连连看-85 主要源代码-9 5.1 万年历-9 5.2 数字时钟-14 6运行结果及结论-19 6.1 万年历-19 6.2 数字时钟-19 63 连连看-207 参考文献-211 设计目的网页时间设计是伴随着互联网的产生而形成的新课题，是对网页的构成元素进行艺术规划的创造性思维活动，必然成为设计艺术的重要组成部分，并随着网络技术的发展而发展。表面上看，它不过是关于网页版式编排的技巧与方法，而实际上，它不仅是一种技能，更是艺术与技术的高度统一。设计时间中包含着主观和客观两方面的因素。在确立了网页主题之后，首先要明确和熟悉设计的对象和构成的要素。网页艺术设计涉及的具体内容很多，可以概括为视听元素和版式设计两个方面。视听元素，主要包括：文本、背景、按钮、图标、图像、表格、颜色、导航工具、背景音乐、动态影像等。网页的版式设计在网页的艺术设计中占据着重要的地位。所谓网页的版式设计，是在有限的屏幕空间上将视听多媒体元素进行有机的排列组合，将理性思维个性化的表现出来，是一种具有个人风格和艺术特色的视听传达方式。视觉设计表达的是一定的意图和要求，有明确的主题。那么就要求视觉设计不但要单纯、简练、清晰和精确，而且在强调艺术性的同时，更应该注重通过独特的风格和强烈的视觉冲击力，来鲜明地突出设计主题。网页是传播信息的载体，设计时强调其整体性，可以使浏览者更快捷、更准确、更全面地认识它、掌握它，并给人一种内部有机联系、外部和谐完整的美感。总而言之运用网页时间设计可以方便用户查找时间，了解历史元年，使用户了解的时间更精确，同时也使网页更为美观，视觉效果更强。2总体设计2.1万年历编写函数获取当前时间，通过IE浏览器调用函数，通过setInterval方法实现函数的调用，通过div class来启动主函数2.2 JavaScript时钟：today( )通过date( )对象的getYear( )、getMonth( )、getDate( )获得系统的年月日。最初使setTod函数显示当前的系统日期和相应的日历，对于2000年以前，年份是用两位数表示的，因此要让其加上1900。 功能函数中有很多校验函数，用来对日期进行判断。isLeapYear (Year)是用来判年份是否为闰年，来确认月的天数。isFourDigitYear(year)用来保证年份的长度为四位此便需要加入这个函数防止混乱。每个月所包含的天数，是通过getDaysInMonth(month,year)函数来进行相应的存储，特别注意了闰年的2月有29天。selectDate( )是万年历的基础功能，相对来讲实现起来也较为容易，只需获取用户通过下拉菜单和文本输入的年月并用日历输出函数输出该年该月的日历即可。底下的五个按钮，除今天是用setToday( )实现外，其余四个是用setPreviousYear( )等四个函数实现的，具体的做法就是在之前的年份月份上面加一减一，再通过displayCalendar(month,year)显示日历，只是对于一月和十二月要特别注意。2.3连连看前期工作是制定规则和设计算法，这一阶段主要任务是搜集相关资料，然后根据搜集到的资料结合自己所学知识制定系统实现算法；中期工作是算法实现和调试系统，这一阶段主要任务是完成算法的实现，然后进行调试和优化系统；后期工作是对数据结果进行分析，然后完成课程设计报告。本游戏主要细分为以下几大模块： （1）游戏主界面 以Microsoft Visual Studio 2010为开发平台设计主界面，主要控件有1个主窗体Form、1个groupbox、1个progressbar、4个button、7个label。 （2）随机排列小方块 （3）鼠标事件 （4）小方块消除判断 （5）游戏难度设置 本游戏没有用户自定义游戏难度选择，而是使用默认的图案种类数是 20种，每种图案的重复数是4对，所以游戏的灵活性较差。 （6）游戏重列 对本局游戏中剩下的小方块重新排列，计时器不会暂停。此模块的主要作用就是在用户自身不能找到能够消掉的小方块的情况下，通过重列剩下的小方块来产生新的路径，使游戏能够继续玩下去。 （7）暂停/重新开始 点击“暂停”按钮能够使当前正在运行的游戏暂时停止，主要是使让时间停止，不再倒计时；游戏暂停时鼠标不能对游戏操作区域进行操作，此时“暂停”按钮变成“重新开始”按钮，用户只要点击“重新开始”按钮即可继续游戏操作。 （8）游戏胜利（游戏结束，需要重新开始游戏） （9）游戏失败（游戏结束，需要重新开始游戏） 图2.3 连连看功能模块图3 关键技术图像模块：图像处理程序运行后，用户直接由年初的时间菜单命令，开始进入时间查找，在此模块中尝试绘制在资源文件中的图片处理，然后装入在节目中的游戏场景是通过DrawMap（）方法。主要是使用API函数的BitBlt，他的主要功能是将一个内存块的数据被转移到另一个内存块，以前的内存块被称为“源”，一个内存块被称为“目标”的形象后，应用程序开发人员使用Blit的功能在一个页面上，内存改造后，一些被转移到另一个页面的位图关键技术就是实现程序必须执行的部分，我觉得实现此程序的关键技术是HTML的应用，关键技术原理如下：3.1 HTML概念：HTML（HyperTextMarkupLanguage超文本标识语言）是一种用来制作超文本文档的简单标记语言用HTML编写的超文本文件称为HTM文件，也称Web文件3.2 HTML文件结构： -元素出现在文档的开头部分。与之间的内容不会在浏览器都额浏览窗口显示，但是期间的元素有特别重要的意义元素定义HTML文档的标题。与 之间的内容将显示在浏览器窗口的标题栏。 HTML 文件的正文/元素表明是HTML文档的主体部分。在与之间，通常都会有很多其它元素；这些元素和元素属性构成HTML文档的主体部分。 3.3 元素：是HTML语言的基本部分。元素总是成对出现，每一对元素一般都有一个开始的标记，也有一个结束的标记（如）。元素的标记要用一对尖括号括起来，并且结束的标记总是在开始的标记前加一个斜杠。3.4 HTML元素属性: HTML元素可以有自己的相关属性，每一个属性还可以由我们网页编制者赋一定的值。元素属性出现在元素的内，并且和元素名之间有一个空格分隔；属性值用“”引起来。3.5 将JavaScript嵌入网页中： JavaScript代码可直接嵌入HTML文件中，随网页一起传送到客户端浏览器，然后 通过浏览器来解释执行JavaScript 语句插入HTML的方式：使用 标签将语句嵌入文档将JavaScript 源文件(.js)链接到HTML 文档中. avaScript 语句插HTML的位置：body部分的Jhead部分的JS：当脚本被调用、事件被触发时执行，可保证在调用函数前， 脚本已载入4 程序流程4.1万年历 图4.1 4.2 数字时钟 图 4.24.3连连看应用程序叙述： 图4.3 此程序设计是一个小游戏（连连看）的实现，主要运用了用户图形界面，程序接口和基本函数绘制来实现，事件监听（包括鼠标事件，键盘事件，响应时间）也是这个程序的特色。加入复选框，按钮，标签等来实现本游戏用户界面布局。本游戏在用户界面的可操作性、戏的美观度、计分结果方便都基本完善，有一定的可玩性 .5 主要源代码 5.1万年历又一款很不错的万年历查询BODY FONT-SIZE: 14px; SCROLLBAR-HIGHLIGHT-COLOR: buttonface; SCROLLBAR-SHADOW-COLOR: buttonface; COLOR: #333333; SCROLLBAR-3DLIGHT-COLOR: buttonhighlight; SCROLLBAR-TRACK-COLOR: #eeeeee; FONT-FAMILY: Times New Roman, 宋体; SCROLLBAR-DARKSHADOW-COLOR: buttonshadowTD FONT-SIZE: 14px; COLOR: #333333.input1 BORDER-RIGHT: #cccccc 1px solid; PADDING-RIGHT: 1px; BORDER-TOP: #cccccc 1px solid; PADDING-LEFT: 1px; FONT-SIZE: 12px; PADDING-BOTTOM: 1px; BORDER-LEFT: #cccccc 1px solid; CURSOR: text; COLOR: #333333; PADDING-TOP: 1px; BORDER-BOTTOM: #cccccc 1px solid; FONT-FAMILY: Times New Roman, 宋体; HEIGHT: 24px!-var Gan=new Array(甲,乙,丙,丁,戊,己,庚,辛,壬,癸);var Zhi=new Array(子,丑,寅,卯,辰,巳,午,未,申,酉,戌,亥);var Animals=new Array(鼠,牛,虎,兔,龙,蛇,马,羊,猴,鸡,狗,猪);var solarTerm = new Array(小寒,大寒,立春,雨水,惊蛰,春分,清明,谷雨,立夏,小满,芒种,夏至,小暑,大暑,立秋,处暑,白露,秋分,寒露,霜降,立冬,小雪,大雪,冬至)var sTermInfo = new Array(0,21208,42467,63836,85337,107014,128867,150921,173149,195551,218072,240693,263343,285989,308563,331033,353350,375494,397447,419210,440795,462224,483532,504758)var nStr1 = new Array(日,一,二,三,四,五,六,七,八,九,十)var nStr2 = new Array(初,十,廿,卅,)/var monthName = new Array(JAN,FEB,MAR,APR,MAY,JUN,JUL,AUG,SEP,OCT,NOV,DEC);var monthName = new Array(1,2,3,4,5,6,7,8,9,10,11,12);function sTerm(y,n) var offDate = new Date( ( 31556925974.7*(y-1900) + sTermInfon*60000 ) + Date.UTC(1900,0,6,2,5) ) return(offDate.getUTCDate() /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+) ) + cldd.sYear+年 +cldd.sMonth+月 +cldd.sDay+日星期+cldd.week+ 农历+(cldd.isLeap?闰 : )+cldd.lMonth+月 +cldd.lDay+日+ +cldd.cYear+年 +cldd.cMonth+月 +cldd.cDay + 日+ + festival +; document.alldetail.innerHTML = s; if (snow = 0) dStyle.left = x+offsetx-(width/2); dStyle.top = y+offsety; dStyle.visibility = visible; snow = 1; /清除详细日期资料function mOut() if ( cnt = 1 ) sw = 0 if ( sw = 0 ) snow = 0;dStyle.visibility=hidden;else cnt+; 万年历查询 公历： !-for(i=1900;i2050;i+) document.write(+i) /- 年 !- for(i=1;i13;i+) document.write(+i) /- 月阴历： !- for(i=1900;i2050;i+) document.write(+i) /- 年 !-for(i=1;i13;i+) document.write(+i) /- 月返回当前月份 当前时间： 9 3 4 8 日 一 二 三 四 五 六 !- var gNum for(i=0;i6;i+) document.write() for(j=0;j7;j+) gNum = i*7+j document.write( ) document.write() /- 5.2 JavaScript时钟 CSS3数字时钟 DEMObody background:#202020; font:bold 12px Arial, Helvetica, sans-serif; margin:0; padding:0; min-width:960px; color:#bbbbbb; a text-decoration:none; color:#00c6ff;h1 font: 4em normal Arial, Helvetica, sans-serif;padding: 20px;margin: 0;text-align:center;h1 smallfont: 0.2em normal Arial, Helvetica, sans-serif;text-transform:uppercase; letter-spacing: 0.2em; line-height: 5em;display: block;h2 font-weight:700; color:#bbb; font-size:20px;h2, p margin-bottom:10px;font-face font-family: BebasNeueRegular; src: url(BebasNeue-webfont.eot); src: url(BebasNeue-webfont.eot?#iefix) format(embedded-opentype), url(BebasNeue-webfont.woff) format(woff), url(BebasNeue-webfont.ttf) format(truetype), url(BebasNeue-webfont.svg#BebasNeueRegular) format(svg); font-weight: normal; font-style: normal;.container width: 960px; margin: 0 auto; overflow: hidden;.lock width:800px; margin:0 auto; padding:30px; border:1px solid #333; color:#fff; #Date font-family:BebasNeueRegular, Arial, Helvetica, sans-serif; font-size:36px; text-align:center; text-shadow:0 0 5px #00c6ff; ul width:800px; margin:0 auto; padding:0px; list-style:none; text-align:center; ul li display:inline; font-size:10em; text-align:center; font-family:BebasNeueRegular, Arial, Helvetica, sans-serif; text-shadow:0 0 5px #00c6ff; #point position:relative; -moz-animation:mymove 1s ease infinite; -webkit-animation:mymove 1s ease infinite; padding-left:10px; padding-right:10px; -webkit-keyframes mymove 0% opacity:1.0; text-shadow:0 0 20px #00c6ff;50% opacity:0; text-shadow:none; 100% opacity:1.0; text-shadow:0 0 20px #00c6ff; -moz-keyframes mymove 0% opacity:1.0; text-shadow:0 0 20px #00c6ff;50% opacity:0; text-shadow:none; 100% opacity:1.0; text-shadow:0 0 20px #00c6ff; $(document).ready(function() / Create two variable with the names of the months and days in an arrayvar monthNames = January, February, March, April, May, June, July, August, September, October, November, December ; var dayNames= Sunday,Monday,Tuesday,Wednesday,Thursday,Friday,Saturday/ Create a newDate() objectvar newDate = new Date();/ Extract the current date from Date objectnewDate.setDate(newDate.getDate();/ Output the day, date, month and year $(#Date).html(dayNamesnewDate.getDay() + + newDate.getDate() + + monthNamesnewDate.getMonth() + + newDate.getFullYear();setInterval( function() / Create a newDate() object and extract the hours of the current time on the visitorsvar hours = new Date().getHours();/ Add a leading zero to the hours value$(#hour