分享一个简单的js星星打分功能

最新推荐文章于 2022-08-22 08:44:50 发布
最新推荐文章于 2022-08-22 08:44:50 发布
阅读量731 收藏 2
点赞数
分类专栏： JS 文章标签： javascript 前端 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45089766/article/details/121876440
版权
本文介绍如何利用JavaScript创建一个简单的星星打分功能。通过HTML和JS代码展示实现细节，帮助前端开发者快速理解并应用。
摘要由CSDN通过智能技术生成

分享一个简单的js星星打分功能

效果：
在这里插入图片描述

代码如下：
html：

<div>
	<span>给这个页面打个分吧：</span>
	<div class="mgl5">
		<img src="/images/stars.png" alt="" class="scoreImg" data-index="1" onclick="scoreChange(event)">
		<img src="/images/stars.png" alt="" class="scoreImg" data-
最低0.47元/天 解锁文章
N_ong.
关注
专栏目录
js星星评分
s20001027的博客
09-27 592
<!DOCTYPEhtml> <htmllang="en"> <head> <metacharset="UTF-8"> <metaname="viewport"content="width=device-width,initial-scale=1.0"> <metahttp-equiv="X-UA-Compatible"content="ie=edge"> <titl...
js等级评分效果（星星实现打分功能）
01-20
js等级评分效果（星星实现打分功能） 和csdn下面的评论上的星星差不多
JS实现星星评分
honeyLu_88的博客
01-28 1519
越来越多的小程序和网站使用星星评分，如何用js实现星星评分，下面是我自己写的实现效果的代码。 html和css代码： js代码：
JS实现星级评分——简化版
文字的博客
05-04 9094
过了一段时间，再次来实现星级评分，做了一定的简化，运用了函数传参、三目运算来实现简化。 代码： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>星级评分</title> <style type="text/css"> body{...
【JS】模拟评分效果-普通方法，构造函数，类三种写法实现
xxxxxwxx的博客
08-22 516
点击星星，对应星星前面的星星全部点亮，评语显示在最后，此时鼠标移出后星星高亮和评语不消失。鼠标划过时，对应星星前面的星星全部点亮，对应评语显示在下方。
js实现的星星评分功能函数
01-19
本文实例讲述了js实现的星星评分功能函数。分享给大家供大家参考，具体如下： <!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd> <...
jquery实现类似淘宝星星评分功能实例
12-29
本文实例讲述了jquery实现类似淘宝星星评分功能的方法，分享给大家供大家参考之用。具体方法如下： html部分代码如下： <body> ☆ ☆ ☆ ☆ ☆ <p id=p></p> <p id=score></p> </body> ...
jQuery实现滑动星星评分效果(每日分享)
10-16
在这个示例中，我们看到如何使用jQuery来创建一个交互式的星星评分系统。这个系统包含5颗星星，用户可以通过鼠标滑过或点击来给内容打分，分数范围从0到10分。用户还可以选择取消评分，重新进行评价。 首先，HTML...
同时支持多个星星评分的JS，非常实用
10-18
本文将深入探讨如何创建一个支持多个星星评分的JS实现，并分享其实用性及实现细节。 一、实现原理 1. HTML结构：首先，我们需要在HTML中创建一组可点击的星星元素，这些元素通常设置为SVG图标或者背景图片。每个...
JS实现评分功能.zip
09-21
JavaScript实现评分功能，可以用于电商项目中的商品评价打分
js仿淘宝评价评分功能
10-20
本文主要介绍了js仿淘宝评价评分功能——点击心形生成得分（有半心选择），具有很好的参考价值，下面跟着小编一起来看下吧
js实现星级评分代码
10-04
js实现星级评分的源代码，详细的代码以及流程参见博文：http://blog.csdn.net/qq_29656961/article/details/78157715
js实现星星打分效果的方法
10-24
主要介绍了js实现星星打分效果的方法,涉及javascript操作页面元素与样式的技巧,非常具有实用价值,需要的朋友可以参考下
js实现评分效果
qq_37194256的博客
10-23 3593
js代码实现简单评分功能 我们经常可以在购物网站及快餐应用上看见评价页面,本文将讲述如何使用代码来实现评分效果; 具体实现的功能包括: 1、鼠标滑动点亮星星,移出时星星不亮; 2、鼠标点击可点亮星星,并且不可熄灭,同时,右侧出现对应评价; 3、点击已点亮的星星,不会更改先有的点亮颗数,同时,右侧评价也不会变. 代码如下: html部分: <body> <div> ...
JS 实现简单星星评分功能
mixi9760的博客
07-26 8070
思路调用onmouseover将经过的星星和之前的设置成红色 之后的设置成黑色代码<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>document示例</title> </head> <body onload="test()"> <table id ="czy"> <tr>
05-新手入门级别：星星打分
君莫笑
04-14 178
注意：代码要用的图片在下面奥，一定要把图片加上 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=..
JS实现简单的评分评星功能
mydreamhope的博客
01-11 5586
for (var i = 0; i < images.length; i++) { images[i].onmouseover = (function (num) { return function () { //再遍历一次所有的星鼠标左边的星变成黄色,有边变成灰色 for (var j = 0; j < images.length; j++
实现评价页面添加星星数量
weixin_30315905的博客
09-21 335
var num = finalnum = tempnum = 0; var lis = $(".star-box span"); //num:传入点亮星星的个数 //finalnum:最终点亮星星的个数 //tempnum:一个中间值 function fnShow(num) { ...
js评分系统
l_sss2019的博客
08-20 644
构造函数写评分系统
用vu3写一个简单的星星评分
最新发布
06-08
好的，下面是一个用 Vue 3 写的简单的星星评分组件示例： ```html <template> <div> <div class="star-rating"> <span v-for="(star, index) in stars" :key="index" @click="setRating(index + 1)"> <i :class="star"></i> </span> </div> <p>您的评分为：{{ rating }}颗星</p> </div> </template> <script> export default { data() { return { rating: 0, stars: ['far fa-star', 'far fa-star', 'far fa-star', 'far fa-star', 'far fa-star'] } }, methods: { setRating(rating) { this.rating = rating; this.stars.fill('far fa-star', rating); this.stars.fill('fas fa-star', 0, rating); } } } </script> <style> .star-rating { font-size: 3rem; color: #ffd700; } .star-rating i { margin-right: 0.3rem; cursor: pointer; } </style> ``` 这个组件定义了一个 `rating` 变量来保存当前用户的评分，以及一个 `stars` 数组来保存星星的样式类名。在模板中，使用 `v-for` 循环渲染五颗星星，通过点击事件来设置评分，并动态改变星星的样式。 在 `setRating` 方法中，我们使用 `fill` 方法来动态修改 `stars` 数组的内容，从而改变星星的样式。具体来说，我们将前 `rating` 个元素改为 `fas fa-star` 样式，后面的元素改为 `far fa-star` 样式。 这是一个非常简单的星星评分组件，您可以根据需求进行进一步的优化和扩展。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值