您的位置：首页 > 理论基础 > 计算机网络

网络计数器如何用图片替代数字

2016-04-14 21:09 681 查看

设计包含一个包含Login.aspx和Welcome.aspx两个页面的网站。要求用户登录界面如下图，输入制定的用户名和密码后才能打开Welcome.aspx页面，此时页面中显示用户名、欢迎信息以及是第几位登录用户，并且用图片替代数字，如下图：

实现方法一：使用image控件来显示图片：

1.Login.aspx页面如下图：

1.Login.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 Login : System.Web.UI.Page
{
protected struct user
{

public String username;
public String passwrd;
}

protected user[] us = new user[2];

protected void Page_Load(object sender, EventArgs e)
{
Application["counter"] = 0;
us[0].username = "mr";
us[0].passwrd = "mrsoft";
us[1].username = "mr2";
us[1].passwrd = "mrsoft2";

}

protected void Button2_Click(object sender, EventArgs e)
{
String username = name.Text;
String passwrd = password.Text;
for(int i = 0;i< 2; i++){
if (username == us[i].username && passwrd == us[i].passwrd)
{
Session["username"] = username;
Response.Redirect("Welcome.aspx");
}
else
{
Response.Write("<Script>alert('密码错误或密码不正确');</Script>");
}
}
}

protected void Button3_Click(object sender, EventArgs e)
{
name.Text = String.Empty;
password.Text = String.Empty;
name.Focus();

}
}

2.Welcome.aspx.cs页面代码如下：（Welcome.aspx页面在相应位置拖入两个img控件）

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

public partial class Welcome : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
Application["count"] = Convert.ToInt32(Application["count"]) + 1;

<span style="font-family: Consolas, 'Courier New', Courier, mono, serif; line-height: 18px;">        </span>int s=Convert.ToInt32(Application["count"]);
switch (p)
{
case 1:
Image1.ImageUrl = "~/picture/1.jpg";
Image2.Visible = false;//隐藏第二张图片
break;
case 2:
Image1.ImageUrl = "~/picture/2.jpg";
Image2.Visible = false;
break;
case 3:
Image1.ImageUrl = "~/picture/3.jpg";
Image2.Visible = false;
break;
case 4:
Image1.ImageUrl = "~/picture/4.jpg";
Image2.Visible = false;
break;
case 5:
Image1.ImageUrl = "~/picture/5.jpg";
Image2.Visible = false;
break;
case 6:
Image1.ImageUrl = "~/picture/6.jpg";
Image2.Visible = false;
break;
case 7:
Image1.ImageUrl = "~/picture/7.jpg";
Image2.Visible = false;
break;
case 8:
Image1.ImageUrl = "~/picture/8.jpg";
Image2.Visible = false;
break;
case 9:
Image1.ImageUrl = "~/picture/9.jpg";
Image2.Visible = false;
break;
case 10:
Image1.ImageUrl = "~/picture/1.jpg";
Image2.ImageUrl = "~/picture/0.jpg";
break;
}
}
}

第一方式其实在真正的开发过程中很少使用，因为不仅太麻烦而且不适用，只能在有限的数量的时候可以用用，若是任意的数字则不能使用这个方法，此时可以使用第二种方法来实现任意数字的显示。

实现方法二：使用纯代码显示显示图片，在后台编写一个显示图片的函数GetCountImg()，在前台调用即可。

Login页面跟第一种一样

Welcome页面前台不需要再拖入控件只需要在相应的位置调用后台的GetCountImg()函数即可：

此时Welcome.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 Welcome : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (Session["username"] == null || Session["username"].ToString() == "")
{
Response.Write("<script language=javascript>alert('您还没有登录,请先登录');window.location = 'Login.aspx';</script>");

}
else
{
Application.Lock();
Application["counter"] = (int)Application["counter"] + 1;
Application.UnLock();
}

}

protected void Button1_Click(object sender, EventArgs e)
{

}

protected void GetCountImg() //显示图片的函数
{
int Number = (int)Application["counter"];
string N = Number.ToString();
string img = "";
for (int i = 0; i < N.Length; i++)
{
img += "<img src='"+"picture/" + N[i] + ".jpg' />";

}
Response.Write(img);
}
}

Welcome.aspx前台代码：

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Welcome.aspx.cs" Inherits="Welcome" %>
<!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>
    <style type="text/css">
        .auto-style1 {
            font-size: x-large;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div style="text-align: center; font-weight: 700; font-family: 微软雅黑">
        <span class="auto-style1">欢迎<%=Session["username"] %>登陆<br />
        您是本网站第<%GetCountImg();%>位登陆的用户！</span><br />   
    </div>
    </form>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航