网上商城五星评分效果

原创 2016年06月01日 11:44:43
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script>
        window.onload=function(){
            //获取图片元素存到arrs数组中
            var arrs=document.getElementsByTagName("img");
            for(var i=0;i<arrs.length;i++){
                arrs[i].setAttribute("index",i+1);
                arrs[i].onclick=function(){
                    var score=event.srcElement.getAttribute("index");
                    //得到点击后的分数
                    document.getElementById("score").innerHTML=score;
                    var nn=score-1;
                    for(var j=0;j<=nn;j++){
                        arrs[j].setAttribute("src","img/1star.gif");
                        //将点击的前面的星改为点亮状态
                    }
                    for(var k=nn+1;k<arrs.length;k++){
                        arrs[k].setAttribute("src","img/2star.gif");
                        //点击后面的星为熄灭状态
                    }
                }
            }
        }
    </script>


</head>
<body>
    <img src="img/2star.gif"/>
    <img src="img/2star.gif"/>
    <img src="img/2star.gif"/>
    <img src="img/2star.gif"/>
    <img src="img/2star.gif"/>
    <span id="score">0</span>分


</body>
</html>

【jquery】优化仿淘宝五星评价打分(附注释)

仿淘宝五星评价代码优化
  • LZGS_4
  • LZGS_4
  • 2015年09月08日 21:55
  • 3179

纯js实现类似淘宝星级评分功能

使用js实现简单星级评分
  • qq_35034870
  • qq_35034870
  • 2017年05月02日 21:37
  • 506

如何在iPhone 显示一个 星级评分

由于项目需求,需要做一个列表,里面有各个商品的评分,就是app store里面所有app的星级评分 下面是DisplayStarView.h // // DisplayStarView.h //...
  • fanjunxi1990
  • fanjunxi1990
  • 2013年03月12日 15:30
  • 7558

微信小程序开发之五星评分

一位同学说要写五星评分.要有半颗星的评分. 于是我做了个玩具. gif: 代码: 1.index.wxml ...
  • qq_31383345
  • qq_31383345
  • 2016年12月13日 23:53
  • 19303

JS特效-五星好评效果

入职之后,已经有一段时间没有写html代码了,或者应该说是没有比较全面的去编写HTML代码。想当初也是写出两个网页小游戏出来的人,数字拼图和推箱子。如今在工作中对前端代码的编写量相对来说较少,但是基础...
  • Alecor
  • Alecor
  • 2016年10月20日 00:08
  • 2090

【HTML】仿淘宝五星评价显示任何分数

最近做项目做到一个五星评分的,这个分数的显示,要精确到小数,就是如果分数是4.3分,就显示4.3颗星星,这个看上去好像挺难的,但是做起来很简单。 首先我们整理一下思路,这效果要怎么做出来,因为这个分数...
  • LZGS_4
  • LZGS_4
  • 2015年08月23日 22:51
  • 8435

微信小程序-五星评分功能

最近要做一个在微信小程序五星评分的功能代码如下:jsPage({ /** * 页面的初始数据 */ data: { starFlag:5 }, changeOne...
  • mcYang0929
  • mcYang0929
  • 2017年12月01日 14:42
  • 2961

ReactNative系列之十四评分效果的实现

1、写一个评星级的组件,在网上其它地方也没找到所以分享一下,效果图 2、使用方式 控件调用 星级选择后,设置属性方法,在主页在设置星级值 // 评分当前选中 _sel...
  • yeputi1015
  • yeputi1015
  • 2017年05月13日 08:25
  • 831

微信小程序开发之五星评分

一位同学说要写五星评分.要有半颗星的评分.  于是我做了个玩具.有空了做模块化,这代码看不下去了.  gif:  代码:  1.index.wxml block wx:for="{{...
  • sinat_17775997
  • sinat_17775997
  • 2016年12月15日 11:46
  • 446

ReactNative进阶之评分控件的封装

评分控件在原生开发中使用很广泛,android中叫做RatingBar,使用方式极其easy,不会用的可以单独找我私聊。今天的主题是使用reactnative来实现RatingBar的效果。...
  • ZACH_ZHOU
  • ZACH_ZHOU
  • 2017年05月24日 18:01
  • 509
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:网上商城五星评分效果
举报原因:
原因补充:

(最多只允许输入30个字)