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 相关文章推荐
比较简单实用的使用正则三种版本的js去空格处理方法
Nov 18 Javascript
对Jquery中的ajax再封装,简化操作示例
Feb 12 Javascript
jQuery中animate()方法用法实例
Dec 24 Javascript
使用javascript实现简单的选项卡切换
Jan 09 Javascript
Bootstrap CSS组件之面包屑导航(breadcrumb)
Dec 17 Javascript
浅谈Node模块系统及其模式
Nov 17 Javascript
JS运动特效之链式运动分析
Jan 24 Javascript
JavaScript面试出现频繁的一些易错点整理
Mar 29 Javascript
微信小程序的tab选项卡的实现效果
May 15 Javascript
基于javascript实现贪吃蛇小游戏
Nov 25 Javascript
如何基于layui的laytpl实现数据绑定的示例代码
Apr 10 Javascript
ES2020让代码更优美的运算符 (?.) (??)
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数字转汉字代码(算法)
2011/10/08 PHP
ThinkPHP模板范围判断输出In标签与Range标签用法详解
2014/06/30 PHP
javascript 关闭IE6、IE7
2009/06/01 Javascript
JavaScript中的prototype使用说明
2010/04/13 Javascript
使用变量动态设置js的属性名
2014/10/19 Javascript
基于javascript实现样式清新图片轮播特效
2016/03/30 Javascript
WebApi+Bootstrap+KnockoutJs打造单页面程序
2016/05/16 Javascript
jQuery的事件预绑定
2016/12/05 Javascript
Vue.js实现一个SPA登录页面的过程【推荐】
2017/04/29 Javascript
JS请求servlet功能示例
2017/06/01 Javascript
最全正则表达式总结:验证QQ号、手机号、Email、中文、邮编、身份证、IP地址等
2017/08/16 Javascript
nodejs实现大文件(在线视频)的读取
2020/10/16 NodeJs
vue.js 实现输入框动态添加功能
2018/06/25 Javascript
详解vue中的computed的this指向问题
2018/12/05 Javascript
Vue 样式绑定的实现方法
2019/01/15 Javascript
VUE简单的定时器实时刷新的实现方法
2019/01/20 Javascript
JS实现排行榜文字向上滚动轮播效果
2019/11/26 Javascript
JS继承实现方法及优缺点详解
2020/09/02 Javascript
[05:06]TI4西雅图DOTA2前线报道 海涛密探LGD训练
2014/07/09 DOTA
Python中下划线的使用方法
2015/03/27 Python
利用Python实现简单的相似图片搜索的教程
2015/04/23 Python
python去除所有html标签的方法
2015/05/05 Python
Python文件夹与文件的相关操作(推荐)
2016/07/25 Python
python使用Tkinter实现在线音乐播放器
2018/01/30 Python
Python实现的远程登录windows系统功能示例
2018/06/21 Python
Python 使用 attrs 和 cattrs 实现面向对象编程的实践
2019/06/12 Python
用python拟合等角螺线的实现示例
2019/12/27 Python
如何给Python代码进行加密
2020/01/10 Python
css3弹性盒子flex实现三栏布局的实现
2020/11/12 HTML / CSS
2014端午节活动策划方案
2014/01/27 职场文书
一年级数学教学反思
2014/02/01 职场文书
《母鸡》教学反思
2014/02/25 职场文书
小学数学教学经验交流材料
2014/05/22 职场文书
2014年校务公开工作总结
2014/12/18 职场文书
体育教师研修感悟
2015/11/18 职场文书
解决pytorch读取自制数据集出现过的问题
2021/05/31 Python