<!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;
}
#you {
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("Request address", {'type': type, 'id': id }, function(data){
data = $.trim(data);
if(data == 'success'){ //if the vote was successful
$num = me.find(".vote-num");
$ num.html (parseInt ($ num.html ()) + 1); // Voting +1
//Unbind the click event and restore the mouse pointer style
$("#vote .vote-btn").unbind("click").css("cursor", "auto");
if(type == 'bury'){
alert("You voted against, please leave a message in the comments to let us know your opinion so that we can correct it!");
}
}else if(data == 'done'){ //if already voted
//Unbind the click event and restore the mouse pointer style
$("#vote .vote-btn").unbind("click").css("cursor", "auto");
alert("You have already voted, you cannot vote again!");
}else{ //Vote failed
alert("Due to system or network problems, the vote was unsuccessful, please vote again later!");
}
});
});
</script>
</body>
</html>
The complete front-end code includes the code of each part of html, css, and js. Using the following front-end code, plus the back-end code that is simply implemented by yourself, you can achieve a complete top-down function.
The general implementation of the background code is: first determine whether the user has voted according to the cookie or database data, if the user has voted before, return done; if the voting operation is successful, return success; if the voting fails, return error or other errors information.
Effect picture: