网上商城五星评分效果

原创 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>

相关文章推荐

微信小程序如何开发?五星评分效果教程

很多做过电商项目的朋友会经常用到评分的功能,我这里正好写了一个例子,关于微信小程序如何开发问题,发出来分享一下...

【SSH网上商城项目实战27】域名空间的申请和项目的部署及发布

前面陆陆续续的完成了网上商城的一些基本功能,虽然还有很多地方有待完善,但是不影响项目的部署和发布,我们可以先来玩一把,这一节主要介绍下域名空间的申请以及项目的部署和发布流程。1. 域名空间的申请  作...
  • eson_15
  • eson_15
  • 2016年05月23日 22:20
  • 16766

【网上商城】--图片保存位置分析

【网上商城】--图片保存位置分析 小伙伴们在逛淘宝或者是京东的时候,都能看见一张张的图片,比如现在正值冬季,我们需要买一件羽绒服,打开淘宝,在搜索框中输入羽绒服,商家通过各种帅哥美女从不...
  • csnewdn
  • csnewdn
  • 2016年12月07日 14:30
  • 126

网上商城不同类别产品数据库的设计思路

问题的提出:网上商城对产品进行了很多分类,不同的分类产品又有不同的属性,比如,电脑的属性有:CUP,内存,                   主板,硬盘等等,服装的属性有:布料,尺寸,颜色等等,那么...

【SSH网上商城项目实战17】购物车基本功能的实现

上一节我们将商品的详细页面做完了,并使用了Hibernate的二级缓存加载详细页面来提高系统的性能。这节我们开始做购物车部分。 1. 添加新的表         首先我们向数据库中添加几张表:用户表、...
  • eson_15
  • eson_15
  • 2016年05月16日 14:25
  • 23301

JAVAWEB贵美网上商城完整项目源码(SSH2)

贵美网上商城原是北大青鸟的一个内部项目,项目采用 struts2+spring4+hibernate4+mysql等技术实现,数据库连接池采用c3p0的方式。 贵美商城包括前后台。 前台采用绚...

郑州网上商城建设有哪些要注意的开发事顶?

网上商城要发展成品牌,首先应该占据本地市场,启科网络专业网站设计有着多年的网上商城制作经验,自身也有着商城运营的经历,如果制作及维护好一个商城网站呢?    首先:了解每一位客户的需求“顾客是上帝”...

数据库篇之[bsp_adverts]数据表-网上商城BrnShop1.9升级至2.1升级说明(非官方版本)

asp.net(c#)网上商城BrnShop1.9升级至2.1升级说明(非官方版本) 数据库篇之[bsp_adverts]数据表主要描述在数据库方面进行升级(使用前请参照网上商城BrnShop1.9升...
  • virone
  • virone
  • 2015年01月23日 00:02
  • 671

【SSH网上商城项目实战23】完成在线支付功能

目录(?)[+]先写一个Model来封装参数payAction的实现Service层的实现strutsxml配置和payjsp页面   上一节我们做好了支付页面的显示,从上一节支付页面...

【Java】SSH网上商城错误及解决方案总结(一)

【前言】       SSH网上商城的那段日子已过去一段时间了,压箱底的bug们和解决方案也是一个自省的见证,于是就有这篇记录错误及解决方案的博客总结了。        终于有一篇分类总结自己项目...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:网上商城五星评分效果
举报原因:
原因补充:

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