js实现星星打分效果


Posted in Javascript onJuly 05, 2020

本文实例为大家分享了js实现星星打分的具体代码,供大家参考,具体内容如下

最终效果如下

js实现星星打分效果

html部分

<div class="container">小主的评价:</div>
  <span></span>

css样式

<style>
    .star {
      font-size: 20px;
      color: gold;
      cursor: pointer;
    }

    .container {
      display: inline-block;
      text-align: center;
    }
</style>

js部分

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
 <script>
    $(function () {
      let count = 5
      let score = 3

      for (let i = 0; i < count; i++) {
        let star = $("<i/>").addClass("iconfont").addClass("star")
        if (i < score) star.addClass("icon-xingxing")
        else star.addClass("icon-xingxing1")

        $(".container").append(star)
      }

      $(".star").mouseenter(function () {
        let index = $(this).index()

        $(".star").each(function (i) {
          if (i <= index)
            $(this).addClass("icon-xingxing").removeClass("icon-xingxing1")
          else
            $(this).addClass("icon-xingxing1").removeClass("icon-xingxing")
        })
      })

      $(".star").mouseleave(function () {
        $(".star").each(function (i) {
          if (i < score)
            $(this).addClass("icon-xingxing").removeClass("icon-xingxing1")
          else
            $(this).addClass("icon-xingxing1").removeClass("icon-xingxing")
        })
      })

      $(".star").click(function () {
        score = $(this).index() + 1
        $("span").html(`${score}分`)

      })
      $("span").html(`${score}分`)

    })
</script>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
showModalDialog 和 showModelessDialog
Jan 22 Javascript
学习YUI.Ext 第六天--关于树TreePanel(Part 1)
Mar 10 Javascript
js面向对象 多种创建对象方法小结
May 21 Javascript
jQuery操作input type=radio的实现代码
Jun 14 Javascript
实例讲解JS中setTimeout()的用法
Jan 28 Javascript
基于javascript数组实现图片轮播
May 02 Javascript
浅析JavaScript中的特殊数据类型
Dec 15 Javascript
微信小程序之swiper滑动面板用法示例
Dec 04 Javascript
js中数组常用方法总结(推荐)
Apr 09 Javascript
vue-cli或vue项目利用HBuilder打包成移动端app操作
Jul 29 Javascript
基于vue中的scoped坑点解说
Sep 04 Javascript
Vue使用Ref跨层级获取组件的步骤
Jan 25 Vue.js
jQuery实现简单飞机大战
Jul 05 #jQuery
javascript实现贪吃蛇小练习
Jul 05 #Javascript
jQuery实现简单日历效果
Jul 05 #jQuery
jQuery实现飞机大战小游戏
Jul 05 #jQuery
原生js实现随机点名
Jul 05 #Javascript
实例讲解JavaScript 计时事件
Jul 04 #Javascript
vue实现导航菜单和编辑文本的示例代码
Jul 04 #Javascript
You might like
apache+php完美解决301重定向的两种方法
2011/06/08 PHP
WordPress伪静态规则设置代码实例
2020/12/10 PHP
ie focus bug 解决方法
2009/09/03 Javascript
jquery星级插件、支持页面中多次使用
2012/03/25 Javascript
javascript格式化json显示实例分析
2015/04/21 Javascript
jQuery中delegate()方法的用法详解
2016/10/13 Javascript
jQuery鼠标事件总结
2016/10/13 Javascript
自己封装的一个原生JS拖动方法(推荐)
2016/11/22 Javascript
在js中做数字字符串补0(js补零)
2017/03/25 Javascript
Javascript实现的StopWatch功能示例
2017/06/13 Javascript
写给vue新手们的vue渲染页面教程
2017/09/01 Javascript
详解如何在react中搭建d3力导向图
2018/01/12 Javascript
vue 子组件向父组件传值方法
2018/02/26 Javascript
vue axios基于常见业务场景的二次封装的实现
2018/09/21 Javascript
解决axios会发送两次请求,有个OPTIONS请求的问题
2018/10/25 Javascript
11个教程中不常被提及的JavaScript小技巧(推荐)
2019/04/17 Javascript
angularjs自定义过滤器demo示例
2019/08/24 Javascript
详解关于Vue单元测试的几个坑
2020/04/26 Javascript
Angular+ionic实现折叠展开效果的示例代码
2020/07/29 Javascript
vue+echarts+datav大屏数据展示及实现中国地图省市县下钻功能
2020/11/16 Javascript
[34:41]夜魇凡尔赛茶话会 第二期02:你画我猜
2021/03/11 DOTA
Python中用pycurl监控http响应时间脚本分享
2015/02/02 Python
如何在Python函数执行前后增加额外的行为
2016/10/20 Python
python中的计时器timeit的使用方法
2017/10/20 Python
Django model序列化为json的方法示例
2018/10/16 Python
python3.6利用pyinstall打包py为exe的操作实例
2018/10/31 Python
解决Django部署设置Debug=False时xadmin后台管理系统样式丢失
2020/04/07 Python
Nike台湾官方商店:Nike.com (TW)
2017/08/16 全球购物
Android笔试题总结
2014/11/29 面试题
怎么样写好简历中的自我评价
2013/10/25 职场文书
大学生活动策划方案
2014/02/10 职场文书
大四学生找工作的自荐信
2014/03/27 职场文书
学雷锋先进个人事迹
2014/05/26 职场文书
领导干部对照检查材料
2014/08/24 职场文书
印刷技术专业自荐信
2014/09/18 职场文书
2014年纳税评估工作总结
2014/12/23 职场文书