HTML+CSS网站点赞和打赏的功能，实现方法如下：
1、HTML代码：
<body><div class="thumbs_content">
<a href="javascript:void(0)" class="thumbs_button fa fa-thumbs-up" title="点赞，支持一下"> 点赞</a>
<a href="javascript:void(0)" class="reward_button fa fa-money" title="打赏，支持一下"> 打赏</a>
<span class="clear"></span>
</div>
</body>
2、CSS代码如下：缺燃山
<style type="text/css">.thumbs_content{
width: 291px
margin: 0 auto
}
.thumbs_button{
float: left
width:145px
text-align: center
margin:5px auto
height: 45px
line-height: 45px
background-color:#444
color:#fbfbfb
text-align:center
text-decoration:none
font-weight:bold
段铅 font-size:16px
transition: all 0.3s
border-radius: 0 0 0 25px
-webkit-border-radius: 0 0 0 25px
-moz-border-radius: 0 0 0 25px
-o-border-radius: 0 0 0 25px
}
.reward_button{
float: left
width:145px
text-align: center
margin:5px auto
height: 45px
line-height: 45px
伏中 background-color:#cd4450
color:#fbfbfb
text-align:center
text-decoration:none
font-weight:bold
font-size:16px
border-left:1px solid #fbfbfb
transition: all 0.3s
border-radius: 0 25px 0 0
-webkit-border-radius: 0 25px 0 0
-moz-border-radius: 0 25px 0 0
-o-border-radius: 0 25px 0 0
}
.thumbs_button:hover, .reward_button:hover{
opacity:0.8
font-size:18px
}
.clear{
clear:both
}
</style>
3、效果图：
网站上的赞功能类似于统计功能。
总体来说，在页面上闹陆灶做好“赞”连接或者按钮，点击触发事件；事件中可以ajax *** 作服务器代码，液扮在数据库中执行+1 *** 作等，并返回结果给“赞”数值。
根据是否需要记录用户，分两种情况：
不需要记录谁赞了，只统计被赞次数
文章表里加一个被赞次数的字段，用户每点悉昌一次“赞”，更新对应文章的被赞次数，也就是这个字段值+1；
需要记录用户“赞”的记录
新加一个“赞”的记录表，包括点赞的用户id，被赞的文章id，赞的时间等，用户每点一次赞，就在这个表里新增一条数据。这个可以严格控制用户赞同一篇文章的次数
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）