星级评价，点击星星进行评分

先贴一下效果图，是移动端和web端的通用功能：

css

.star {display: flex;width: 100%;justify-content: space-around;margin-top: 2rem;
}.ct-star {display: inline-block;margin: 0 1px;width: 4rem;height: 5rem;background: url(../../images/stars.png) no-repeat;
}.ic-star-off {display: inline-block;margin: 0 1px;width: 4rem;height: 5rem;background: url(../../images/stars-b.png) no-repeat;
}.star-Txt {width: 100%;color: #E7AA58;display: block;text-align: center;margin-top: 1rem;
}

html

<div class="star"><b class="ct-star  ic-star-off"></b><b class="ct-star  ic-star-off"></b><b class="ct-star  ic-star-off"></b><b class="ct-star  ic-star-off"></b><b class="ct-star  ic-star-off"></b>
</div>
<div id="starTxt" class="star-Txt"></div>

var aSpan = document.getElementsByClassName("star")[0];
var aStxt = document.getElementById("starTxt");
var aBstar = aSpan.getElementsByTagName("b");
var arrBtxt = ["很差，亟需改进", "较差，有待提高", "一般，仍需提升", "良好，比较满意", "优秀，非常满意"];
var num = 0;
var onOff = true;
for (var i = 0; i < aBstar.length; i++) {aBstar[i].index = i;//鼠标点击aBstar[i].onclick = function () {onOff = false;//开关为假就不执行鼠标移除的代码//先清空aStxt.textContent = "";for (var i = 0; i < aBstar.length; i++) {aBstar[i].setAttribute("class", "ic-star-off");}//点击当前星星，之前的都点亮包含自己num = this.index;aStxt.textContent = arrBtxt[num];$("#starLevel").val(num + 1);vm.starLevel = num + 1;//需要提交到后台的星级for (var i = 0; i <= this.index; i++) {aBstar[i].setAttribute("class", "ct-star");}};
}

用到的两类图片

星级评价，点击星星进行评分相关推荐

微信小程序星星评价，滑动星星评价+点击星星评价效果
思路:点击星星评价就不用说了,度娘上多得是.我们来说一说滑动评价效果. 1.利用小程序的bindtouchmovechu事件,不知道是啥的,点击这里:https://blog.csdn.net/cra ...
vue实现点击星星评分效果
vue实现点击星星评分效果首先通过引入bootcdn里的font-awesome获取星星素材 <link href="https://cdn.bootcdn.net/ajax/lib ...
星级评价组件--引发对React组件的思考
机缘巧合之下,我在接到我司产品星级评价需求的前一天,看到了蜗牛老湿的<★tiny-rate 东半球最小的评级组件☆>,在大佬的启发下我就十分顺手的撸了一个移动端用的星级评价组件. 本篇会涉 ...
微信小程序实现星级评价和效果展示
效果图片蓝色图片的颜色可以用 Photoshop CS6 更改,鼠标放在图片上可以看到图片的文字 WXML <view class="container">< ...
vue实现星级评价及上传多张图片等功能（类似淘宝商品评价页面）
最近在写一个关于vue的商城项目,然后集成在移动端中,开发需求中有一界面,类似淘宝商城评价界面!实现效果图如下所示: 评价页点击看大图,且可左右滑动功能需求分析默认为5颗星,为非常满意,4颗满意 ...
仿淘宝实现多行星级评价
最近再做一个评价功能,当时首先想到的是淘宝的评价功能,感觉那个不错,由于是初学者所以还不是很会,于是在网上百度了一下,我发现网上的都是只有一行星级评价功能,所以我在他 <script type= ...
vue实现一个星级打分效果_Vue实现星级评价效果
我们把星级评价单独做成一个Star组件,抽离出来,其中父组件中引入(传入的是评分的值) 初始Star.vue {{ score }} export default { name: 'Star', pr ...
vue实现一个星级打分效果_Vue实现星级评价效果实例详解
我们把星级评价单独做成一个Star组件,抽离出来,其中父组件中引入(传入的是评分的值) 初始Star.vue {{ score }} export default { name: 'Star', pr ...
java石头人,LOL英雄星级评价第一期:属于你的本命上单
导语:选择一个英雄是一个很重要的过程,尤其对于新手而言,当然对于高手之间的克制博弈也至关重要,所以往往我们玩好了一个英雄,可以让你终生受益,上单英雄星级评价,从各个角度更加直观的显示出每个英雄的优缺点 ...

星级评价，点击星星进行评分

星级评价，点击星星进行评分相关推荐

最新文章

热门文章