JS实现评价的星星功能

来源：懂视网责编：小采时间：2020-11-27 22:32:05

JS实现评价的星星功能

JS实现评价的星星功能:刚开始接触写星星评价时，哇！估计脑子刚被驴踢了，竟然想到了最笨的办法-手工画五角星。妈呀！ css样式都写了好大一串，还沾沾自喜终于画出来了，然后瞅一瞅旁边的妹子写得怎么样了，哇！人家机智的！直接用符号★就解决了。唉，智商捉急呀！先上图看看

推荐度：

点击下载本文 文档为doc格式

导读JS实现评价的星星功能:刚开始接触写星星评价时，哇！估计脑子刚被驴踢了，竟然想到了最笨的办法-手工画五角星。妈呀！ css样式都写了好大一串，还沾沾自喜终于画出来了，然后瞅一瞅旁边的妹子写得怎么样了，哇！人家机智的！直接用符号★就解决了。唉，智商捉急呀！先上图看看

刚开始接触写星星评价时，哇！估计脑子刚被驴踢了，竟然想到了最笨的办法-手工画五角星。妈呀！ css样式都写了好大一串，还沾沾自喜终于画出来了，然后瞅一瞅旁边的妹子写得怎么样了，哇！人家机智的！直接用符号★就解决了！！！唉，智商捉急呀！

先上图看看吧：

虽然简单，还是有几个注意的地方：

1. 未点击时的hover效果，星星会随鼠标移动亮起来喔。

2. 点击后关闭hover效果。

3. 点击同一颗星星，星星可以随时换色。

具体代码展示：

<!doctype html>
<html>
 <head>
 <meta charset="UTF-8">
 <title></title>
 <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
 </head>
 <style type="text/css">
 .stars{
 white-space: nowrap;
 text-align: center;
 margin-top: 20px;
 margin-bottom: 20px;
 }
 .stars li{
 display: inline-block;
 color: #ADADAD;
 font-size: 40px;
 }
 </style>
 <body>
 <ul class="stars">
 <li>★</li>
 <li>★</li>
 <li>★</li>
 <li>★</li>
 <li>★</li>
 </ul>
 <script src="../../js/common/jquery-git.js"></script>
 <script>
 $(function() {
 //为星星设置hover效果
 var isClicked = false;
 var beforeClickedIndex = -1;
 var clickNum = 0; //点击同一颗星次数
 $('li').hover(
 function() {
 if(!isClicked) {
 $(this).css('color', '#F0AD4E');
 var index = $(this).index();
 for(var i = 0; i <= index; i++) {
 $('li:nth-child(' + i + ')').css('color', '#F0AD4E');
 }
 }
 },
 function() {
 if(!isClicked) {
 $('li').css('color', '#ADADAD');
 }
 }
 );
 //星星点击事件
 $('li').click(function() {
 $('li').css('color', '#ADADAD');
 isClicked = true;
 var index = $(this).index();
 for(var i = 1; i <= index+1; i++) {
 $('li:nth-child(' + i + ')').css('color', '#F0AD4E');
 }
 if(index == beforeClickedIndex) { //两次点击同一颗星星 该星星颜色变化
 clickNum++;
 if(clickNum % 2 == 1) {
 $('li:nth-child(' + (index + 1) + ')').css('color', '#ADADAD');
 } else {
 $('li:nth-child(' + (index + 1) + ')').css('color', '#F0AD4E');
 }
 } else {
 clickNum = 0;
 beforeClickedIndex = index;
 }
 });
 });
 </script>
 </body>
</html>

总结

以上所述是小编给大家介绍的JS实现评价的星星功能，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的！

JS实现评价的星星功能

推荐度：

点击下载本文 文档为doc格式

标签：功能星星功能的

热门焦点

JS实现评价的星星功能

JS实现评价的星星功能

JS实现评价的星星功能

最新推荐

猜你喜欢

热门推荐