JavaScript+jQuery 开发框架课程设计题目毕业留言板院（系）专业班级学生姓名学号设计地点指导教师起止时间：2015年6月8日至2015年6月12日目录一、前言1.1 课程设计思路 (3)1.2 课程设计目标 (3)二、关键技术 (3)2.1 HTML相关概念 (3)2.2 CSS (5)2.3 JavaScript (6)三、总体设计 (7)3.1 网站总体布局 (7)四、详细设计 (7)4.1 主要代码 (7)4.2 网页结果显示 (18)五、课设总结 (19)六、参考文献 (20)一、前言光阴似箭，岁月如梭，三年美好而艰辛的大学生活犹如漏斗中的沙石已悄然流进昨日。
此时站在漫漫求学道路终点站的我心潮澎湃，思绪万千，昔日的点点滴滴，林林总总，跃然而起，历历在目。
此时面对着我可爱的同学，面对着美丽的校园，我心中虽有千言万语，却只字难出。
三年改变了我们的容颜和那颗曾经年轻的心，而成长的代价就是我们失去纯真的微笑，而多了一份离别的伤感。
无论我们有多少不舍，都唤不回逝去的四年。
但我们无须失落，我们依然可以一路高歌，让六月的骄阳永远见证我们的无悔青春。
日出日落，月圆月缺，总叫人期待，期待一次惊喜的通话，一封意外的信件，一刻相聚的欢愉，一夕促膝的长谈，一束鲜花的清香……日后，我最爱的同学们啊，我期待的一丝喜悦都来自于你。
让时间老去，让激情回归！愿事业一帆风顺，爱情甜甜美美，请带着我的期冀幸福一生！写不完的句子，但终一句话，我爱你们！1.1 课程设计思路临近毕业，心中不免感慨万千，那么，就在现在，大胆地说出你的想法，你的感动，和身边在人分享，留下你们的记忆。
这次课程设计的目的也是想和同学们一起留下我们当初的记忆，然后用就一生去珍藏、去感受。
1.2 课程设计目标1.能够熟练javascript，通过咨询和考察，最终确定并实现网页布局。
同时使用动态样式表甚至可以让图片的切换获得多种转场效果。
2．熟练使用javascript和css中的内建对象最终实现本次课程设计。
3．熟练使用javascript和html实现用户登记，从而提高网页访问速度。
二、关键技术2.1 HTML相关概念HTML的英文全称是Hypertext Marked Language，中文叫做“超文本标记语言”。
和一般文本的不同的是，一个HTML文件不仅包含文本内容，还包含一些Tag，中文称“标记”。
一个HTML文件的后缀名是.htm或者是.html。
用文本编辑器就可以编写HTML文件。
这就试写一个HTML文件吧！打开你的Notepad，新建一个文件，然后拷贝以下代码到这个新文件，然后将这个文件存成first.html。
<html><head><title>Title of page</title></head><body>This is my first homepage. <b>This text is bold</b></body></html>要浏览这个first.html文件，双击它。
或者打开浏览器，在File菜单选择Open，然后选择这个文件就行了。
示例解释这个文件的第一个Tag是<html>，这个Tag告诉你的浏览器这是HTML文件的头。
文件的最后一个Tag是</html>，表示HTML文件到此结束。
在<head>和</head>之间的内容，是Head信息。
Head信息是不显示出来的，你在浏览器里看不到。
但是这并不表示这些信息没有用处。
比如你可以在Head 信息里加上一些关键词，有助于搜索引擎能够搜索到你的网页。
在<title>和</title>之间的内容，是这个文件的标题。
你可以在浏览器最顶端的标题栏看到这个标题。
在<body>和</body>之间的信息，是正文。
在<b>和</b>之间的文字，用粗体表示。
<b>顾名思义，就是bold的意思。
HTML文件看上去和一般文本类似，但是它比一般文本多了Tag，比如<html>，<b>等，通过这些Tag，可以告诉浏览器如何显示这个文件。
HTML元素(HTML Elements)HTML元素(HTML Element)用来标记文本，表示文本的内容。
比如body, p, title就是HTML元素。
HTML元素用Tag表示，Tag以<开始，以>结束。
Tag通常是成对出现的，比如<body></body>。
起始的叫做Opening Tag，结尾的就叫做Closing Tag。
目前HTML的Tag不区分大小写的。
比如，<HTML>和<html>其实是相同的。
2.2 CSS1、CSS简介CSS[1]是英语Cascading Style Sheets（层叠样式表单）的缩写，它是一种用来表现HTML或 XML等文件样式的计算机语言。
CSS目前最新版本为CSS3，能够真正做到网页表现与内容分离的一种样式设计语言。
相对于传统HTML 的表现而言，CSS能够对网页中的对象的位置排版进行像素级的精确控制，支持几乎所有的字体字号样式，拥有对网页对象盒模型的能力，并能够进行初步交互设计，是目前基于文本展示最优秀的表现设计语言。
CSS能够根据不同使用者的理解能力，简化或者优化写法，针对各类人群，有较强的易读性。
2、CSS文件当要在站点上所有或部份的网页上一致地应用相同样式时，可使用外部样式表。
在一个或多个外部样式表中定义样式，并将它们链接到所有网页，便能确保所有网页外观的一致性。
如果人们决定更改样式，只需在外部样式表中作一次更改，而该更改会反映到所有与该样式表相链接的网页上。
通常外部样式表以 .css做为文件扩展名，例如 Mystyles.css。
2.3 JavaScriptJavascript在网页的用法Javascript加入网页有两种方法：1、直接加入HTML文档这是最常用的方法，大部分含有Javascript的网页都采用这种方法，如：<script language="Javascript"><!--document.writeln("这是Javascript！采用直接插入的方法！");//-Javascript结束--></script>在这个例子中，我们可看到一个新的标签：<script>……</script>，而<script language="Javascript”> 用来告诉浏览器这是用Javascript编写的程序，需要调动相应的解释程序进行解释。
HTML的注释标签<!--和-->：用来去掉浏览器所不能识别的Javascript源代码的，这对不支持 Javascript 语言的浏览器来说是很有用的。
//-Javascript结束：双斜杠表示 Javascript的注释部分，即从//开始到行尾的字符都被忽略。
至于程序中所用到的document．write（）函数则表示将括号中的文字输出到窗口中去，这在后面将会详细介绍。
另外一点需要注意的是，<script>……</script>的位置并不是固定的，可以包含在< head>......</head> 或<body>.....</body>中的任何地方。
2、引用方式如果已经存在一个Javascript源文件（以js为扩展名），则可以采用这种引用的方式，以提高程序代码的利用率。
其基本格式如下：<script src＝url language="Javascript"></script>其中的Url就是程序文件的地址。
同样的，这样的语句可以放在HTML文档头部或主体的任何部分。
如果要实现“直接插入方式”中所举例子的效果，可以首先创建一个Javascript源代码文件“Script.js”，其内容如下：document.writeln("这是Javascript！采用直接插入的方法！");在网页中可以这样调用程序：<script src＝"Script.js" language="Javascript"></script> 。
三、总体设计3.1 网站总体布局本系统的实现采用典型的B/S结构来实现，不同的客户端程序通过IE共同访问WEB服务器的发布页面、WEB服务器访问数据库服务器进行数据存取，系统结构如图3-1.图3.系统结构图四、详细设计4.1 主要代码用Javascript写入程序和读取程序。
注册信息主要包括用户名、设置密码、确认密码、性别、出生日期、身份证号码、联系电话、微信、个人说明。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>注册</title><style type="text/css">input[type = "text"], input[type = "password"] {width: 150px;}table{background-color:pink}</style></head><body><div><div class="login_step"><div align="center"><a href="index.html">世界那么大我想去看看！</a></div></div><center><form name="myform" action="success.html" method="post"onsubmit="return check()" ><table width="50%" height="70%" border="1"cellspacing="0" ><tr><th colspan="2">毕业季！留下你的思念(*必填！)</th></tr><tr><td height="36" align="right">姓名：</td><td><input type="text" name="username" id="username"onBlur="check()" /><span id="usernames"></span> * </td></tr><tr><td height="41" align="right">性别：</td><td><input type="radio" name="sex" value="man" checked />男 <input type="radio" name="sex" value="women"/>女 </td></tr><tr><tr><td height="45" align="right">出生日期：</td><td><select name="year" id="year"><option value="">请选择 </option><option value="1990"selected>1990</option><option value="1991" >1991</option> <option value="1992">1992</option><option value="1993">1993</option><option value="1994">1994</option><option value="1995">1995</option><option value="1996">1996</option><option value="1997">1997</option><option value="1998">1998</option><option value="1999">1999</option><option value="2000">2000</option></select>年<select name="month" id="month"><option value="">请选择 </option> <option value="1" selected>1</option> <option value="2">2</option><option value="3">3</option><option value="4">4</option><option value="5">5</option><option value="6">6</option><option value="7">7</option><option value="8">8</option><option value="9">9</option><option value="10">10</option><option value="11">11</option><option value="12">12</option></select>月<select name="day" id="day"> <option value="">请选择 </option><option value="1" selected>1</option> <option value="2">2</option><option value="3">3</option><option value="4">4</option><option value="5">5</option><option value="6">6</option><option value="7">7</option><option value="8">8</option><option value="9">9</option><option value="10">10</option><option value="11">11</option><option value="12">12</option><option value="13">13</option><option value="14">14</option><option value="15">15</option><option value="16">16</option><option value="17">17</option><option value="18">18</option><option value="19">19</option><option value="20">20</option><option value="21">21</option><option value="22">22</option><option value="23">23</option><option value="24">24</option><option value="25">25</option><option value="26">26</option><option value="27">27</option><option value="28">28</option><option value="29">29</option><option value="30">30</option></select>日<tr><td height="45" align="right">毕业方向：</td><td><select name="speciality" id="speciality"> <option value="">请选择 </option><option value="计算机" selected>计算机</option><option value="网络">网络</option><option value="销售">销售</option><option value="金融">金融</option><option value="建筑">建筑</option><option value="设计">设计</option><option value="才艺">才艺</option><option value="工程">工程</option><option value="翻译">翻译</option></select></font></td></tr><tr><td height="44" align="right">联系电话：</td><td><input type="text" value="" id="phone" onBlur="check()" /> <span id="phones"></span>* </td></tr><tr><td height="39" align="right">微信：</td><td><input type="text" id="微信" value="" onBlur="check()"/> <span id="emails"></span>*</td><tr><td align="right">你想对我说： </td><td><font color="#6600CC"><textarea id="jian"></textarea></font></td></tr><body onload="createCode()"><tr><td colspan="2" align="center"><input type="submit" value="OK" /> <input type="reset" value="NO" /></font></td></tr></table></form></center><script type="text/javaScript">function username(){var username =document.getElementById("username").value; //姓名//姓名的判断var r = /^[A-Za-z]+$/;if(username == ""){document.getElementById("usernames").innerHTML = "<font color='red'>姓名不可以为空</font>";return false;}else if(username !=""){if(username.length<2){document.getElementById("usernames").innerHTML = "<font color='red'>姓名至少2位</font>";return false;}else{document.getElementById("usernames").innerHTML = "<font color='green'>输入正确</font>";return true;}}}function shijizn(){var year = document.getElementById("year").value; //出生年份var month= document.getElementById("month").value;//出生月份var day = document.getElementById("day").value; //出生的日期}function phone(){var phone = document.getElementById("phone").value;//联系电话//正则表达式使用方法var reg= /^\d{11}$/; //if(phone==""){document.getElementById("phones").innerHTML = "<font color='red'>联系电话不能为空</font>";}if(phone !=""){if(!(reg.test(phone))){document.getElementById("phones").innerHTML = "<font color='red'>联系电话不正确</font>";return false;}else {document.getElementById("phones").innerHTML = "<font color='green'>联系电话输入正确</font>";return true;}}}function 微信(){var 微信 = document.getElementById("微信").value;//微信//alert(微信);//微信验证if(微信==""){document.getElementById("微信").innerHTML = "<font color='red'>微信不能为空</font>";}if(微信 !=""){if(!(e.test(微信))){document.getElementById("微信").innerHTML = "<font color='red'>输入不正确</font>";return false;}else{document.getElementById("微信").innerHTML = "<font color='green'>输入正确</font>";return true;}}}function check(){if (username()&&password()&&sfz()&&phone()&&email()) {return true;}else {return false;}}</script></body></html>4.2 网页结果显示图4-2.1 注册个人信息图图4-2.2 注册个人信息图图4-2.3 注册个人信息图五、课设总结本次课程设计已完成，令我感触颇深。