最近，发现自己工作将近三年都没有整理一些小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，而是点击“”换一换”之后，祝福语句随机变化