javascript实现的五星评价(版本1-1）

最近学了一个商品五星评价的案例，又稍加修改完善，基本和淘宝的评价效果一致。
运行效果如图所示。

这实际上是用了红白两张星星图片，鼠标移上时，红色星星，鼠标离开时，白色星星；点击时，锁定状态，再点击，解锁。
完整代码如下：


<!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);var flag=false;for(var i=0;i<imgList.length;i++){imgList[i].onmouseover= function(){if(!flag){var index = this.getAttribute("data-index");for(var j=0;j<index;j++){imgList[j].setAttribute("src","img/starred.png");} //index之前的红色星txt.innerHTML=comments[index-1];}else{return;}}imgList[i].onmouseout= function(){if(!flag){var index = this.getAttribute("data-index");for(var j=0;j<imgList.length;j++){imgList[j].src="img/starw.png";}txt.innerHTML="";}else{return;}}imgList[i].onclick = function(){flag=!flag;var index = this.getAttribute("data-index");for(var k=index;k<imgList.length;k++){imgList[k].setAttribute("src","img/starw.png");}  //index之后的置成白色星}}}function submit(){document.write('谢谢您的评价!');}</script>
</html>

javascript实现的五星评价(版本1-1）相关推荐

Vue手动封装实现一个五星评价得效果
我是歌谣放弃很难但是坚持一定很酷微信公众号关注小歌谣一起学习前后端知识今天要说得是实现一个vue中实现五星评价得效果简单来说就是封装组件把具体需要我们了解组件间得相互传值数据绑定等知 ...
JS写一个简单的五星评价
JS写一个简单的五星评价在做前端网页页面的时候很多时候回有遇到星级评价的模块,用到的地方挺多所以自己就上传下方便大家和自己使用(不支持半星评价因为没有半星的图). 效果图如下: 下面是我们的代码: ...
【jquery】优化仿淘宝五星评价打分(附注释)
在前面的博文http://blog.csdn.net/lzgs_4/article/details/47913629,我们已经把仿淘宝五星评价打分功能实现出来了,实现五星打分的思路基本就是前面博文提到 ...
【jQuery】仿淘宝五星评价打分的实现
我的上一篇博文写到了评价分数的五星显示,这篇博文将介绍如何实现打分的效果. 首先,我们还是先分析我们想要的效果. 1.当鼠标移到星星上面的时候,当前星星以及前面的星星要亮起来,然后星星的右侧出现提示语 ...
JavaScript判断浏览器类型及版本
JavaScript判断浏览器类型及版本你知道世界上有多少种浏览器吗?除了我们熟知的IE, Firefox, Opera, Safari四大浏览器之外,世界上还有近百种浏览器. 几天前,浏览器家族有 ...
微信小程序开发-五星评价
今天在做自己的小程序的时候做到一个对店铺的评价,文字什么的都很easy,遇到一个有趣的五星评价.先想到一个直接选择12345星的五星评价,以后有3星半的评价的效果再继续补充. 开始撸代码..... 首 ...
php做五星评价系统,微信小程序之五星评价功能制作
这篇文章主要介绍了微信小程序五星评价功能的实现的相关资料,这里附有实例代码及实现效果图,需要的朋友可以参考下微信小程序五星评价功能话不多说,我们来看一下效果图: 要实现的效果:点击到第几颗星, ...
微信小程序五星评价功能实现
实现五星评价功能,效果图如下: .wxml文件: <view class="star-title">1.品质效果</view><view class= ...
通俗易懂的五星评价代码——微信小程序如何展示像淘宝天猫那样五星好评？
项目背景 2020年起始,微信官方宣布支持小程序直播.陆续有很多的商家与开发者参与到这场微信生态直播大潮中,作为电商小程序评价内容必不可少的,官方没有提供评价组件只能自己动手丰衣足食.网上看了很多资料 ...

javascript实现的五星评价(版本1-1）

javascript实现的五星评价(版本1-1）相关推荐

最新文章

热门文章