<!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或其他错误信息。
效果图：
相关推荐
本文将详细介绍如何使用JavaScript（简称js）和jQuery（简称jq）来实现这一功能，并结合"Viewer.js"插件进行深入探讨。 一、JavaScript与jQuery基础 JavaScript是网页的脚本语言，用于增加交互性，而jQuery则是一...
`jq`通常指的是jQuery，一个广泛使用的JavaScript库，而本示例是利用jQuery与`QRcode.js`插件来实现二维码的生成。`QRcode.js`是一个轻量级的JavaScript库，能够帮助开发者在网页上创建出包含各种数据的二维码，包括...
在电商网站Demo中，`jquery.js`或者`script.js`等文件可能会处理用户交互，如点击事件、滑动效果、表单验证等，同时，JQ也可能用于动态加载数据、实现商品轮播图、添加至购物车等实用功能。 `images`目录存放着网站...
在本文中，我们将深入探讨如何使用Vue.js和jQuery来实现一个商城商品属性的添加功能，以及如何生成表格并在前端展示SKU列表。这个功能对于电商网站来说至关重要，因为它允许用户选择不同商品属性组合，并实时查看...
在前端开发中，批注功能是一项常见的需求，它允许用户在网页内容上添加注释、标记或高亮，以提供反馈、解释或分享见解。jQuery是一个广泛使用的JavaScript库，简化了DOM操作、事件处理和动画效果，因此用jQuery实现...
总结来说，`jq_code`是一个强大的前端二维码生成工具，它的易用性和灵活性使得前端开发人员能够在不依赖后端服务的情况下，快速实现二维码的生成。结合合理的后端接口设计，可以有效地提高应用的交互性和实用性。...
在IT行业中，前端开发是构建Web应用程序的重要组成部分，它涉及到用户与网站互动的界面设计和交互。本项目“抽奖html+css+JQ动态纯前端实现”是一个典型的前端开发实例，主要利用HTML、CSS和jQuery这三种技术来创建...
在前端开发中，实现网页的国际化是一个常见的需求，它允许网站根据用户所在的地区或语言设置显示相应的内容。在这个示例中，我们关注的是如何利用JQuery实现中英繁三种语言的切换。`JQuery`是一种广泛使用的...
在开发Web应用时，分页是一种常见的用户界面功能，它能帮助用户更有效地浏览大量数据。本主题将深入探讨如何使用jQuery在前端实现简单的分页效果，尤其适用于数据量不大的场景。 首先，jQuery是一个轻量级的...
利用jq实现倒计时功能，添加jquery.min.js js库的引用即可使用，代码有提示
【标题】"一份前端基于jq网页单页面"所涉及的知识点主要集中在前端开发领域，特别是JavaScript库jQuery（jq）的应用。jQuery是一个轻量级、功能丰富的JavaScript库，它简化了HTML文档遍历、事件处理、动画制作和Ajax...
在这个"jq分页与选中功能.zip"压缩包中，包含的是两个基于jQuery实现的小功能示例：一个用于实现分页效果，另一个涉及复选框的选中和删除功能。下面我们将详细探讨这两个知识点。 首先，让我们讨论分页功能。在网页...
本文将深入探讨如何利用jQuery实现前端模糊查询组件的功能，以提高用户界面的友好性和效率。 ### 一、jQuery简介 jQuery由John Resig于2006年创建，它的目标是使JavaScript编程变得更加简单。jQuery的核心特性包括...
本文将详细讲解如何利用jQuery插件来实现打印功能，具体以"JQ插件调用打印机实现打印功能"为主题，涉及的核心文件有`jquery-1.11.3.min.js`、`jquery.jqprint-0.3.js`和`jquery-migrate-1.2.1.min.js`。 首先，`...
在本文中，我们将深入探讨如何使用Jquery来实现本地存储通讯录功能。Jquery是一个流行的JavaScript库，它简化了DOM操作、事件处理以及Ajax交互，使得开发者能够更高效地构建Web应用。本地存储是HTML5引入的一项新...
Vue和jQuery（jq）是两种广泛使用的前端框架，而Excel作为数据管理的标准工具，用户通常期望能直接从网页导出表格到Excel文件。本教程将详细讲解如何在Vue和jQuery框架下实现这个功能。 1. **Vue框架中的表格导出**...
总的来说，"用于前端模块化使用的jq"是一个专门为现代前端模块化系统设计的jQuery版本，它允许开发者按需引入所需功能，提高代码组织的灵活性，同时通过优化降低资源消耗，提升用户体验。在实际开发中，结合合适的...
总之，通过jQuery，我们可以轻松实现一个功能完善的二级下拉菜单，即使在没有使用UI框架的情况下，也能为网站增添专业且友好的交互体验。理解并掌握这些基本技巧对于任何前端开发者来说都是非常有价值的。
本教程将详细讲解如何在前端实现Excel导入功能，利用jQuery（JQ）和JavaScript（JS）库xlsx.core.min.js来处理Excel文件。 xlsx.core.min.js是一个轻量级的JavaScript库，它专门用于读取和写入Excel文件，支持XLSX...