文献种类：专题技术文献；
开发工具与关键技术： DW、JS
作者：方建恒；年级：20级；撰写时间： 2021 年 11 月 8日

Layui-五星好评

我们在制作大多数页面或软件时，都会用到评分功能，
用于收集用户体验时的感受。
在这里我们将给大家提供一个便利的评分功能，
那就是Layui插件里的评分组件功能，
它可以帮助我们快速的编写好评分功能。
下面我们来使用Layui插件里的评分组件功能编写一下评分功能。
首先我们需要把Layui的脚本文件和叠层样式表引入，
然后创建一个id为test1的div标签，如图：

接下来是script部分，
我们先声明一下layui的评分插件，
然后对其进行渲染，并把容器绑定到之前创建的test1上。如图：

这样一个简单的评分功能就完成了，
实际效果如下图所示：

下面我们来给大家介绍一下Layui评分组件里的各个基础参数，

elem：
指向容器选择器，也就是我们用来放置评分功能的地方。
length：
用于设置评分组件中具体星星的个数。
一般为整数，所以设置了小数点的组件会默认向下取整。
默认值为5。
value：
用于设置评分的初始值，也就是星星的初始个数。
默认值为0。
theme：
用于设置主题颜色。
你可以根据自身喜好来更改组件的颜色，以适用不同场景。
默认值为#FFB800。
half：
用于设置组件是否可以选择半星。
默认值为false。
text：
用于设置是否显示评分对应的内容。
默认值为false。
readonly：
用于设置是否只读，即只用于展示而不可点。
默认值为false。

注：当你value的值为分数时，Layui会根据你是否开启半星功能做出不同的规范。

开启半星功能：
不论你的小数值是 0.1 还是 0.9，都统一规划为 0.5，
并且在文本开启的情况下，你可以看见你的分数并没有发生变化。
关闭半星功能：
当小数值大于 0.5 时，分数向上取整，如 3.7 分，则系统自动更改为 4 分。
当小数值小于等于 0.5 时，分数向下取整，如 3.1 分，则系统自动更改为 3 分。

如果在关闭半星功能的情况下开启了文本，你会发现你的分数也相应的变成了整数。
最后我们来学习一下自定义文本的回调：
在Layui中，当我们开启文本的情况时，
我们在点击星星时，他会在一旁提示相对应的星数。
若你不喜欢的话，你也可以进行自定义。
如下图代码：

当你点击 3 星时，文本内容是中等，
点击 5 星时，由于没有设定对应文字，所以文本会显示 5 星。
代码效果具体如下：

这样子layui的评分组件的功能就介绍完了。

Layui-五星好评相关推荐

java五星好评点评器_亲，麻烦给个五星好评！—RatingBar
引言上一篇的CheckBox已经让大家越来越接近实战演练了,本章我们继续分享干货给大家,今天介绍一个实用的UI控件RatingBar(星级评分条),对于使用过电商APP(某东,某宝等)的小伙伴们来说 ...
万份销量，五星好评！这门Python神作刷爆朋友圈！
2019年,有人说是Python元年,背靠AI和大数据,连续半年拿下TOP1编程语言,这些都给了Python的底气,所以无论是薪资还是招聘需求,都越来越多了! 同时,作为CSDN的首席编程小姐姐,我发 ...
Vue_实现五星好评效果
一.前言我们在做美团之类的app的时候,很多时候要显示五星好评,下面就用vue来实现这个将数字用图形显示的效果二.主要内容 1.将五星写在一个复用组件里面(因为在很多地方都会用到) <tem ...
前端实践小项目(一)五星好评与暂停取值
哈喽 ~ 大家好鸭!这篇我们来看看前端实践小项目第一篇 "五星好评与暂停取值"(底部有源代码) 目录五星好评(JS版) 五星好评(JQuery版) 暂停取值五星好评(JS版) ...
五星好评html编写,五星好评.html
五星好评 body{ /*文字大小12px,1.5倍的行间距 ,arial 一种字体*/ font: 12px/1.5 arial; color: #666; } ul,p{ margin: 0; p ...
java五星好评_亲，麻烦给个五星好评！—RatingBar
引言上一篇的CheckBox已经让大家越来越接近实战演练了,本章我们继续分享干货给大家,今天介绍一个实用的UI控件RatingBar(星级评分条),对于使用过电商APP(某东,某宝等)的小伙伴们来说 ...
java五星好评点评器_JavaScript实现商品评价五星好评
本文实例为大家分享了JavaScript实现商品评价五星好评的具体代码,供大家参考,具体内容如下一.效果展示二.代码实现 1.html代码好评 window.onload = function( ...
php+js 五星评价,基于jquery实现五星好评
这篇文章主要为大家详细介绍了基于jquery实现五星好评,具有一定的参考和学习jquery的价值,对jquery感兴趣的小伙伴们可以参考一下本篇文章在电商网站,我们经常会用到五星评分的功能,现在用j ...
使用jQuery实现五星好评
记得给五星好评哟 jQuery是js的一个库,封装了我们开发过程中常用的一些功能,方便我们来调用,提高了我们的开发效率. Js库是把我们常用的功能放到一个单独的文件中,我们用的时候,直接引用到页面里面 ...
【小程序实现五星好评功能】
** 小程序实现五星好评功能 ** ##功能实现如图实现功能如下: <image class="star-img" wx:for='{{list}}' wx:key='in ...

Layui-五星好评

Layui-五星好评

Layui-五星好评相关推荐

最新文章

热门文章