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 相关文章推荐
jQuery EasyUI中DataGird动态生成列的方法
Apr 05 Javascript
纯JS打造网页中checkbox和radio的美化效果
Oct 13 Javascript
javascript中数组(Array)对象和字符串(String)对象的常用方法总结
Dec 15 Javascript
原生js实现图片放大缩小计时器效果
Jan 20 Javascript
vue.js全局API之nextTick全面解析
Jul 07 Javascript
axios中cookie跨域及相关配置示例详解
Dec 20 Javascript
JS实现图片居中悬浮效果
Dec 25 Javascript
让网站自动生成章节目录索引的多个js代码
Jan 07 Javascript
微信小程序scroll-view组件实现滚动动画
Jan 31 Javascript
Vue开发之封装上传文件组件与用法示例
Apr 25 Javascript
详解微信小程序回到顶部的两种方式
May 09 Javascript
js获取图片的base64编码并压缩
Dec 05 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 生成的XML以FLASH获取为乱码终极解决
2009/08/07 PHP
php更改目录及子目录下所有的文件后缀扩展名的代码
2010/10/12 PHP
深入解析php之sphinx
2013/05/15 PHP
深入Memcache的Session数据的多服务器共享详解
2013/06/13 PHP
codeigniter框架批量插入数据
2014/01/09 PHP
PHP、Python和Javascript的装饰器模式对比
2015/02/03 PHP
PHP中preg_match正则匹配中的/u、/i、/s含义
2015/04/17 PHP
PHP实现超简单的SSL加密解密、验证及签名的方法示例
2017/08/28 PHP
php实现微信小程序授权登录功能(实现流程)
2019/11/13 PHP
菜鸟javascript基础资料整理2
2010/12/06 Javascript
jQuery学习笔记(4)--Jquery中获取table中某列值的具体思路
2013/04/10 Javascript
js特殊字符过滤的示例代码
2014/03/05 Javascript
通过url查找a元素并点击
2014/04/09 Javascript
js判断当页面无法回退时关闭网页否则就history.go(-1)
2014/08/07 Javascript
轻松掌握JavaScript代理模式
2016/08/26 Javascript
微信小程序使用第三方库Underscore.js步骤详解
2016/09/27 Javascript
JS版微信6.0分享接口用法分析
2016/10/13 Javascript
Bootstrap导航条可点击和鼠标悬停显示下拉菜单
2016/11/25 Javascript
bootstrap table服务端实现分页效果
2017/08/10 Javascript
[02:29]大剑、皮鞭、女装,这届DOTA2勇士令状里都有
2020/07/17 DOTA
django 创建过滤器的实例详解
2017/08/14 Python
Python打印“菱形”星号代码方法
2018/02/05 Python
PyTorch快速搭建神经网络及其保存提取方法详解
2018/04/28 Python
django项目简单调取百度翻译接口的方法
2019/08/06 Python
总结Pyinstaller的坑及终极解决方法(小结)
2020/09/21 Python
使用html5实现表格实现标题合并的实例代码
2019/05/13 HTML / CSS
国际金融专业大学生职业生涯规划书
2013/12/28 职场文书
群众路线领导班子四风对照检查材料
2014/09/27 职场文书
敬老院活动感想
2015/08/07 职场文书
创业计划书之暑假培训班
2019/11/09 职场文书
Python中快速掌握Data Frame的常用操作
2021/03/31 Python
CocosCreator如何实现划过的位置显示纹理
2021/04/14 Javascript
Java实现聊天机器人完善版
2021/07/04 Java/Android
PO模式在selenium自动化测试框架的优势
2022/03/20 Python
vue实现列表垂直无缝滚动
2022/04/08 Vue.js
MySQL数据库查询进阶之多表查询详解
2022/04/08 MySQL