JS implements star rating
This time I will bring you JS to implement star rating. What are the precautions for JS to implement star rating? The following is a practical case, let’s take a look.
Although it is simple, there are still a few things to pay attention to:
1. The hover effect when not clicked, the stars will light up as the mouse moves.
2. Click to turn off the hover effect.
3. Click on the same star and the star can change colors at any time.
Specific code display:
<!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>
I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!
Recommended reading:
The above is the detailed content of JS implements star rating. For more information, please follow other related articles on the PHP Chinese website!
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
AI Hentai Generator
Generate AI Hentai for free.
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
1382
52
How to implement an online speech recognition system using WebSocket and JavaScript
Dec 17, 2023 pm 02:54 PM
How to use WebSocket and JavaScript to implement an online speech recognition system Introduction: With the continuous development of technology, speech recognition technology has become an important part of the field of artificial intelligence. The online speech recognition system based on WebSocket and JavaScript has the characteristics of low latency, real-time and cross-platform, and has become a widely used solution. This article will introduce how to use WebSocket and JavaScript to implement an online speech recognition system.
How to use Xiaomi Mi 14 Ultra AIGC Magic Elimination Pro?
Mar 16, 2024 pm 01:34 PM
Nowadays, major mobile phone brands are launching new products with more and more functions. Many previously imagined functions have been realized in new mobile phones. Recently, Xiaomi Mi 14 Ultra has become very popular and has attracted a lot of attention in the market. , I believe many consumers are more interested in this phone. The editor below will show you how to use Xiaomi 14UltraAIGC Magic Elimination Pro? Come and take a look at the specific tutorials! How to use Xiaomi 14UltraAIGC magic elimination? Open Xiaomi 14Ultra, find and enter the photo album software on the desktop, select the pictures you want to eliminate, and enter photo album editing. Select the Magic Elimination option and click Pro in the upper right corner to enter the Magic Elimination Pro and select the smart location you want to go to.
WebSocket and JavaScript: key technologies for implementing real-time monitoring systems
Dec 17, 2023 pm 05:30 PM
WebSocket and JavaScript: Key technologies for realizing real-time monitoring systems Introduction: With the rapid development of Internet technology, real-time monitoring systems have been widely used in various fields. One of the key technologies to achieve real-time monitoring is the combination of WebSocket and JavaScript. This article will introduce the application of WebSocket and JavaScript in real-time monitoring systems, give code examples, and explain their implementation principles in detail. 1. WebSocket technology
How to use JavaScript and WebSocket to implement a real-time online ordering system
Dec 17, 2023 pm 12:09 PM
Introduction to how to use JavaScript and WebSocket to implement a real-time online ordering system: With the popularity of the Internet and the advancement of technology, more and more restaurants have begun to provide online ordering services. In order to implement a real-time online ordering system, we can use JavaScript and WebSocket technology. WebSocket is a full-duplex communication protocol based on the TCP protocol, which can realize real-time two-way communication between the client and the server. In the real-time online ordering system, when the user selects dishes and places an order
How to delete your own review records on Dianping. How to delete your own reviews.
Mar 12, 2024 am 11:52 AM
We all like Dianping, a high-quality life service software, which can promote everyone's consumption and better obtain some of the consumer services here. Generally, it can make everyone feel very satisfied and everyone can enjoy the various services here. We have a detailed understanding of some of the stores and allow you to search and check them out first. In many cases, when you check these stores, you can get a large number of real customer reviews. All of them can serve as a reference for you. Check out some of the must-eat lists and must-play lists here, which will allow you to find good places and make purchases directly. And after you have finished your purchases, you can leave them for yourself. Please rate some of your comments directly. Of course, everyone is satisfied with some of your comments
How to implement an online reservation system using WebSocket and JavaScript
Dec 17, 2023 am 09:39 AM
How to use WebSocket and JavaScript to implement an online reservation system. In today's digital era, more and more businesses and services need to provide online reservation functions. It is crucial to implement an efficient and real-time online reservation system. This article will introduce how to use WebSocket and JavaScript to implement an online reservation system, and provide specific code examples. 1. What is WebSocket? WebSocket is a full-duplex method on a single TCP connection.
How about Snapdragon g3x gen2
Mar 04, 2024 am 09:07 AM
Many users do not know much about the performance of Snapdragon g3xgen2, so they are hesitant to buy the corresponding product. Let me briefly talk about the performance of Snapdragon g3xgen2. How about Snapdragon g3xgen2? Answer: The overall improvement is still huge. Therefore, the performance in terms of effects is basically very exciting. 1. Compared with the previous generation, the Snapdragon G3xGen2 processor has improved by 30%, while the GPU performance has doubled. 2. This processor can provide support for handheld devices with cross-platform gaming capabilities, as well as devices for Android, PC, and cloud console games. 3. Supports ray tracing, and also allows users to live broadcast during games. 4. With WiFi7 and 5G millimeter wave connection functions, you can
JavaScript and WebSocket: Building an efficient real-time weather forecasting system
Dec 17, 2023 pm 05:13 PM
JavaScript and WebSocket: Building an efficient real-time weather forecast system Introduction: Today, the accuracy of weather forecasts is of great significance to daily life and decision-making. As technology develops, we can provide more accurate and reliable weather forecasts by obtaining weather data in real time. In this article, we will learn how to use JavaScript and WebSocket technology to build an efficient real-time weather forecast system. This article will demonstrate the implementation process through specific code examples. We
