<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <title></title> <style> #vote { text-align: center; } .vote-btn { margin: 0 20px; display: inline-block; width: 60px; height: 54px; cursor: pointer; } #dig { background-image: url(dig.gif); } #bury { background-image: url(bury.gif); } .vote-num { display: inline-block; font-size: 14px; margin-top: 32px; color: white; } </style> </head> <body> <div id="vote" data_id="文章唯一key"> <span id="dig" class="vote-btn"><span class="vote-num">顶的次数</span></span> <span id="bury" class="vote-btn"><span class="vote-num">踩的次数</span></span> </div> <script type="text/javascript" src="jquery-1.10.1.min.js"></script> <script type="text/javascript"> $("#vote .vote-btn").bind("click", function(){ var me = $(this); var id = me.parent().attr("data_id"); var type = this.id; $.post("请求地址", {'type': type, 'id': id }, function(data){ data = $.trim(data); if(data == 'success'){ //如果投票成功 $num = me.find(".vote-num"); $num.html(parseInt($num.html()) + 1 ); //投票+1 //取消绑定的点击事件,并还原鼠标指针样式 $("#vote .vote-btn").unbind("click").css("cursor", "auto"); if(type == 'bury'){ alert("您投了反对票,敬请在评论中留言告知您的意见,以便于我们改正!"); } }else if(data == 'done'){ //如果已经投票过 //取消绑定的点击事件,并还原鼠标指针样式 $("#vote .vote-btn").unbind("click").css("cursor", "auto"); alert("您已经投票过,无法再次投票!"); }else{ //投票失败 alert("由于系统或网络问题,投票没有成功,建议您稍后重新投票!"); } }); }); </script> </body> </html>
完整的前端代码包括html、css、js各部分的代码。使用下列前端代码,加上自行简单实现的后台代码,即可实现完整的顶踩功能。
后台代码的大致实现是:先根据cookie或数据库数据来判断用户是否已经投票过,如果之前已经投票过,则返回done;如果投票投票操作成功,则返回success;如果投票失败则返回error或其他错误信息。
效果图:
相关推荐
前端实现图片预览功能,很好很实用的一款插件,希望能帮助到大家
使用js的QRcode.js自动生成二维码,支持实现中文的转换,其中还包括在二维码中插入小图片。
前端使用JQUERY实现批注功能
功能:商城商品属性的添加以及生成表格并还原到前端展示sku列表,点击显示判断库存以及变灰提示没有规格等前端展示,成品demo下载可以自取需要的,左边生成提交右边显示sku,取所需部分即可,注释清楚
抽奖html+css+JQ动态纯前端实现
jq模糊查询组件功能-可用于前端
利用jq实现倒计时功能,添加jquery.min.js js库的引用即可使用,代码有提示
Excel导入功能 前端 JQ JS xlsx.core.min.js
jq二维码,使用jq_code直接前端生成二维码,后台只需要传链接即可生成二维码
jq+layui 实现图片拖拽上传功能
下载后,直接点开HTML文件,无法实现转换。 需要用vscode等相关ide,使用“Open with Live Server”(来源于live server插件)打开该html,即可实习。
javaweb项目,jquery前段实现分页效果,针对数据量不是很大时使用。
jq分页与选中功能,自己写的小功能学习用,分享大家,有问题可以解决一下,谢谢! 2个功能:一个为分页功能,另一个选中功能!!
多图片上传jq 前端部分
使用jq实现二级菜单效果,jq下拉菜单效果,这个下拉菜单,一般大多数人都选择使用ui框架,但是也有人还是需要jq实现的,写个demo分享给大家
jq 实现验证码
JQ JS javascript 截图功能 画图功能
jq 插件,实现拖拽
这是我自己用过的js和一些其他js效果、上传、验证等功能集合,我把这些放到了一起,包含50多个个前端文件、插件、以及移动端手机模板、还有一些国外大佬写js效果封装类等等,非常多并且非常实用,相信大家一定不会...