最近，發現自己工作將近三年都沒有整理一些小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，而是點選“”換一換”之後，祝福語句隨機變化