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 相关文章推荐
解决css和js的{}与smarty定界符冲突问题的两种方法
Sep 10 Javascript
解决html按钮切换绑定不同函数后点击时执行多次函数问题
May 14 Javascript
JavaScript中判断原生函数检查function是否是原生代码
Sep 09 Javascript
js点击button按钮跳转到另一个新页面
Oct 10 Javascript
javascript实现一个数值加法函数
Jun 26 Javascript
BootStrap智能表单实战系列(四)表单布局介绍
Jun 13 Javascript
原生JS京东轮播图代码
Mar 22 Javascript
vue中前进刷新、后退缓存用户浏览数据和浏览位置的实例讲解
Sep 21 Javascript
配置eslint规范项目代码风格
Mar 11 Javascript
js实现鼠标拖拽缩放div实例代码
Mar 25 Javascript
简单了解JavaScript中常见的反模式
Jun 21 Javascript
JavaScript 实现HTML DOM增删改查操作的常见方法详解
Jan 04 Javascript
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
php下通过IP获取地理位置的代码(小偷程序)
2011/06/09 PHP
Laravel模板引擎Blade中section的一些标签的区别介绍
2015/02/10 PHP
如何利用PHP实现上传图片功能详解
2020/09/24 PHP
JavaScript DOM 添加事件
2009/02/14 Javascript
解决jquery的datepicker的本地化以及Today问题
2012/05/23 Javascript
jQuery的animate函数学习记录
2014/08/08 Javascript
使用Javascript写的2048小游戏
2015/11/25 Javascript
jquery dialog获取焦点的方法
2017/02/09 Javascript
js 调用百度分享功能
2017/02/27 Javascript
jquery中关于bind()方法的使用技巧分享
2017/03/30 jQuery
Node.js学习之地址解析模块URL的使用详解
2017/09/28 Javascript
详解基于vue的服务端渲染框架NUXT
2018/06/20 Javascript
Vue子组件向父组件通信与父组件调用子组件中的方法
2018/06/22 Javascript
原生JS+HTML5实现的可调节写字板功能示例
2018/08/30 Javascript
详解mpvue小程序中怎么引入iconfont字体图标
2018/10/01 Javascript
Vue实现本地购物车功能
2018/12/05 Javascript
小程序server请求微信服务器超时的解决方法
2019/05/21 Javascript
对TypeScript库进行单元测试的方法
2019/07/18 Javascript
开源Web应用框架Django图文教程
2017/03/09 Python
Python查找第n个子串的技巧分享
2018/06/27 Python
python 已知三条边求三角形的角度案例
2020/04/12 Python
哪些是python中web开发框架
2020/06/17 Python
使用Keras中的ImageDataGenerator进行批次读图方式
2020/06/17 Python
高中毕业生自我鉴定范文
2013/09/26 职场文书
策划助理岗位职责
2013/11/18 职场文书
护士的岗位职责
2013/12/04 职场文书
酒吧副总经理岗位职责
2013/12/10 职场文书
公司财务总监岗位职责
2013/12/14 职场文书
白岩松演讲
2014/05/21 职场文书
婚内分居协议书范文
2014/11/26 职场文书
仓管员岗位职责
2015/02/03 职场文书
2015年高三班主任工作总结
2015/05/21 职场文书
SQLServer2019 数据库的基本使用之图形化界面操作的实现
2021/04/08 SQL Server
基于Redis过期事件实现订单超时取消
2021/05/08 Redis
HTML基础详解(下)
2021/10/16 HTML / CSS
基于Apache Hudi在Google云构建数据湖平台的思路详解
2022/04/07 Servers