当前位置： 移动技术网 > IT编程>开发语言>.net > 简单许愿树的实现

简单许愿树的实现

2019年04月19日  | 移动技术网IT编程  | 我要评论

宜都租房,福鼎市邮编,毛线编织花样大全

 昨天晚上下班回去没事情干自己做了个简单的许愿墙，比较简单，大神不要喷我谢谢！
首先新建一个db_wall.mdb,然后建立表tb_wall
数据库截图

然后输入些数据

下面我们开始写代码
写个前台的default.x
 

<%@ page language="c#" autoeventwireup="true" codefile="default.aspx.cs" inherits="_default" %>

<!doctype html public "-//w3c//dtd xhtml 1.1//en" "">
<html xmlns="">
<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">
          <p style="background-image: url(bgw.jpg);width:1000px;height:700px;margin-top:10px;">
           <%= allblessstring %>
          </p>
    </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();
            //创建一个<p></p>，用来作为许愿墙
            wall.append("<p id=\"pbless" + 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(pbless" + 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("<p style=\"padding:5px;float:right;\">【" + row["dreamname"].tostring() + "】的愿望</p></td></tr></table>");
            wall.append("</p>");
            //追加到输出字符串中
            allwall.append(wall.tostring());
        }
        //将当前div许愿墙的内容添加到输出字符串中
        allblessstring += allwall.tostring();
    }
}
 
css代码：
 
body
{
    font-family: 宋体;
    font-size: 12px;}
.blesspanel        /*设置*/
{
    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代码：
 
// 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;              
        }
    }
 
以上代码都比较简单，这里就不多说了。
看看效果图吧!\



 

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

 


摘自 爱智旮旯


 


您可能感兴趣的文章:

如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网