javascript实现的淘宝五星评价（版本2）

今天又用了一下淘宝评价，发现淘宝评价不是鼠标移上去变化，而是直接用手点击。所以把前两天的代码又修改了一下，改成点击选中。

第一种实现方式

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>淘宝五星评分</title><style>#mark{width: 360px;}#mark img{width: 24px;height: 24px;}.pic{font-size: 24px;}.float_r{float: right;}</style></head><body><div id="wrap"><div id="mark"><div id="pic1" class="pic" onmouseover="comments(1)"><strong>描述相符</strong><img src="img/starw.png"  name="star1" data-index="1"><img src="img/starw.png"  name="star2" data-index="2"><img src="img/starw.png"  name="star3" data-index="3"><img src="img/starw.png"  name="star4" data-index="4"><img src="img/starw.png"  name="star5" data-index="5"><span id="txt1">  </span></div><div id="pic2" class="pic" onmouseover="comments(2)"><strong>物流服务</strong><img src="img/starw.png"  name="star1" data-index="1"><img src="img/starw.png"  name="star2" data-index="2"><img src="img/starw.png"  name="star3" data-index="3"><img src="img/starw.png"  name="star4" data-index="4"><img src="img/starw.png"  name="star5" data-index="5"><span id="txt2">    </span></div><div id="pic3" class="pic" onmouseover="comments(3)"><strong>服务态度</strong><img src="img/starw.png"  name="star1" data-index="1"><img src="img/starw.png"  name="star2" data-index="2"><img src="img/starw.png"  name="star3" data-index="3"><img src="img/starw.png"  name="star4" data-index="4"><img src="img/starw.png"  name="star5" data-index="5"><span id="txt3"></span></div><br><button type="button" class="float_r" onClick="submit()">提交评论</button></div><!--end mark--></div></body><script type="text/javascript">function comments(num){var pic = document.getElementById("pic"+num);var imgList = pic.getElementsByTagName("img");var comments=["非常差","差","一般","好","非常好"];var txt= document.getElementById("txt"+num);for(var i=0;i<imgList.length;i++){imgList[i].onclick= function(){var index = this.getAttribute("data-index");for(var j=0;j<index;j++){imgList[j].setAttribute("src","img/starred.png");}    //index之前的红色星for(var k=index;k<imgList.length;k++){imgList[k].setAttribute("src","img/starw.png");}  //index之后的白色星txt.innerHTML=comments[index-1];}} //end for} //end function commentsfunction submit(){document.write('谢谢您的评价!');}</script>
</html>

第二种实现方式

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>    淘宝五星评分click版</title><style type="text/css">img{height: 24px;width: 24px;}body{font-size: 24px;}</style></head><body><div id="pic1"><span>描述相符：</span><img data-index='1' src="img/starw.png" ><img data-index='2' src="img/starw.png" ><img data-index='3' src="img/starw.png" ><img data-index='4' src="img/starw.png" ><img data-index='5' src="img/starw.png" ><span></span></div><div id="pic2"><span>物流服务：</span><img data-index='1' src="img/starw.png" ><img data-index='2' src="img/starw.png" ><img data-index='3' src="img/starw.png" ><img data-index='4' src="img/starw.png" ><img data-index='5' src="img/starw.png" ><span></span></div> <div id="pic3"><span>服务态度：</span><img data-index='1' src="img/starw.png" ><img data-index='2' src="img/starw.png" ><img data-index='3' src="img/starw.png" ><img data-index='4' src="img/starw.png" ><img data-index='5' src="img/starw.png" ><span></span></div> </body><script type="text/javascript">var divs=document.querySelectorAll('div');for(var i=0;i<divs.length;i++){                //监听divdivs[i].addEventListener('mouseover',over);}function over(){                             //监听imgimgs=this.querySelectorAll('img');  //把var去掉，全局变量for(var k=0;k<imgs.length;k++){imgs[k].addEventListener('click',checked);}}function checked(){var index=this.getAttribute('data-index');var comments=["非常差","差","一般","好","非常好"];for(var j=0;j<index;j++){imgs[j].src='img/starred.png';}for(var j=index;j<imgs.length;j++){imgs[j].src='img/starw.png';}this.parentNode.lastElementChild.innerHTML=comments[index-1];}</script>
</html>

javascript实现的淘宝五星评价（版本2）相关推荐

【jquery】优化仿淘宝五星评价打分(附注释)
在前面的博文http://blog.csdn.net/lzgs_4/article/details/47913629,我们已经把仿淘宝五星评价打分功能实现出来了,实现五星打分的思路基本就是前面博文提到 ...
【jQuery】仿淘宝五星评价打分的实现
我的上一篇博文写到了评价分数的五星显示,这篇博文将介绍如何实现打分的效果. 首先,我们还是先分析我们想要的效果. 1.当鼠标移到星星上面的时候,当前星星以及前面的星星要亮起来,然后星星的右侧出现提示语 ...
【HTML】仿淘宝五星评价显示任何分数
最近做项目做到一个五星评分的,这个分数的显示,要精确到小数,就是如果分数是4.3分,就显示4.3颗星星,这个看上去好像挺难的,但是做起来很简单. 首先我们整理一下思路,这效果要怎么做出来,因为这个分数 ...
javascript实现的五星评价(版本1-1）
最近学了一个商品五星评价的案例,又稍加修改完善,基本和淘宝的评价效果一致. 运行效果如图所示. 这实际上是用了红白两张星星图片,鼠标移上时,红色星星,鼠标离开时,白色星星:点击时,锁定状态,再点击,解 ...
淘宝商品评价api接口(app、h5端)，淘宝评论视频API接口，淘宝评论API接口
淘宝商品评价api接口(app.h5端),淘宝评论视频API接口,淘宝评论API接口可以通过商品id,获取商品评价信息.评价内容.买家秀图片.评论浏览量.评价视频.评价追评等页面上展示的数据均可以拿到 ...
淘宝商品评价api接口，淘宝评论视频API接口，淘宝评论API接口(app、h5端）
淘宝商品评价api接口,淘宝评论视频API接口,淘宝评论API接口(app.h5端)可通过商品id,获取商品评价信息.评价内容.买家秀图片.评论浏览量.评价视频.评价追评等页面上展示的数据均可以拿到, ...
淘宝商品评价api接口（item_review-获得淘宝商品评论API接口），天猫商品评论API接口
淘宝商品评价api接口(item_review-获得淘宝商品评论API接口),天猫商品评论API接口可通过商品id,获取商品评价信息.评价内容.买家秀图片.评论浏览量.评价视频.评价追评等页面上的数据 ...
爬虫「Python」：一次登录，解决爬取淘宝商品评价繁杂的问题——简述 Headers 的使用
在爬取淘宝商品评价时,可能会被以下几个问题所困扰: (1)直接请求,服务器要求登录帐号,怎么登录? (2)请求到的网页 Html 怎么没有我要的评价信息? (3)等等下面介绍一下我使用的比较简单的获 ...
【爬虫】selenium+webdrive抓取淘宝商品评价
[爬虫]selenium+webdrive抓取淘宝商品评价爬虫小白入门 (声明:本人只是处于突如其来的兴趣学习一点点,水平实在不高,但在这个过程中也或多或少地解决了一些问题,所以对同为小白的朋友们或 ...

javascript实现的淘宝五星评价（版本2）

javascript实现的淘宝五星评价（版本2）相关推荐

最新文章

热门文章