I had nothing to do when I got back from work last night and made a simple wishing wall. It was relatively simple. Don't spray me! Thank you!
Create a database db_wall.mdb and create the table tb_wall.
Database
Enter some data
Below we start to write the code
Write a front-end Default. aspx
<% @ Page Language = "C #" AutoEventWireup = "true" CodeFile = "Default. aspx. cs" Inherits = "_ Default" %>
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.1 // EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head runat = "server">
<Title> wishing walls </title>
<Script language = "JavaScript" src = "js_wallControl.js"> </script>
<Link href = "StyleSheet.css" rel = "stylesheet" type = "text/css"/>
</Head>
<Body>
<Form id = "form1" runat = "server">
<Div style = "background-image: url(Bgw.jpg); width: 1000px; height: 700px; margin-top: 10px;">
<% = AllBlessString %>
</Div>
</Form>
</Body>
</Html>
Background code Default. aspx. cs:
Using System;
Using System. Data;
Using System. Configuration;
Using System. Web;
Using System. Web. Security;
Using System. Web. UI;
Using System. Web. UI. WebControls;
Using System. Web. UI. WebControls. WebParts;
Using System. Web. UI. HtmlControls;
Using System. Data. OleDb;
Using System. Text;
Public partial class _ Default: System. Web. UI. Page
{
// Random generator of wishing wall coordinates
Private Random indexRandom = new Random ();
// Save the output content of the page
Protected string AllBlessString = string. Empty;
Protected void Page_Load (object sender, EventArgs e)
{
If (! Page. IsPostBack)
{
BindPageData ();
}
}
// Obtain the wishing wall Information
Private void BindPageData ()
{
// Link the database, not to mention
OleDbConnection con = new OleDbConnection (@ "Provider = Microsoft. Jet. OLEDB.4.0; Data Source =" + Server. MapPath ("db_wall.mdb "));
Con. Open ();
OleDbDataAdapter dap = new OleDbDataAdapter ("select * from tb_wall", con );
DataSet ds = new DataSet ();
Dap. Fill (ds );
If (ds = null | ds. Tables. Count <= 0 | ds. Tables [0]. Rows. Count <= 0) return;
StringBuilder wall;
StringBuilder allWall = new StringBuilder ();
Int lefIndex;
Int topIndex;
// Create a single wishing message
Foreach (DataRow row in ds. Tables [0]. Rows)
{// Random start position of the generated position
LefIndex = indexRandom. Next (30,750 );
TopIndex = indexRandom. Next (30,420 );
Wall = new StringBuilder ();
// Create a <div> </div> As a wishing Wall
Wall. Append ("<div id = \" divBless "+ row [" ID "]. ToString () +" \ "class = \" BlessPanel \"");
// Add a style
Wall. Append ("style = \" position: absolute ;");
Wall. Append ("left:" + lefIndex + "px ;");
Wall. Append ("top:" + topIndex + "px ;");
Wall. Append ("background-color:" + row ["BackColor"]. ToString () + ";");
Wall. Append ("z-index:" + row ["ID"]. ToString () + ";\"");
// Add a mouse event
Wall. Append ("onmousedown = \" getPanelFocus (this) \ "> ");
// Add a table
Wall. Append ("<table border = \" 0 \ "> ");
Wall. Append ("<td style = \" cursor: move; \ "width = \" 98% \"");
// Add a mouse event
Wall. Append ("onmousedown = Down (divBless" + row ["ID"]. ToString () + ")> ");
Wall. Append ("[" + row ["ID"]. ToString () + "] & nbsp ;");
Wall. append (row ["dreamDate"]. toString () + "& nbsp;" + "</td> <td style = \" cursor: hand ;\"");
Wall. Append ("onclick = \" ssdel () \ "width = \" 2% \ "> × </td> </tr> ");
Wall. append ("<tr> <td style = \" background-image: url (Bg. GIF); height: 100px; padding: 5px; \ "colspan = \" 2 \ "> ");
Wall. Append (row ["dream"]. ToString (). Trim ());
// Add the name www.2cto.com
Wall. append ("<div style = \" padding: 5px; float: right; \ "> [" + row ["dreamName"]. toString () + "] wishes </div> </td> </tr> </table> ");
Wall. Append ("</div> ");
// Append to the output string
AllWall. Append (wall. ToString ());
}
// Add the content of the current DIV wishing wall to the output string
AllBlessString + = allWall. ToString ();
}
}
Css code:
Body
{
Font-family:;
Font-size: 12px ;}
. BlessPanel/* settings */
{
Position: absolute;
Width: 200px;
Height: auto;
Border-top-style: Ridge;
Border-right-style: Ridge;
Border-left-style: Ridge;
Border-bottom-style: Ridge;
Border-width: 1pt ;}
Js Code:
// JScript File
// -- Delete the control layer (delete the wishing wall) -->
Function ssdel ()
{
If (event)
{
LObj = event. srcElement;
While (lObj & lObj. tagName! = "DIV") lObj = lObj. parentElement;
}
Var id = lObj. id
Document. getElementById (id). removeNode (true );
}
// -- Delete control layer -->
// -- Move the control layer (move the wishing wall) -->
Var Obj =''
Var index = 10000; // The value of z-index;
Document. onmouseup = Up;
Document. onmousemove = Move;
Function Down (Object)
{
Obj = Object. id;
Document. all (Obj). setCapture ();
PX = event. x-document. all (Obj). style. pixelLeft;
PY = event. y-document. all (Obj). style. pixelTop;
}
Function Move ()
{
If (Obj! = '')
{
Document. all (Obj). style. left = event. x-pX;
Document. all (Obj). style. top = event. y-pY;
}
}
// -- Move the control layer -->
Function Up ()
{
If (Obj! = '')
{
Document. all (Obj). releaseCapture ();
Obj = '';
}
}
/// Obtain the focus of the control layer (obtain the focus of the wishing wall );
Function getPanelFocus (obj)
{
If (obj. style. zIndex! = Index)
{
Index = index + 2;
Var idx = index;
Obj. style. zIndex = idx;
}
}
The above code is relatively simple, so I will not talk about it here.
Check it out!
Here we only show the wishing tree. I did not write my wish. I will do it later ..
From Ai Zhi Chen
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
