简单许愿树的实现

昨天晚上下班回去没事情干自己做了个简单的许愿墙，比较简单，大神不要喷我谢谢！

首先新建一个数据库db_wall.mdb,然后建立表tb_wall

数据库截图

然后输入些数据

下面我们开始写代码

写个前台的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>许愿墙</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);1000px;height:700px;margin-top:10px;">
           <%= AllBlessString %>
          </div>
    </form>
</body>
</html>

后台代码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 
{
    // 许愿墙坐标的随机生成器
    private Random indexRandom = new Random();
    // 保存页面输出的内容
    protected string AllBlessString = string.Empty;
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!Page.IsPostBack)
        {
            BindPageData();
        }
    }
    //获取许愿墙信息
    private void BindPageData()
    {   
        //链接数据库，不多说
        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;
        //创建单个许愿信息
        foreach (DataRow row in ds.Tables[0].Rows)
        {   //产生位置的随机起始位置
            lefIndex = indexRandom.Next(30, 750);
            topIndex = indexRandom.Next(30, 420);

            wall = new StringBuilder();
            //创建一个<div></div>，用来作为许愿墙
            wall.Append("<div id=\"divBless" + row["ID"].ToString() + "\" class=\"BlessPanel\" ");
            //添加样式
            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() + ";\" ");
            //添加鼠标事件
            wall.Append("onmousedown=\"getPanelFocus(this)\">");
            //添加表格
            wall.Append("<table border=\"0\">");
            wall.Append("<td style=\"cursor:move;\" width=\"98%\" ");
            //添加鼠标事件
            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());
            //添加许愿人姓名
            wall.Append("<div style=\"padding:5px;float:right;\">【" + row["dreamName"].ToString() + "】的愿望</div></td></tr></table>");
            wall.Append("</div>");
            //追加到输出字符串中
            allWall.Append(wall.ToString());
        }
        //将当前DIV许愿墙的内容添加到输出字符串中
        AllBlessString += allWall.ToString();
    }
}

css代码：

body
{
    font-family: 宋体;
    font-size: 12px;}
.BlessPanel        /*设置*/
{
    position:absolute;
    200px;
    height:auto;
    border-top-style:Ridge;
    border-right-style:Ridge;
    border-left-style:Ridge;
    border-bottom-style:Ridge;
    border-1pt;}

js代码：

// JScript 文件
    //-- 控制层删除(删除许愿墙) -->
    function ssdel()
    {
        if(event)
        {
            lObj = event.srcElement;
            while (lObj && lObj.tagName != "DIV") lObj = lObj.parentElement ;
        }
        var id = lObj.id
        document.getElementById(id).removeNode(true);        
    }
    //-- 控制层删除 -->
    
    //-- 控制层移动 （移动许愿墙）-->    
    var Obj=''
    var index=10000;   //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;
        }
    }
    //-- 控制层移动 -->
    function Up()
    {
        if(Obj != '')
        {
            document.all(Obj).releaseCapture();
            Obj='';
        }
    }    
    ///获取控制层焦点（获取许愿墙焦点）;
    function getPanelFocus(obj)
    {
        if(obj.style.zIndex!=index)
        {
            index = index + 2;
            var idx = index;
            obj.style.zIndex=idx;               
        }
    }

以上代码都比较简单，这里就不多说了。

看看效果图吧!

这里只做了许愿树的显示，写愿望没写，以后有时间在做吧。。。