专栏首页小康的自留地五一假期小作业

五一假期小作业

JS版星级评分

如图所示,在曾经曾用CSS3的方案实现过。现在用JavaScript重新实现。

演示地址:https://gethtml.cn/project/2020/05/01/index.html

遇到的问题

  1. JavaScript不能直接操纵伪类元素,因此只能用控制类的方式
  2. 没有搞明白三种状况
    • 第一次点击
    • 第二次点击是加星还是减星
    • 判断循环判断循环(代码太烂
  3. 部分过渡动画存在一定缺陷
  4. 嵌套过于多(代码太烂

解决方案

  1. 由于五个五角星的实现依靠五个一模一样的<i>标签,因此使用事件委托方式
  2. 定义一个列表,用于存储当前页面中的所有星(<i>标签)
  3. 定义一个变量,用作用户是否第一次操作的标志。(即判断是否是第一次操作)
    • 如果是第一次操作,那么直接循环添加类名即可
    • 不是第一次操作,需要判断是否添加过类名
  4. 在用户第一次操作后,需要判断是加星还是减星 即判断当前点击的元素是否含有星
    • 如有有星星,取消右边和当前点击的星
    • 如果没有星,将左边所有未点亮的星和当前点击的星点亮

示例代码

<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>星星评级动态效果</title>
        <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/ionicons/4.5.6/css/ionicons.min.css'>

        <style>
            body {
                background: #222;
            }

            .rating {
                font-family: "Ionicons";
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
            }

            .rating i {
                position: relative;
                margin-right: 6px;
                font-size: 5em;
                color: gold;
                cursor: pointer;
            }

            .rating i:hover::before {
                content: "\f384";
                opacity: 1;
                transition: 0.5s;
                transform: scale(1.2);
            }

            .active::before {
                content: "\f384";
                opacity: 1;
                transition: 0.5s;
            }
        </style>
    </head>

    <body>
        <div class="rating">
            <i class="icon ion-md-star-outline"></i>
            <i class="icon ion-md-star-outline"></i>
            <i class="icon ion-md-star-outline"></i>
            <i class="icon ion-md-star-outline"></i>
            <i class="icon ion-md-star-outline"></i>
        </div>
        <script>
            var rating = document.getElementsByClassName('rating')[0]
            var icon = document.getElementsByClassName('icon')
            var iconList = []
            for (var i = 0; i < icon.length; i++) {
                iconList.push(icon[i])
            }
            // 没有点过
            var flag = true
            document.addEventListener('click', function (event) {
                var target = event.target
                if (target.nodeName === 'I') {
                    var num = iconList.indexOf(target)
                    if (flag) {
                        for (var j = 0; j <= num; j++) {
                            icon[j].className += " active"
                        }
                        flag = false
                    } else {
                        // 判断加还是取消
                        if (icon[num].className.indexOf(' active') === -1) {
                            // 没有找到,则添加
                            for (var m = num; m >= 0; m--) {
                                if (icon[m].className.indexOf(' active') === -1) {
                                    icon[m].className += " active"
                                }
                            }
                        } else {
                            // 否则,进行删星星
                            for (var i = num; i <= icon.length; i++) {
                                icon[i].className = icon[i].className.replace(' active', '')
                            }
                        }
                    }
                }
            })
        </script>
    </body>
</html>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • JavaScript面试题

    Dreamy.TZK
  • 08DOM相关概念叙述

    DOM是个缩写,全称是 Document Object Model,被译为文档对象模型。

    Dreamy.TZK
  • jQuery原理(DOM操作相关方法)

    删除所有的元素或指定元素。判断是否传入参数,如果传入参数,则删除指定元素,否则删除全部。

    Dreamy.TZK
  • 谈谈网站登录功能的渗透测试与漏洞修复办法

    从业渗透测试服务已经有十几年了,在对客户网站进行漏洞检测,安全渗透时,尤其网站用户登录功能上发现的漏洞很多,想总结一下在渗透测试过程中,网站登录功能上都存在哪些...

    技术分享达人
  • 如何对网站登录进行漏洞测试以及漏洞修复

    从业渗透测试服务已经有十几年了,在对客户网站进行漏洞检测,安全渗透时,尤其网站用户登录功能上发现的漏洞很多,想总结一下在渗透测试过程中,网站登录功能上都存在哪些...

    网站安全专家
  • ThinkPHP5 集成使用 Layui 穿梭框(transfer)控件

    泥豆芽儿 MT
  • Intellij idea配置Spark开发环境,统计哈姆雷特词频(2)

    中间层Spark,即核心模块Spark Core,必须在maven中引用。 编译Spark还要声明java8编译工具。

    birdskyws
  • Jupiter(Eclipse代码评审插件)简单总结

    1、Jupiter是开源的Eclipse代码评审插件,以XML形式存储review数据。 2、review数据需要在版本控制系统(CVS/SVN)中传递。...

    donghui
  • Struts2 动态结果和带参数的跳转

    完整代码:Struts16ActionResultsDemo.rar 1.动态结果。    有时我们需要在Action里取得我个要转跳的页面 看一下我们的str...

    lpxxn
  • JavaScript中Array数组的几种方法

    涉及到数组的问题,以前基本上我们都是采用for循环的方法来进行遍历,后来在ES5中新增了几种方法来方便我们遍历。这几种方法分别为:forEach(js v1.6...

    无邪Z

扫码关注云+社区

领取腾讯云代金券