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 相关文章推荐
简明json介绍
Sep 28 Javascript
使用JavaScript构建JSON格式字符串实现步骤
Mar 22 Javascript
javascript基本类型详解
Nov 28 Javascript
js漂浮广告实现代码
Aug 15 Javascript
详解JavaScript逻辑Not运算符
Dec 04 Javascript
js中判断变量类型函数typeof的用法总结
Aug 09 Javascript
Bootstrap模态框禁用空白处点击关闭
Oct 20 Javascript
Javascript同时声明一连串(多个)变量的方法
Jan 23 Javascript
JavaScript 斐波那契数列 倒序输出 输出100以内的质数代码实例
Sep 11 Javascript
在vue+element ui框架里实现lodash的debounce防抖
Nov 13 Javascript
vue tab切换,解决echartst图表宽度只有100px的问题
Jul 19 Javascript
ant design vue中日期选择框混合时间选择器的用法说明
Oct 27 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
example2.php
2006/10/09 PHP
让PHP以ROOT权限执行系统命令的方法
2011/02/10 PHP
php中的Base62类(适用于数值转字符串)
2013/08/12 PHP
php递归函数三种实现方法及如何实现数字累加
2015/08/07 PHP
动态刷新 dorado树的js代码
2009/06/12 Javascript
jQuery渐变发光导航菜单的实例代码
2013/03/27 Javascript
jquery datatable后台封装数据示例代码
2014/08/07 Javascript
jquery模拟alert的弹窗插件
2015/07/31 Javascript
详解JavaScript基于面向对象之创建对象(1)
2015/12/10 Javascript
jquery插件bootstrapValidator数据验证详解
2016/11/09 Javascript
利用Vue2.x开发实现JSON树的方法
2018/01/04 Javascript
nodejs实现一个word文档解析器思路详解
2018/08/14 NodeJs
JS事件绑定的常用方式实例总结
2019/03/02 Javascript
vue实现简单跑马灯效果
2020/05/25 Javascript
微信小程序绘制半圆(弧形)进度条
2020/11/18 Javascript
[04:29]【TI9采访】OG.N0tail在胜者组决赛后接受采访
2019/08/25 DOTA
微信跳一跳python辅助软件思路及图像识别源码解析
2018/01/04 Python
python中reader的next用法
2018/07/24 Python
python得到qq句柄,并显示在前台的方法
2018/10/14 Python
python DataFrame 取差集实例
2019/01/30 Python
在python plt图表中文字大小调节的方法
2019/07/08 Python
pytorch获取vgg16-feature层输出的例子
2019/08/20 Python
Python3如何使用range函数替代xrange函数
2020/10/05 Python
CSS伪类与CSS伪元素的区别及由来具体说明
2012/12/07 HTML / CSS
详解CSS3的opacity属性设置透明效果的用法
2016/05/09 HTML / CSS
婚前协议书范本
2014/04/15 职场文书
2014年医药代表工作总结
2014/11/22 职场文书
2014年人事行政工作总结
2014/12/03 职场文书
公司中层管理培训心得体会
2016/01/11 职场文书
CSS3实现的水平标题菜单
2021/04/14 HTML / CSS
如何理解PHP核心特性命名空间
2021/05/28 PHP
Axios取消重复请求的方法实例详解
2021/06/15 Javascript
关于springboot 配置date字段返回时间戳的问题
2021/07/25 Java/Android
python实现局部图像放大
2021/11/17 Python
Android Canvas绘制文字横纵向对齐
2022/06/05 Java/Android
MySQL分布式恢复进阶
2022/07/23 MySQL