换一换 随机
最近,发现自己工作将近三年都没有整理一些小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,而是点击“”换一换”之后,祝福语句随机变化
生活中不可能到处顺利,包括工作!