许愿墙

简单的许愿墙

html：

<div id="box">
    <div id="write">
        <p id="move">写下你的心愿吧</p>
        <textarea id="message" name="" rows="15" cols="40"></textarea>
        <input type="button" name="btn" id="btn" value="点击发送心愿啦" />
    </div>
</div>
<input type="button" name="hid" id="hid" value="隐藏心愿输入框" />

css

*{
    margin: 0;
    padding: 0;
}
#box{
    width: 800px;
    height: 600px;
    border: 1px solid #ccc;
    margin: 50px auto 0;
    position: relative;
}
#write{
    width: 301px;
    height: 320px;
    position: absolute;
    top: 250px;
    left: 230px;
    z-index: 10;
    background:#f5e6e6;
}
#message{
    resize: none;
    margin-left: 1px;
}
#btn{
    display: block;
    position: absolute;
    bottom: 10px;
    right: 5px;
}
#write input{
    width: 100px;
    height: 30px;
    border: 0;
    cursor: pointer;
    background:#f5e6e6;
    border: 1px solid #ccc;
}
#write p{
    width: 300px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    cursor: move;
}
#box span{
    display: block;
    width: 200px;
    height: 200px;
    font-size: 14px;
    position: absolute;
    top: 0;
    left: 0;
    cursor: move;
    overflow: auto;
    border: 2px dashed #fff;
}
#hid{
    margin-left: 900px;
    margin-top: 10px;
}

二、js

var oBox = document.getElementById("box");
var oWrite = document.getElementById("write");
var oMessage = document.getElementById("message");
var oBtn = document.getElementById("btn");
var oMove = document.getElementById("move");
var oHid = document.getElementById("hid");
var onOff = true;//设置开关，用来隐藏和显示输入框
var num = 0;//设置一个num，下面用来改变卡片的z-index值，在上面显示
//特别说明：下面提到的输入框不是全指<textarea>标,因为东西比较碎，说详细了就更容易蒙圈，就全指输入框了，反正大体就是指那么一坨
//输入框的隐藏和显示
oHid.onclick = function(){
    if( onOff ){
        oWrite.style.display = 'none';
        oHid.value = '显示心愿输入框';
        onOff = false;
    }else{
        oWrite.style.display = 'block';
        oHid.value = '隐藏心愿输入框';
        onOff = true;
    };
};
//输入框的移动
oMove.onmousedown = function(){
    document.onmousemove = function( ev ){//输入框的移动
        ev = ev || event;
        //用鼠标距X轴的位置-大盒子的左边距-输入框的宽度的一半  就是输入框的left值
        var wL = ev.clientX - oBox.offsetLeft - oWrite.offsetWidth/2;
        var wT = ev.clientY - oBox.offsetTop - oMove.offsetHeight/2;
        //大盒子的宽-输入框的宽 就是输入框左右移动的范围，高同理
        var w = oBox.offsetWidth - oWrite.offsetWidth;
        var h = oBox.offsetHeight - oWrite.offsetHeight;
        //判断输入框不要移出设置的大盒子的范围内
        if( wL > w ){
            wL = w;
        }else if( wL < 0  ){
            wL = 0;
        };
        if( wT > h ){
            wT = h;
        }else if( wT < 0 ){
            wT = 0;
        }
        oWrite.style.left = wL + 'px';//记得加单位  px
        oWrite.style.top = wT + 'px';
        oWrite.style.zIndex = 999;
    }
    document.onmouseup = function( ){
        //记得都要清空，防止抽风
        document.onmousemove = null;
        document.onmouseup = null;
    }
    return false;//之前没有写return false,输入框移动的时候总是抽风，所以要记得写
}
//创建心愿单
//点击发送按钮发送心愿
oBtn.onclick = function(){
    sendMsg()
}
//按回车键发送心愿
oMessage.onfocus = function(){
    console.log(1)
    document.onkeydown = function(ev){
        ev = ev || event ;
        if( ev.keyCode == '13'){
            sendMsg();
            return ev.preventDefault();//这里是阻止回车键回车换行,我试了不写的话，摁回车发送的时候还会换行，那么下面对输入框的清空就没用，会出现能发送空白卡片的bug
        }
    }
}
//这是封装的函数  发送卡片的全部过程
function sendMsg(){
    var val = oMessage.value;//获取输入的框的value值，好放入下面创建的span标签内
    var oWish ;
    if( val ){
        oWish = document.createElement('span');//创建一个span标签，用这个span来装卡片
        oWish.className = 'Ospan';
        oWish.innerHTML = val;//span里面的内容就是输入框中的内容
        oBox.appendChild( oWish );
        oWish.style.background = 'rgb('+ parseInt(Math.random()*255 +10) + ','+ parseInt(Math.random() *255 +10)+',' +parseInt(Math.random()*255 +10) + ')';//卡片生成随机颜色
        oWish.style.left = parseInt(Math.random()*( oBox.offsetWidth-oWish.offsetWidth )) + 'px';//卡片的位置也是随机生成
        oWish.style.top = parseInt(Math.random()*( oBox.offsetHeight-oWish.offsetHeight )) + 'px';
    }
    oMessage.value = '';//发送之后，输入框中的内容清空
var w = document.getElementsByClassName('Ospan');
for( var i=0;i<w.length;i++ ){
    w[i].index = i;
    w[i].onmousedown = function(){
        var This = this;//下面用到this，指向发生改变，这里先定义好
        num++;
        this.style.zIndex = num;//增加z-index值
        document.onmousemove = function( ev ){
            ev = ev || event ;
            //这些卡片都跟输入框的思路一样 不赘述
            var sW = ev.clientX- oBox.offsetLeft - oWish.offsetWidth/2;
            var sH = ev.clientY - oBox.offsetTop - oWish.offsetHeight/2;
            var bsw = oBox.offsetWidth - oWish.offsetWidth;
            var bsh = oBox.offsetHeight - oWish.offsetHeight;
            for( var j=0;j<w.length;j++ ){
                if( This.index == j ){
                    //控制卡片移动的位置
                    if( sW > bsw ){
                        sW = bsw;
                    }else if( sW < 0  ){
                        sW = 0;
                    };
                    if( sH > bsh ){
                        sH = bsh;
                    }else if( sH < 0 ){
                        sH = 0;
                    }
                    This.style.left = sW + 'px';
                    This.style.top = sH + 'px';
                    }
                }
            }
            document.onmouseup = function( ){
                document.onmousemove = null;
                document.onmouseup = null;
![Uploading 许愿墙效果图_467121.png . . .]

            }
            return false;
        };
    }
};

大概的效果图：

许愿墙效果图.png