Implementation of simple Wishing Tree

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"> 
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 Page output content protecte D 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 to 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>, used as the wishing wall. append ("<div id = \" divBless "+ row [" ID "]. toString () + "\" class = \ "BlessPanel \" "); // Add the 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 the mouse event wall. append ("onmousedown = \" getPanelFocus (this) \ ">"); // Add Table wall. append ("<table border = \" 0 \ ">"); wall. append ("<td style = \" cursor: move; \ "width = \" 98% \ ""); // Add the mouse event wall. append ("onmousedown = Down (divBless" + row ["ID"]. toString () + ")>"); wall. append ("No. [" + 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 of the wishing owner 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/* Set */{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 // -- control layer deletion (delete 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);} // -- control layer deletion --> // -- control layer Movement (move the wishing wall) --> var Obj = ''var index = 10000; // 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. pixelTo P;} function Move () {if (Obj! = '') {Document. all (Obj ). style. left = event. x-pX; document. all (Obj ). style. top = event. y-pY ;}// -- control layer movement --> function Up () {if (Obj! = '') {Document. all (Obj ). releaseCapture (); Obj = '';}/// obtain the control layer focus (obtain the wishing wall focus); 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...