星星评分-简版

纯属自己的想法

最近在做一个项目用到星星评分，然后就各种找插件，还是不能满足我的要求，然后就自己写了一个，笨方法，可能不是很好，记录一下。

新的改变

/评分/

.box
{  width:100px;  height:20px;  /*background:#f4cea3;*/  background: url(../images/icon/xingxing1.png) top left repeat-x;  font-size: 7px;  position:relative
}
.rate
{  /*width:50px;*/  height:100%;  /*background:red;*/  background: url(../images/icon/xingxing2.png) top left repeat-x;  position:absolute;
}
.rate_text
{  width:100%;  height:100%;  top:12.5%;  position:absolute;  text-align:center;  vertical-align:middle;   color: red;  font-size: 15px;  font-family: monospace;
}

js 动态添加

str +=“<div class="box">“;
str +='<div id="score_rate" class="rate">';
str +='</div>';
str +='<div class="rate_text" id="score_text"></div>';
str +=''+producList[i].score+'</div>';

3.根据后台数据显示星星个数

//评分
if (scoreList ==4 ) {$(".rate").width('75%');
}

js 星星评分 (根据数据显示星星个数)-----简版相关推荐

微信小程序实现星星评分-整颗星星评分、半颗星星评分、任意颗星星展示
一.实现整颗星星评分(默认一颗星) 1.效果图 2.准备图片 3.remark.wxml <view class="stars"><view wx:for=&qu ...
【Flutter从入门到实战】⑪、豆瓣案例-1、星星评分Widget、虚线Widget、TabbarWidget、BottomNavigationBarItem的封装、初始化配置抽取
Flutter从入门到实战一共分为23个系列 ①(Flutter.Dart环境搭建篇) 共3个内容已更新 ②(Dart语法1 篇) 共4个内容已更新 ③(Dart语法2 篇) 共2个内容已更新 ...
JS实现星星评分功能实例代码(两种方法)
转载自 JS实现星星评分功能实例代码(两种方法) 一.方法1 1.用到图片 2.结构和样式 <!DOCTYPE html> <html lang="en"&g ...
点亮星星评分效果（js/vue）
1.使用js计算宽度 <!DOCTYPE html> <html lang="en"><head><meta charset=" ...
php星星评价,JS 实现点亮星星评分功能
本文主要和大家分享JS 实现点亮星星评分功能,希望能帮助到大家. 点亮星星评分 ★ ★ ★ ★ ★ 相关推荐:
html 星星评分显示,js实现的星星评分特效
今天闲来无事,在www.jsfoot.com中看到一个星星评分的特效,所以就拿来用了用,效果还不错,不过还不能满足我的需求,所以自己稍作了修改.本人js技术是个菜鸟,很多我也不是很明白,所以解释的不是 ...
JS - 点亮星星评分
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...
小程序实现星星评分(共10分),含有半星
完整代码地址:https://download.csdn.net/download/qq_40190624/11154051 效果图: 星星评分做为一个子组件,由父组件传入分值进行判断,具体显示几个灰 ...
css案例 - 评分效果的星星✨外衣
纳尼?什么星星外衣?好,直接上图比较能说清楚: 仔细看会发现规律:可以根据百分比/分值动态改变高亮星星的个数. 分步骤图: 这种效果,如果遇到一分一个星,没有半星(或者有也可以,直接加一个半星的类名) ...

js 星星评分 (根据数据显示星星个数)-----简版

纯属自己的想法

新的改变

js 星星评分 (根据数据显示星星个数)-----简版相关推荐

最新文章

热门文章