JS实现评价星级
这次给大家带来JS实现评价星级，JS实现评价星级的注意事项有哪些，下面就是实战案例，一起来看一下。
虽然简单，还是有几个注意的地方：
1. 未点击时的hover效果，星星会随鼠标移动亮起来喔。
2. 点击后关闭hover效果。
3. 点击同一颗星星，星星可以随时换色。
具体代码展示：
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<meta name="viewport"content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
</head>
<style type="text/css">
.stars{
white-space: nowrap;
text-align: center;
margin-top: 20px;
margin-bottom: 20px;
}
.stars li{
display: inline-block;
color:#ADADAD;
font-size: 40px;
}
</style>
<body>
<ul class="stars">
<li>★</li>
<li>★</li>
<li>★</li>
<li>★</li>
<li>★</li>
</ul>
<script src="../../js/common/jquery-git.js"></script>
<script>
$(function() {
//为星星设置hover效果
varisClicked =false;
varbeforeClickedIndex = -1;
varclickNum = 0;//点击同一颗星次数
$('li').hover(
function() {
if(!isClicked) {
$(this).css('color','#F0AD4E');
varindex = $(this).index();
for(vari = 0; i <= index; i++) {
$('li:nth-child('+ i +')').css('color','#F0AD4E');
}
}
},
function() {
if(!isClicked) {
$('li').css('color','#ADADAD');
}
}
);
//星星点击事件
$('li').click(function() {
$('li').css('color','#ADADAD');
isClicked =true;
varindex = $(this).index();
for(vari = 1; i <= index+1; i++) {
$('li:nth-child('+ i +')').css('color','#F0AD4E');
}
if(index == beforeClickedIndex) {//两次点击同一颗星星 该星星颜色变化
clickNum++;
if(clickNum % 2 == 1) {
$('li:nth-child('+ (index + 1) +')').css('color','#ADADAD');
}else{
$('li:nth-child('+ (index + 1) +')').css('color','#F0AD4E');
}
}else{
clickNum = 0;
beforeClickedIndex = index;
}
});
});
</script>
</body>
</html>
相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！
推荐阅读：
以上是JS实现评价星级的详细内容。更多信息请关注PHP中文网其他相关文章！
热AI工具
Undresser.AI Undress
人工智能驱动的应用程序，用于创建逼真的裸体照片
AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。
Undress AI Tool
免费脱衣服图片
Clothoff.io
AI脱衣机
Video Face Swap
使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸！
热门文章
热工具
记事本++7.3.1
好用且免费的代码编辑器
SublimeText3汉化版
中文版，非常好用
禅工作室 13.0.1
功能强大的PHP集成开发环境
Dreamweaver CS6
视觉化网页开发工具
SublimeText3 Mac版
神级代码编辑软件(SublimeText3)
如何使用WebSocket和JavaScript实现在线语音识别系统
Dec 17, 2023 pm 02:54 PM
如何使用WebSocket和JavaScript实现在线语音识别系统引言：随着科技的不断发展，语音识别技术已经成为了人工智能领域的重要组成部分。而基于WebSocket和JavaScript实现的在线语音识别系统，具备了低延迟、实时性和跨平台的特点，成为了一种被广泛应用的解决方案。本文将介绍如何使用WebSocket和JavaScript来实现在线语音识别系
WebSocket与JavaScript：实现实时监控系统的关键技术
Dec 17, 2023 pm 05:30 PM
WebSocket与JavaScript：实现实时监控系统的关键技术引言：随着互联网技术的快速发展，实时监控系统在各个领域中得到了广泛的应用。而实现实时监控的关键技术之一就是WebSocket与JavaScript的结合使用。本文将介绍WebSocket与JavaScript在实时监控系统中的应用，并给出代码示例，详细解释其实现原理。一、WebSocket技
小米14 Ultra AIGC魔法消除Pro如何使用？
Mar 16, 2024 pm 01:34 PM
现在各大手机品牌推出的新品功能都是越来越多的，很多以前想象的功能都在新手机里面实现了，最近小米14Ultra这款手机就非常火爆，在市场上面受关注程度是很高的，相信很多消费者们对这款手机都是比较有兴趣的，下面小编为大家带来小米14UltraAIGC魔法消除Pro怎么使用？快来一起看看具体的教程吧！小米14UltraAIGC魔法消除怎么使用？打开小米14Ultra，在桌面找到并进入相册软件，选择想要消除的图片，进入相册编辑。选择魔法消除选项，点击右上角的Pro，即可进入魔法消除Pro选择你想要智能去
如何利用JavaScript和WebSocket实现实时在线点餐系统
Dec 17, 2023 pm 12:09 PM
如何利用JavaScript和WebSocket实现实时在线点餐系统介绍：随着互联网的普及和技术的进步，越来越多的餐厅开始提供在线点餐服务。为了实现实时在线点餐系统，我们可以利用JavaScript和WebSocket技术。WebSocket是一种基于TCP协议的全双工通信协议，可以实现客户端与服务器的实时双向通信。在实时在线点餐系统中，当用户选择菜品并下单
如何使用WebSocket和JavaScript实现在线预约系统
Dec 17, 2023 am 09:39 AM
如何使用WebSocket和JavaScript实现在线预约系统在当今数字化的时代，越来越多的业务和服务都需要提供在线预约功能。而实现一个高效、实时的在线预约系统是至关重要的。本文将介绍如何使用WebSocket和JavaScript来实现一个在线预约系统，并提供具体的代码示例。一、什么是WebSocketWebSocket是一种在单个TCP连接上进行全双工
大众点评怎么删除自己的评价记录 自己评价删除的方法
Mar 12, 2024 am 11:52 AM
我们都是很喜欢大众点评这一优质的生活服务软件，都能够促进大家的消费，更好的获得这里的一些消费服务，一般都能够让大家感到特别满意，大家能够对这里的各种各样的一些店铺，都是有着详细的了解，允许大家先进行搜索查看一番的，很多的一些时候，查看到这一些店铺的时候，都能够砍到大量的一些顾客们的真实的消费的评价，都能够对你们起到一个参考的作用，查看到这里的一些必吃榜，必玩榜，都能够让大家寻找到好的地方，直接地进行消费，且大家消费完的话，都能够留下自己的一些评论，直接的进行评分哦，当然大家对自己的一些评论感
骁龙g3x gen2怎么样
Mar 04, 2024 am 09:07 AM
不少用户对于骁龙g3xgen2的表现不是很了解，因此不太敢买对应的产品，下面就给大家简单聊聊这款骁龙g3xgen2的性能表现。骁龙g3xgen2怎么样答：整体的提升还是很大的。因此在效果上的表现基本上还是很令人期待的。1、骁龙G3xGen2处理器和上一代的比起来，提升30%，而GPU性能则提升了一倍。2、这款处理器能够为具有跨平台游戏功能的掌机设备以及用于Android、PC、云主机游戏的设备提供支持。3、支持光线追踪，而且还可以让用户在游戏的时候直播4、有了WiFi7和5G毫米波连接功能，可以
JavaScript和WebSocket：打造高效的实时天气预报系统
Dec 17, 2023 pm 05:13 PM
JavaScript和WebSocket：打造高效的实时天气预报系统引言：如今，天气预报的准确性对于日常生活以及决策制定具有重要意义。随着技术的发展，我们可以通过实时获取天气数据来提供更准确可靠的天气预报。在本文中，我们将学习如何使用JavaScript和WebSocket技术，来构建一个高效的实时天气预报系统。本文将通过具体的代码示例来展示实现的过程。We
