在各大电商网站中我们购买过商品之后一般都会有一个评价界面，如下图：

　　用户没有评价的时候界面如下：

　　用户评价之后：如果点了1个星，后面会对应显示：差

　　 如果点了2个星，后面会对应显示：一般

　　 如果点了3个星，后面会对应显示：良好

　　 如果点了4个星，后面会对应显示：好

　　 如果点了5个星，后面会对应显示：非常好

　　那么这种评价效果应该怎么写呢?今天我就带着大家用js来写一写这个效果。

　　先明确目标：

　　默认情况下：先显示5个灰色的星星：

　　用户点几个星就让几个星亮起来，也就是用户点1个星，就让第一个星星变黄，用户点第二个星，就让前面2个星星都变黄，依次类推，用户点第5个星星，就让前面5个星星全部变黄。

　　写布局：

　　我们本案例用到的素材图如下：

　　从素材图上我们可以推出要实现评价的效果，默认应该是显示灰色图片，用户点击之后要显示黄色图片。

　　先写默认效果，在页面上写5个灰色的星星，最终要写出的效果如下：

　　标签结构如下：用1个li表示1个星星，因为总共需要5个星星，所以创建5个li标签。

    <!-- ul是放星星的盒子 -->
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
    <!-- 用来显示文字的，是差还是一般还是好等 -->
    <div class="text">一般</div>

　　写样式，css代码如下：

　　*{

　　padding: 0;

　　margin: 0;

　　}

　　ul{

　　overflow: hidden;

　　float: left;

　　}

　　li{

　　list-style: none;

　　/* 一个星星的宽高是28*28 */

　　width: 28px;

　　height: 28px;

　　/* 把素材图当作背景使用，设置不平铺 */

　　background: url(./img/star.gif) no-repeat;

　　/* 添加浮动，让5个星星横向排列 */

　　float: left;

　　}

　　.text{

　　float: left;

　　color: red;

　　font-weight: 700;

　　}

　　写js代码

　　标签结构写好之后，我们就需要用js来写逻辑代码了。

　　我们要完成的效果是：用户点击到第几个星星，就让第几个星星包括他之前的星全部变黄。

　　所以我们第一步需要给每个星星都添加一个点击事件，也就是给li添加点击事件。

　　// 获取到所有的li标签，lis是一个伪数组，里面就得到了所有的li

　　var lis = document.querySelectorAll('ul>li')

　　for(let i = 0;i<lis.length;i++){< p="">

　　lis[i].onclick = function(){

　　// 在这里可以用i表示当前点击的是第几个li标签

　　// 0表示点击的是第一个

　　// 1表示点击的是第二个

　　// 2表示点击的是第三个

　　console.log(i);

　　}

　　}

　　接下来就是：让i包括i之间的标签样式全部变黄。所以重新遍历lis这个数组。只要 j<=i筛选出来的就是i和i之前的标签

　　// 获取到所有的li标签，lis是一个伪数组，里面就得到了所有的li

　　var lis = document.querySelectorAll('ul>li')

　　for (let i = 0; i < lis.length; i++) {

　　lis[i].onclick = function () {

　　// 在这里可以用i表示当前点击的是第几个li标签

　　// 0表示点击的是第一个

　　// 1表示点击的是第二个

　　// 2表示点击的是第三个

　　// 让i包括i之间的标签样式全部变黄。

　　for (let j = 0; j < lis.length; j++) {

　　if (j <= i) {

　　// 满足条件就是i和i之前的

　　// 变黄只需调整背景图的位置即可

　　lis[j].style.backgroundPositionY = "-28px"

　　}

　　else {

　　// 不满足条件的一律变灰

　　lis[j].style.backgroundPositionY = "0px"

　　}

　　}

　　}

　　}

　　代码写到这里就已经实现评价的效果了，但是如果我们能在星星后面显示差、一般这样的字样就更好了。

　　一开始我们在写布局的时候创造了一个类名叫做tex的标签，我们就用这个标签来显示文字吧。

　　所以在js中获取到这个标签。

　　// 获取用来显示文字的标签。

　　var textEle = document.querySelector('.text')

　　// 准备用来显示的文字

　　var arr = ["差", "一般", "良好", "好", "非常好"]

　　在让星星变成黄色的if语句中添加一句如下代码：

　　// i就是第几个星星，是0就对应数组索引0的文字，i是1就对应数组索引1的文字。

　　textEle.innerText = arr[i]

　　到此我们的评价功能就写出来啦，各位小伙伴自己尝试一下吧。

　　奉上最终完整的js代码，复制就可以使用哦。

　　var lis = document.querySelectorAll('ul>li')

　　var textEle = document.querySelector('.text')

　　var arr = ["差", "一般", "良好", "好", "非常好"]

　　for (let i = 0; i < lis.length; i++) {

　　lis[i].onclick = function () {

　　for (let j = 0; j < lis.length; j++) {

　　if (j <= i) {

　　lis[j].style.backgroundPositionY = "-28px"

　　textEle.innerText = arr[i]

　　}

　　else {

　　lis[j].style.backgroundPositionY = "0px"

　　}

　　}

　　}

　　}

上一篇

QT使用教程之事件

下一篇

JS之元素获取方法