JavaScript实现星星评分

最新推荐文章于 2021-06-01 11:04:17 发布

是阿臻

最新推荐文章于 2021-06-01 11:04:17 发布

阅读量366

点赞数

文章标签： JavaScript

本文链接：https://blog.csdn.net/weixin_43191327/article/details/102532892

版权

利用JavaScript实现星星评分

使用了jQuery,其中实现了星星的动画,使用animate()方法.
其中主要思想就是在给每个span元素使用text()插入文本内容时全部添加上active类名,然后使用下面的click()方法和mouseleave()来进行星星最终状态是否被点亮,

遇到的问题

我的动画是改变了字体大小来实现的大小变化动画
其中遇到的问题,如果span元素没有被转化为盒子也就是块状元素,span元素即使转换为行内块元素,并且设定好宽度和高度,span元素的大小也是会跟着fontsize属性的值改变而改变,因为所有行内元素都具有一个隐形的空白节点会随着line-height等属性改变进而改变行内元素的大小,建议去看一下张鑫旭的css世界,这里我也解释不清,

代码奉上:一定要记得引入jQuery
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>

<style>
    * {
      margin: 0;
      padding: 0;
    }

    div {
      width: 600px;
      height: 100px;
      margin: 200px auto;
      font-size: 50px;
    }

    span {
      display: block;
      height: 20px;
      text-align: center;
      margin-right: 20px;
      float: left;
      width: 100px;
      color: yellow;
    }
  </style>
</head>

<body>
  <div>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
  </div>
</body>

此处是js代码

<script>
  $('span').text('☆');
  $('span').mouseenter(function () {
  //在这里给每一个span标签添加上avtive类名
    $('span').text('☆').addClass('active');
    $(this).text('★');
    $(this).prevAll().text('★');
    $(this).nextAll().text('☆');
    $(this).animate({
      fontSize: 70
    }, 'speed')
  })
 // 在这里是实现点击后让点击的星星和前面的星星被点亮,
  $('span').click(function () {
 // 这里移除被点击的span元素和它前面的span元素的类名,因为下面的mouseleave()方法 要改变所有带着active类名的span元素的点亮状态
    $(this).removeClass('active');
    $(this).prevAll().removeClass('active');

  })
 // mouseleave方法主要实现动画效果,没有太大用处
  $('span').mouseleave(function () {
    $(this).animate({
      fontSize: 50
    }, 'slow')
//这里是当鼠标离开装着span标签的父盒子,让所有带着active类名的span元素里面的星星全部取消点亮状态,因为刚才点击后部分星星的类名的被移除,
//所以只有点击的星星后面的星星才是没有点亮的,如果没有进行点击那么全部星星都不会被点亮
    $('div').mouseleave(function () {
      $('.active').text('☆');
    })
  })
</script>