仿水滴筹中快捷留言祝福、随机生成祝福

最近，发现自己工作将近三年都没有整理一些小demo，每次做项目都是自己重新写，感觉好麻烦，尤其是最近自己有5个月没有工作，到公司拿起电脑撸代码的时候竟然发现自己忘了好多知识，于是想给自己留个案例demo同时可供小白们学习使用，遇到不对的大家可以积极帮我提出，我们共同进步！

在做红十字会项目的时候涉及到给患者留言祝福，本着让用户使用简单快捷的方式，首先给出几个留言模板供用户选择并留言，于是查看了好多公益项目，于是决定仿照水滴筹的那个样式写一下：

HTML:

<div class="bless_wd_con">
    <div id=""write_bless class="bless_box">
        <div class="boxA">
            <div class="boxA_con">
                <div class="boxA_con_1">
                    <p>留下祈福</p>
                </div>
                <div class="boxA_con_2">
                    <textarea id="bless_wd">一个人的力量虽然渺小，但是只要汇聚这每一点爱和期待，奇迹就会发生！
                    </textarea>
                </div>
                <div class="bless_btn bless_change">
                    <button>换一换</button>                            
                </div>
                <div class="bless_btn bless_send">
                    <button>发送祝福</button>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="project_btn">
    <a href="">我要捐款</a>
    <a href="javascript:void(0);" id="toBless">我要祈福</a>
</div>

CSS：

.bless_wd_con{
    display:none;
}
.bless_box{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:rgba(0,0,0,0.6);
    z-index:1039;
}
.boxA{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    background:url(../images/bless_bg.png);
    background-size:100% 100%;
    background-position:center -10px;
}
.boxA_con{
    width: 4rem;
    margin: 0 auto;
    padding: 2.5rem 0 0.4rem 0;
    text-align: center;
}
.boxA_con_1{
    margin-top:0.7rem;
}
.boxA_con_1 p{
    color: #bd683a;
    font-size: 0.3rem;
    font-weight: bold;
    height: 0.6rem;
    line-height: 0.6rem;a;
}
.boxA_con_2{
    background: url(../images/line.png) repeat-x;
    height:100px;
    background-size:100% 100%;
}
.boxA_con_2 textarea{
    background: none;
    border:none;
    width:100%;
    height:100px;
    line-height:33px;
}
.bless_btn{
    margin-bottom:0.2rem;
}
.bless_btn button{
    width: 3rem;
    height: 0.8rem;
    font-size: 0.24rem;
    display: block;
    border: none;
    background: none;
    margin: 0 auto;
    border-radius:10px;
}
.bless_change button{
    color:#bd683a;
}
.bless_send button{
    background:#bd683a;
    color:white;
}

$(function(){
    var bless = {};
    bless = [{
        value: 1,
        text: "只要相信希望和勇气，你的坚强和我们的祝福就可以焕发奇迹！"
    },
    {
        value: 2,
        text: "虽然病魔突如其来势如猛兽，但只要心中充满希望，就能战胜一切病痛！"
    },
    {
        value: 3,
        text: "我在这里写下最真挚的期待，因为爱的力量是无穷的，祝福也能带来温暖！"
    },
    {
        value: 4,
        text: "病魔凶猛，现实残酷，但是不要放弃，因为坚强，勇敢，希望与爱，也是治病良药。"
    },
    {
        value: 5,
        text: "在残酷的现实面前，我们可能已经筋疲力尽，但希望这小小的祝福能给你多一点勇气！"
    },
    {
        value: 6,
        text: " 一个人的力量虽然渺小，但是只要汇聚这每一点爱和期待，奇迹就会发生！"
    },
    {
        value: 7,
        text: "不要害怕，不要退缩，因为面对病魔的路上并非只有你一人，加油！"
    },
    {
        value: 8,
        text: "病魔与灾难是那么凶猛可怕，但我们会与勇敢、坚强的你一起面对，加油！"
    },
    {
        value: 9,
        text: "我希望在这里能写下我真诚的期待，愿幸福与笑容能在每个坚强的人身上绽放。"
    },
    {
        value: 10,
        text: "人们真诚的祝福总是能唤醒奇迹，愿所有渴望幸福的人都能如愿以偿。"
    },
    {
        value: 11,
        text: "只要充满美好期待的千言万语汇聚在一起，一定就能成为战胜一切的力量！"
    },
    {
        value: 12,
        text: "希望这蕴含真心期待的祝福能够给你带去战胜病魔的力量，加油，我们都和你在一起！"
    },
    {
        value: 13,
        text: "病魔虽然可怕，但总会被人们的爱驱散！前路虽然艰难，但你并非一人前行！加油！"
    },
    {
        value: 14,
        text: "坚强而勇敢会成为你的助力，这祝福则能给你带来更多力量！加油！你一定能行！"
    },
    {
        value: 15,
        text: "希望你能早日找回笑容，恢复健康！希望我这小小的祝福，能够给你带去勇气！"
    },
    {
        value: 16,
        text: "爱与希望可以战胜一切苦难，幸福与美好正在前方等着你，不要放弃，加油！"
    },
    {
        value: 17,
        text: "希望这只言片语能给你带来希望，希望这真诚的祝福能为你唤来奇迹！加油！"
    },
    {
        value: 18,
        text: "希望这祝福可以传递给勇敢面对困境的你，希望你能尽快恢复健康！回归幸福！"
    }]
    $(".bless_change button").on("click",function(){
        var i=parseInt(Math.random()*18,10);
        $("#bless_wd").val(bless[i].text)
    })
    $(".bless_send button").on("click",function(){
        console.log($("#bless_wd").val().length)
        $(".bless_wd_con").hide();
    })
})

对于小白：我用的是JQuery，所以需要在html中导入JQuery库

其实我想写的重点不在CSS，而是点击“”换一换”之后，祝福语句随机变化