我的web2.0作品：畅想网络应用系统（采用JavaScript、Jquery、Ajax 等制作，完成时间10天）
1、进入主界面：
2、双击“畅享聊天室”图标：（以下窗口均可拖动，不作拖动说明。）
定义了一个cookie的值，这个至为空时，弹出提示窗口，按下“确定”键后，弹出一下注册窗口：
（如果登录成功后，此时系统自动进入聊天室， 此时cookie值为用户名，不为空，双击“畅享聊天室”图标也可进入聊天室。）
点击“会员注册”按钮：
进入房间后，系统自动告诉所有人“大家好，我进入房间了！”（所有时间均取为当前最新时间，聊天功能的实现是：<1>往数据库中插入数据：包括当前时间、说话者和聊天信息。<2>制定一个定时器，每100毫秒从数据库中读取最新数据信息）
点击“查看资料”，系统将从数据库中调取个人信息，返回显示在页面上：
3、双击 “畅享音乐”图标实现音乐器功能：（前期自己做了一个附有列表的音乐播放器，调用<object>对象的，不够美观，故采用别人的播放器接口，修改原代码，将音乐放进播放器中）
4、双击“畅享电影”图标：此视频播放器为flash视频播放器，调用<object>对象，是自己制作出来的，利用<iframe></iframe>框架实现，点击列表中电影名称则动态生成视频播放器，级通过给播放器赋一个电影名称的值，动态生成播放器。
View Code
1 下面列举出部分源代码：
2 应用到的Jquery：
3 <link href="css/start/jquery-ui-1.8.9.custom.css" rel="stylesheet" type="text/css"/>
4 <link href="css/start/jquery-ui-1.8.9.custom.css" rel="stylesheet" type="text/css"/>
5 <script src="js/jquery-1.5.1.js" type="text/javascript"></script>
6 （1）//Ajax技术获取登录的用户的详细信息
7 function getuserdetail() {
8 $.post("getUserDetail.ashx", { "username": $.cookie("login_cookie"), "userpwd": $.cookie("login_cookiepwd") }, function (returnData, status) {
9
10 if (status == "success") {
11 var UserData = $.parseJSON(returnData);
12 var li = $("<li><font size='1px'>姓名：" + UserData[0].UserName + "<br/>性别：" + UserData[0].UserSex + "<br/>出生日期：" + UserData[0].UserBirthday + "<br/>QQ号码：+ UserData[0].UserQQ + "<br/>电子邮箱：" + UserData[0].UserEmail + "</font></li>");
13 $("#userDetailUL").append(li);
14 }
15 else {
16 alert("网络连接错误！");
17 }
18 });
19 }
20 //结束
21 （2）
22 //获取数据库聊天信息
23 function getmsg() {
24 $.post("getMsg.ashx", function (returnData, status) {
25 $("#msgBoard").empty();
26 if (status == "success") {
27 var Msgs = $.parseJSON(returnData);
28 for (var i = 0; i < Msgs.length; i++) {
29 var li = $("<div><font size='1px'>" + Msgs[i].sendTime + "<font color='#ff0000'> " + Msgs[i].UserName + "</font> :<br/><br/></font> " + Msgs[i].Msg + "</div></br>");
30 $("#msgBoard").append(li);
31
32 }
33 } else {
34 alert("网络连接错误！");
35 }
36 });
37 }
38
39 //结束
40 （3）//页面加载时图片#imgloading显示
41 document.onreadystatechange = function () {
42 if (document.readyState == "complete") {
43 $("#imgloading").hide("slow");
44 }
45 }; //结束
46
47 $(function () {
48 //实现鼠º标经过元素时元素变大，鼠标离开时还原-
49 $("#menubar img").mouseover(
50 function () {
51 $(this).animate({ width: "110px", height: "110px" });
52 }
53 ).mouseout(function () {
54 $(this).animate({ width: "100px", height: "100px" });
55 }); //结束
56 //实现双击#imglogin图片时弹出对话框
57 $("#imglogin").dblclick(function () {
58 $("#login").dialog({ width: "400px" });
59
60 }); //结束
61 （4）//用Ajax技术实现登陆功能
62 $("#loginBtn").click(function () {
63 username = $("#username").val();
64 pwd = $("#pwd").val();
65 $.post("login.ashx", { "username": username, "userpwd": pwd }, function (returnData, status) {
66 if (status == "success") {
67 if (returnData == "success") {
68 $("#chating").dialog({ width: "700px" });
69
70 //给cookie赋值
71 $.cookie("login_cooke", null);
72
73 $.cookie("login_cookie", username);
74 $.cookie("login_cookie_toanother", "ture"); //实现两个窗口登录时的cookie
75 $.cookie("login_cookiepwd", pwd);
76 cookie_username = $.cookie("login_cookie");
77 cookie_pwd = $.cookie("login_cookiepwd");
78 //结束
79 //设置获取聊天信息的定时器
80 setInterval("getmsg()", 200);
81 //结束
82 （5）
83 //Ajax技术实现注册对话框与功能
84 $("#registerBt").click(function () {
85 $("#register").dialog({ width: "400px" });
86 $("#login").dialog("destroy");
87
88 });
89
90 $("#subRegisterBt").click(function () {
91 $("#register").dialog("destroy");
92 var regUsername = $("#regUsername").val();
93 var regUserpwd = $("#regUserpwd").val();
94 var regUserpwdConfirm = $("#regUserpwdConfirm").val();
95 var regUserSex = $("#regUserSex").val();
96 var regUserBirthday = $("#regUserBirthday").val();
97 var regUserQQ = $("#regUserQQ").val();
98 var regUserEmail = $("#regUserEmail").val();
99 if (regUserpwd == regUserpwdConfirm) {
100
101 $.post("register.ashx", { "regUsername": regUsername, "regUserpwd": regUserpwd, "regUserSex": regUserSex, "regUserBirthday": regUserBirthday, "regUserQQ": regUserQQ, "regUserEmail": regUserEmail },
102 function (returnData, status) {
103 if (status == "success")
104 if (confirm(returnData))
105 $("#login").dialog({ width: "400px" });
106 else;
107 else
108 alert("网络连接错误！");
109
110 });
111 }
112 else {
113 alert("两次输入密码不一致！请重新输入！");
114 $("#register").dialog({ width: "400px" });
115 }
116 });
117 //结束
118 //Ajax技术实现发送信息功能
119 $("#sendMsgBt").click(function () {
120 var msg = $("#sendMsgValue").val();
121 var username = $("#username").val();
122 $.post("sendMsg.ashx", { "sendMsgValue": msg, "timenow": timenow, "username": username }, function (returnData, status) {
123 if (status == "success") {
124 document.getElementById("sendMsgValue").value = "";
125
126 //实现鼠标点进发送框时，信息栏自动显示最下面的内容
127 var p = $("#msgBoard").scrollTop();
128 $("#msgBoard").scrollTop(p + 9999999);
129 //结束
130 }
131 else {
132 alert("网络连接错误！");
133 }
134 });
135
136 });
137 //结束
138 （5）视频播放器<iframe></iframe>所包含的文件的内容：
139
140 <div id="movieDiv"></div>
141 <script type="text/javascript">
142 function movieclick(moviename)
143 {
144 var MovieName = moviename;
145 document.write("<div id='moviecontent' style='top:-17px;left:-40px;position:absolute;'><ul>");
146 AC_FL_RunContent( 'width','533','height','400','src','FLVPlayer_Progressive','flashvars','&MM_ComponentVersion=1&skinName=Clear_Skin_3&streamName=flv/'+MovieName+'&autoPlay=false&autoRewind=false','quality','high','name','FLVPlayer','salign','lt','movie','FLVPlayer_Progressive' );
147
148 document.write("</ul><ul style='position:absolute;left:535px;top:0px;'><li style='width:140px;'><font color='#ff0000'><center><b>播放列表</b></center></font></li>");
149 document.write("<input type='button' style='width:140px;' onclick=movieclick('mayunchenggongshi') value='《马云成功之路》'/><br/>");
150 document.write("<input type='button' style='width:140px;' onclick=movieclick('yingzaizhongguo') value='《赢在中国》'/><br/>");
151 document.write("<input type='button' style='width:140px;' onclick=movieclick('xingainianyingyu3') value='《新概念英语》'/></ul>");
152 document.write("</div>");
153 }
154 movieclick("yingzaizhongguo");
155 </script>
156 （6）音乐播放器：
157 <playlist version="1" xmlns="http://xspf.org/ns/0/">
158 <title>我的音乐</title>
159 <creator></creator>
160 <link></link>
161 <info></info>
162 <image></image>
163 <trackList>
164 <track>
165 <location>mp3/1.mp3</location>
166 <creator></creator>
167 <album></album>
168 <title>beyond-真的爱你.mp3</title>
169 <annotation></annotation>
170 <duration></duration>
171 <image></image>
172 <info></info>
173 <link></link>
174 </track>
175 </trackList>
176 </playlist>
177 （7）数据库方面的代码这里只放一个login.ashx文件全部的代码，
178 using System;
179 using System.Collections.Generic;
180 using System.Linq;
181 using System.Web;
182 using web.webDataSetTableAdapters;
183 namespace web
184 {
185 public class login : IHttpHandler
186 {
187 public void ProcessRequest(HttpContext context)
188 {
189 context.Response.ContentType = "text/plain";
190 string username=context.Request["username"];
191 string userpwd = context.Request["userpwd"];
192 T_UserTableAdapter adapter=new T_UserTableAdapter();
193 var user = adapter.checkUser(username,userpwd);
194 if (user.Rows.Count == 1)
195 {
196 context.Response.Write("success");
197 }
198 else
199 {
200 context.Response.Write("error");
201 }
202 }
203 public bool IsReusable
204 {
205 get
206 {
207 return false;
208 }
209 }
210 }
211 }
2 应用到的Jquery：
3 <link href="css/start/jquery-ui-1.8.9.custom.css" rel="stylesheet" type="text/css"/>
4 <link href="css/start/jquery-ui-1.8.9.custom.css" rel="stylesheet" type="text/css"/>
5 <script src="js/jquery-1.5.1.js" type="text/javascript"></script>
6 （1）//Ajax技术获取登录的用户的详细信息
7 function getuserdetail() {
8 $.post("getUserDetail.ashx", { "username": $.cookie("login_cookie"), "userpwd": $.cookie("login_cookiepwd") }, function (returnData, status) {
9
10 if (status == "success") {
11 var UserData = $.parseJSON(returnData);
12 var li = $("<li><font size='1px'>姓名：" + UserData[0].UserName + "<br/>性别：" + UserData[0].UserSex + "<br/>出生日期：" + UserData[0].UserBirthday + "<br/>QQ号码：+ UserData[0].UserQQ + "<br/>电子邮箱：" + UserData[0].UserEmail + "</font></li>");
13 $("#userDetailUL").append(li);
14 }
15 else {
16 alert("网络连接错误！");
17 }
18 });
19 }
20 //结束
21 （2）
22 //获取数据库聊天信息
23 function getmsg() {
24 $.post("getMsg.ashx", function (returnData, status) {
25 $("#msgBoard").empty();
26 if (status == "success") {
27 var Msgs = $.parseJSON(returnData);
28 for (var i = 0; i < Msgs.length; i++) {
29 var li = $("<div><font size='1px'>" + Msgs[i].sendTime + "<font color='#ff0000'> " + Msgs[i].UserName + "</font> :<br/><br/></font> " + Msgs[i].Msg + "</div></br>");
30 $("#msgBoard").append(li);
31
32 }
33 } else {
34 alert("网络连接错误！");
35 }
36 });
37 }
38
39 //结束
40 （3）//页面加载时图片#imgloading显示
41 document.onreadystatechange = function () {
42 if (document.readyState == "complete") {
43 $("#imgloading").hide("slow");
44 }
45 }; //结束
46
47 $(function () {
48 //实现鼠º标经过元素时元素变大，鼠标离开时还原-
49 $("#menubar img").mouseover(
50 function () {
51 $(this).animate({ width: "110px", height: "110px" });
52 }
53 ).mouseout(function () {
54 $(this).animate({ width: "100px", height: "100px" });
55 }); //结束
56 //实现双击#imglogin图片时弹出对话框
57 $("#imglogin").dblclick(function () {
58 $("#login").dialog({ width: "400px" });
59
60 }); //结束
61 （4）//用Ajax技术实现登陆功能
62 $("#loginBtn").click(function () {
63 username = $("#username").val();
64 pwd = $("#pwd").val();
65 $.post("login.ashx", { "username": username, "userpwd": pwd }, function (returnData, status) {
66 if (status == "success") {
67 if (returnData == "success") {
68 $("#chating").dialog({ width: "700px" });
69
70 //给cookie赋值
71 $.cookie("login_cooke", null);
72
73 $.cookie("login_cookie", username);
74 $.cookie("login_cookie_toanother", "ture"); //实现两个窗口登录时的cookie
75 $.cookie("login_cookiepwd", pwd);
76 cookie_username = $.cookie("login_cookie");
77 cookie_pwd = $.cookie("login_cookiepwd");
78 //结束
79 //设置获取聊天信息的定时器
80 setInterval("getmsg()", 200);
81 //结束
82 （5）
83 //Ajax技术实现注册对话框与功能
84 $("#registerBt").click(function () {
85 $("#register").dialog({ width: "400px" });
86 $("#login").dialog("destroy");
87
88 });
89
90 $("#subRegisterBt").click(function () {
91 $("#register").dialog("destroy");
92 var regUsername = $("#regUsername").val();
93 var regUserpwd = $("#regUserpwd").val();
94 var regUserpwdConfirm = $("#regUserpwdConfirm").val();
95 var regUserSex = $("#regUserSex").val();
96 var regUserBirthday = $("#regUserBirthday").val();
97 var regUserQQ = $("#regUserQQ").val();
98 var regUserEmail = $("#regUserEmail").val();
99 if (regUserpwd == regUserpwdConfirm) {
100
101 $.post("register.ashx", { "regUsername": regUsername, "regUserpwd": regUserpwd, "regUserSex": regUserSex, "regUserBirthday": regUserBirthday, "regUserQQ": regUserQQ, "regUserEmail": regUserEmail },
102 function (returnData, status) {
103 if (status == "success")
104 if (confirm(returnData))
105 $("#login").dialog({ width: "400px" });
106 else;
107 else
108 alert("网络连接错误！");
109
110 });
111 }
112 else {
113 alert("两次输入密码不一致！请重新输入！");
114 $("#register").dialog({ width: "400px" });
115 }
116 });
117 //结束
118 //Ajax技术实现发送信息功能
119 $("#sendMsgBt").click(function () {
120 var msg = $("#sendMsgValue").val();
121 var username = $("#username").val();
122 $.post("sendMsg.ashx", { "sendMsgValue": msg, "timenow": timenow, "username": username }, function (returnData, status) {
123 if (status == "success") {
124 document.getElementById("sendMsgValue").value = "";
125
126 //实现鼠标点进发送框时，信息栏自动显示最下面的内容
127 var p = $("#msgBoard").scrollTop();
128 $("#msgBoard").scrollTop(p + 9999999);
129 //结束
130 }
131 else {
132 alert("网络连接错误！");
133 }
134 });
135
136 });
137 //结束
138 （5）视频播放器<iframe></iframe>所包含的文件的内容：
139
140 <div id="movieDiv"></div>
141 <script type="text/javascript">
142 function movieclick(moviename)
143 {
144 var MovieName = moviename;
145 document.write("<div id='moviecontent' style='top:-17px;left:-40px;position:absolute;'><ul>");
146 AC_FL_RunContent( 'width','533','height','400','src','FLVPlayer_Progressive','flashvars','&MM_ComponentVersion=1&skinName=Clear_Skin_3&streamName=flv/'+MovieName+'&autoPlay=false&autoRewind=false','quality','high','name','FLVPlayer','salign','lt','movie','FLVPlayer_Progressive' );
147
148 document.write("</ul><ul style='position:absolute;left:535px;top:0px;'><li style='width:140px;'><font color='#ff0000'><center><b>播放列表</b></center></font></li>");
149 document.write("<input type='button' style='width:140px;' onclick=movieclick('mayunchenggongshi') value='《马云成功之路》'/><br/>");
150 document.write("<input type='button' style='width:140px;' onclick=movieclick('yingzaizhongguo') value='《赢在中国》'/><br/>");
151 document.write("<input type='button' style='width:140px;' onclick=movieclick('xingainianyingyu3') value='《新概念英语》'/></ul>");
152 document.write("</div>");
153 }
154 movieclick("yingzaizhongguo");
155 </script>
156 （6）音乐播放器：
157 <playlist version="1" xmlns="http://xspf.org/ns/0/">
158 <title>我的音乐</title>
159 <creator></creator>
160 <link></link>
161 <info></info>
162 <image></image>
163 <trackList>
164 <track>
165 <location>mp3/1.mp3</location>
166 <creator></creator>
167 <album></album>
168 <title>beyond-真的爱你.mp3</title>
169 <annotation></annotation>
170 <duration></duration>
171 <image></image>
172 <info></info>
173 <link></link>
174 </track>
175 </trackList>
176 </playlist>
177 （7）数据库方面的代码这里只放一个login.ashx文件全部的代码，
178 using System;
179 using System.Collections.Generic;
180 using System.Linq;
181 using System.Web;
182 using web.webDataSetTableAdapters;
183 namespace web
184 {
185 public class login : IHttpHandler
186 {
187 public void ProcessRequest(HttpContext context)
188 {
189 context.Response.ContentType = "text/plain";
190 string username=context.Request["username"];
191 string userpwd = context.Request["userpwd"];
192 T_UserTableAdapter adapter=new T_UserTableAdapter();
193 var user = adapter.checkUser(username,userpwd);
194 if (user.Rows.Count == 1)
195 {
196 context.Response.Write("success");
197 }
198 else
199 {
200 context.Response.Write("error");
201 }
202 }
203 public bool IsReusable
204 {
205 get
206 {
207 return false;
208 }
209 }
210 }
211 }
希望大家不吝赐教，对我提出建议，十分感谢！
若需要源代码可直接加我QQ:2500167549，并写明来意，谢谢！
