利用jQery 实现一个时间数据来源于客户端的时钟
思路：导入jquery包，当触发事件，就会执行自定义的show time()，获取当前时间，年月日时分秒。
如图：
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="2-5.aspx.cs" Inherits="_2_5" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>利用jQuery实现一个时间数据来源于客户端的时钟</title>
<script src="Scripts/jquery-3.7.0.min.js"></script>
<script>
function showTime() {
var time = new Date(); /*获取当前时间 年月日时分秒*/
var y = time.getFullYear();
var mon = time.getMonth() + 1; //0-11
var d = time.getDate();
var h = time.getHours();
var m = time.getMinutes();
var s = time.getSeconds();
/*向div中插入内容 年月日时分秒 val()只能用在表单中*/
$("#myTime").html(y + "年" + mon + "月" + d + "日 " + h + ":" + m + ":" + s);
}
//页面加载事件
$(function () {
//定时器
var clock1 = window.setInterval("showTime()", 1000);
$("#btn1").click(function () {
window.clearInterval(clock1);
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div style="background-color: #CCFFFF">
<h1 style="color: #FF6666; background-color: #CCFFFF;"> 欢迎来到我的网站</h1>
<h3 style="color: #339933">网站导航 ：<br /></h3>
<asp:TreeView ID="TreeView1" runat="server" DataSourceID="SiteMapDataSource1" ForeColor="#CC0000"></asp:TreeView>
</div>
<asp:SiteMapDataSource ID="SiteMapDataSource1" runat="server" />
<div id="myTime" > </div>
</form>
</body>
</html>
设计一个asp.net 页面，其中包含textbox和button控件各一个，当TextBox中输入一个成绩，再点击Button控件时在页面输出相应的等级信息。
思路：，添加一个按钮点击事件OnClick="Button1_Click"，根据textbox中输入的信息决定label.text，其中按score>=90划分为A，score>=80且score<90划分为B，其他划分为C，
aspx:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="3-3score .aspx.cs" Inherits="_3_3" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div style="background-color: #CCFFFF">
<h1 style="color: #FF6666; background-color: #CCFFFF;"> 欢迎来到我的网站</h1>
<h3 style="color: #339966; background-color: #CCFFFF;">网站导航 ：<br /></h3>
<asp:TreeView ID="TreeView1" runat="server" DataSourceID="SiteMapDataSource1" ForeColor="#CC0000"></asp:TreeView>
<asp:SiteMapDataSource ID="SiteMapDataSource1" runat="server" />
</div>
<div>
<asp:TextBox ID="TextBox1" runat="server" ></asp:TextBox>
<asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
<asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click" />
</div>
</form>
</body>
</html>
aspx.cs:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
public partial class _3_3 : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
protected void Button1_Click(object sender, EventArgs e)
{
int score = 0;
score = int.Parse(TextBox1.Text);
if (TextBox1.Text != null)
{
if (score >= 90)
{
Label1.Text= "输入的成绩等级为A";
}
else if (score >= 80)
{
Label1.Text = "输入的成绩等级为B";
}
else
{
Label1.Text = "输入的成绩等级为C";
}
}
}
}动态生成一组控件，内含一个文本框和一个按钮，当单击按钮时输出文本框中输入的信息。
思路：添加一个textbox控件来接收输入的信息，添加一个button控件并设置onclik事件，点击按钮用response.write()输出textbox.text的信息。
aspx:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="4-4.aspx.cs" Inherits="_4_4" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div style="background-color: #CCFFFF">
<h1 style="color: #FF6666; background-color: #CCFFFF;"> 欢迎来到我的网站</h1>
<h3 style="color: #339966; background-color: #CCFFFF;">网站导航 ：<br /></h3>
<asp:TreeView ID="TreeView1" runat="server" DataSourceID="SiteMapDataSource1" ForeColor="#CC0000"></asp:TreeView>
<asp:SiteMapDataSource ID="SiteMapDataSource1" runat="server" />
</div>
<div>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click" />
</div>
</form>
</body>
</html>
aspx.cs:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
public partial class _4_4 : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
protected void Button1_Click(object sender, EventArgs e)
{
if (TextBox1.Text != null)
{
Response.Write(TextBox1.Text);
}
}
}利用Panel控件建立用户注册页面，包括注册界面包括用户名、密码、姓名、性别、出生日期、电话、邮箱、兴趣爱好等。
思路：用三个panel来实现,第一个panel1的功能是输入用户名和密码，用相应的textbox接收相应的文本信息，第二个panel2的功能是输入用户的基本信息，如姓名、性别、出生日期、电话、邮箱、兴趣爱好等，并用相应的textbox接收相应的文本信息。其次点击注册button，第三个panel3的功能是再现注册信息，利用label获取并显示panel1,panel2的textboxd接收的信息。三个panel之间用panel.visible的属性设置跳转效果，如Panel2.Visible = true;Panel1.Visible = false;Panel3.Visible = false;就可以实现panel可见，其他panel不可见。
aspx:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="4-5.aspx.cs" Inherits="_4_5" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div style="background-color: #CCFFFF">
<h1 style="color: #FF6666; background-color: #CCFFFF;"> 欢迎来到我的网站</h1>
<h3 style="color: #339933; background-color: #CCFFFF;">网站导航 ：<br /></h3>
<asp:TreeView ID="TreeView1" runat="server" DataSourceID="SiteMapDataSource1" ForeColor="#CC0000"></asp:TreeView>
<asp:SiteMapDataSource ID="SiteMapDataSource1" runat="server" />
</div>
<div>
<asp:Panel ID="Panel1" runat="server">
第一步：输入用户名和密码<br />
用户名：<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<br />
密码：
<asp:TextBox ID="TextBox2" runat="server" TextMode="Password"></asp:TextBox>
<br />
<asp:Button ID="Button1" runat="server" Text="下一步" OnClick="Button1_Click" />
</asp:Panel>
<asp:Panel ID="Panel2" runat="server">
第二步，输入用户基本信息<br /> 姓名：
<asp:TextBox ID="TextBox3" runat="server"></asp:TextBox>
<br />
性别：
<asp:TextBox ID="TextBox4" runat="server"></asp:TextBox>
<br />
出生日期：<asp:TextBox ID="TextBox5" runat="server" TextMode="DateTime"></asp:TextBox>
<br />
电话：
<asp:TextBox ID="TextBox6" runat="server"></asp:TextBox>
<br />
邮箱：
<asp:TextBox ID="TextBox7" runat="server" TextMode="Email"></asp:TextBox>
<br />
兴趣爱好：<asp:TextBox ID="TextBox8" runat="server"></asp:TextBox>
<br />
<asp:Button ID="Button2" runat="server" Text="注册" OnClick="Button2_Click" />
</asp:Panel>
<asp:Panel ID="Panel3" runat="server">
<asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
</asp:Panel>
</div>
</form>
</body>
</html>
aspx.cs:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
public partial class _4_5 : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
Panel1.Visible = true;
Panel2.Visible = false;
Panel3.Visible = false;
}
}
protected void Button1_Click(object sender, EventArgs e)
{
Panel2.Visible = true;
Panel1.Visible = false;
Panel3.Visible = false;
}
protected void Button2_Click(object sender, EventArgs e)
{
Panel3.Visible = true;
Panel1.Visible = false;
Panel2.Visible = false;
Label1.Text = "用户名：" + TextBox1.Text + "<br/>姓名：" + TextBox3.Text + "<br/>性别：" + TextBox4.Text + "<br/>出生日期：" + TextBox5.Text + "<br/>电话：" + TextBox6.Text + "<br/>邮箱：" + TextBox7.Text + "<br/>兴趣爱好：" + TextBox8.Text + "<br/>注册成功";
}
}编写一个简易的聊天室，能显示发言人的姓名，发言内容，发言时间。
思路：用response.redict()能实现跳转页面，第一个页面时用户登录页面，把房间密码设置为1111。
登陆页面
aspx:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="6-4-1.aspx.cs" Inherits="_6_4" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div style="background-color: #CCFFFF">
<h1 style="color: #FF6666; background-color: #CCFFFF;"> 欢迎来到我的网站</h1>
<h3 style="color: #339933; background-color: #CCFFFF;">网站导航 ：<br /></h3>
<asp:TreeView ID="TreeView1" runat="server" DataSourceID="SiteMapDataSource1" ForeColor="#CC0000"></asp:TreeView>
<asp:SiteMapDataSource ID="SiteMapDataSource1" runat="server" />
</div>
<div>
<asp:Label ID="username_label" runat="server" Text="用户名：" Width="80px"></asp:Label>
<asp:TextBox ID="username_text" runat="server" ></asp:TextBox>
<br />
<asp:Label ID="password_label" runat="server" Text="房间密码：" Width="80px"></asp:Label>
<asp:TextBox ID="password_text" runat="server"></asp:TextBox>
<br />
<asp:Button ID="login" runat="server" Text="登录" OnClick="login_Clicked"/>
</div>
</form>
</body>
</html>
aspx.cs:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
public partial class _6_4 : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
Session["username"] = username_text.Text;
}
protected void login_Clicked(object sender, EventArgs e)
{
if (password_text.Text.Equals("1111"))
{//设置聊天室密码为1111
if (Application["user"] == null)
{
Application["user"] = "<hr/>";
}
else
{
Application.Lock();
Application["user"] = Session["username"] + "进入聊天室</br>" + Application["user"];
Application.UnLock();
Response.Redirect("6-4-3.aspx");//聊天室
}
}
}
}发言页面
发言人页面用session传递登陆页面的用户名，在发送按钮上绑定onclik事件，将接收文本框内的信息绑定到Application[“chat”]上，并且进行redirect本页面实现刷新文本框内容。
aspx:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="6-4-2.aspx.cs" Inherits="_6_4_2" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div >
<%Response.Write("发言人："+Session["username"]); %>
<br />
<asp:TextBox ID="chatbox" runat="server"></asp:TextBox>
<asp:Button ID="text_send" runat="server" Text="发送" OnClick="text_send_Clicked" />
</div>
</form>
</body>
</html>
aspx.cs:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
public partial class _6_4_2 : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
protected void text_send_Clicked(object sender, EventArgs e)
{
Application.Lock();
Application["chat"] = Application["chat"].ToString() + Session["username"] + ":" + chatbox.Text + "[" + DateTime.Now + "]" + "</br>";
Application.UnLock();
Response.Redirect("6-4-2.aspx");//此处重定向是为了删除文本框中的内容
}
}聊天框页面
聊天室页面主要是打印Application[“chat“]内容，以及显示发言时间，并且利用js代码每2s刷新一次该聊天室页面。
aspx:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="6-4-4.aspx.cs" Inherits="_6_4_4" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<script type="text/javascript">
setTimeout("location.href='6-4-4.aspx'",2000);//刷新时间一秒一次
</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
</div>
</form>
</body>
</html>
aspx.cs:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
public partial class _6_4_4 : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
Response.Write(Application["user"].ToString());//输出用户进入聊天室
if(Application["chat"]==null){//聊天记录，若没有人聊天为空，否则就打印出来聊天内容
Application["chat"]="";
}
else{
Response.Write(Application["chat"].ToString());
}
}
}主页面
aspx:
将聊天框与发言框以面板的形式嵌在主页面上
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="6-4-3.aspx.cs" Inherits="_6_4_3" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<div style="background-color: #CCFFFF">
<h1 style="color: #FF6666; background-color: #CCFFFF;"> 欢迎来到我的网站</h1>
<h3 style="color: #339966; background-color: #CCFFFF;">网站导航 ：<br /></h3>
<asp:TreeView ID="TreeView1" runat="server" DataSourceID="SiteMapDataSource1" ForeColor="#CC0000"></asp:TreeView>
</div>
<asp:SiteMapDataSource ID="SiteMapDataSource1" runat="server" />
<iframe id="iframe1" src="6-4-4.aspx" "></iframe>
<br/>
<iframe id="iframe2" src="6-4-2.aspx" "></iframe>
</div>
</form>
</body>
</html>
设计一个简易的在线考试网站，包括单选题、多选题。单选题有XHTML的知识的题目，如XHTML中换行的元素是（）A.<p> B.<br/> C.<hr/> D.<a>
思路：首先建立两个aspx,第一个是考生登录页面，用application[“username”]传递输入的textbox.text,第二个页面是考试页面，用application[“username”]传递的信息作为欢迎信息用response.write()输出，如：默默考生，欢迎你！接下来就是考试页面，对于单选题，添加一个radiobuttonlist控件作为选项，并在智能标记中编辑添加listitem选择项并打开回传后续要依靠选项是否选中进行阅卷。对于多选题，添加多个radiobutton作为各选项，然后的点击提交按钮，提交按钮绑定了onclik事件帮助阅卷，对于单选题，因为buttonlist只能选择一个选项，符合单选题的原则，所以只要通过radiobutton.list.selectvalue.equals(“正确答案“)的方法就能确定是否答对，若答对会有恭喜信息，若答错会显示正确答案。对于多选题，只要确定正确选项的几个button是否都选中，来支持阅卷。
登录页面：
aspx:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="6-5-login.aspx.cs" Inherits="_6_5" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div style="background-color: #CCFFFF">
<h1 style="color: #FF9966; background-color: #CCFFFF;"> 欢迎来到我的网站</h1>
<h3 style="color: #339966; background-color: #CCFFFF;">网站导航 ：<br /></h3>
<asp:TreeView ID="TreeView1" runat="server" DataSourceID="SiteMapDataSource1" ForeColor="#CC0000"></asp:TreeView>
<asp:SiteMapDataSource ID="SiteMapDataSource1" runat="server" />
</div>
<div>
考生登录：<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<br />
考生密码：<asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
<br />
<asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="登录" />
</div>
</form>
</body>
</html>
aspx.cs:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
public partial class _6_5 : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
Application["username"] = TextBox1.Text;//用Application传递考生姓名
}
protected void Button1_Click(object sender, EventArgs e)
{
Response.Redirect("6-5-test.aspx");
}
}
810
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
