JavaScript制作淘宝星级评分效果的思路


Posted in Javascript onJune 23, 2020

小编也是刚开始学JavaScript,觉得淘宝评星效果很棒,于是产生了自己写一个的想法,先给大家分享一下实现效果:

JavaScript制作淘宝星级评分效果的思路

现附上自己写的源代码

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <script language="JavaScript" type="text/javascript">
 function star(n)
 {
  var array=new Array();
  array[0]=document.getElementById("oneStar");
  array[1]=document.getElementById("twoStar");
  array[2]=document.getElementById("threeStar");
  array[3]=document.getElementById("fourStar");
  array[4]=document.getElementById("fiveStar");
  for(var i=0;i<=n;i++)
  {
  array[i].innerText="★";
  }
  for( var j=4;j>n;j--)
  {
  array[j].innerText="☆";
  }
  document.getElementById("evaluate").innerText="您的评价是"+(n+1)+"星";
 }
 </script>
 <title>评星</title>
</head>
<body>
<strong>请您对我们作出评价:</strong>
<span id="star">
 <span style="cursor: pointer " onclick="star(0)"id="oneStar" >☆</span>
 <span style="cursor: pointer " onclick="star(1)" id="twoStar" >☆</span>
 <span style="cursor: pointer " onclick="star(2)" id="threeStar" >☆</span>
 <span style="cursor: pointer " onclick="star(3)" id="fourStar" >☆</span>
 <span style="cursor: pointer " onclick="star(4)" id="fiveStar" >☆</span>
</span><span id="evaluate"></span>

</body>
</html>

一开始的时候用了两个for循环就是这样的:

for(var i=0;i<=n;i++)
  {
  document.getElementById("fiveStar").innerText="★";
  }
  for( var j=4;j>n;j--)
  {
  document.getElementById("fiveStar").innerText="☆";
  }

大神们估计已经看出来了,在for循环之后HTML里的span已经失去了作用,也就是说它只能评价一次.....
于是顺着这个思路想到了用数组解决这个问题,就是让评星效果里的每一颗星储存到数组里,写出了上述的代码,可楼主还犯了一个小错误,着实困恼了许久....
array[0]=document.getElementById("oneStar").innerText;
通过这样定义的数组....结果可想而知,后面的代码根本无法改变评星,后来意识到,这样的定义直接将ID为onestar的元素的内容赋值给了数组,也就是说数组成了一个指向数组的指针....自然无法改变对应元素的值.后来总算明白了....
之后又加了一些CSS效果
成品是这样的:

<!DOCTYPE html>
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
 <title>淘宝评分效果</title>
 <style type="text/css">
 ul, li {margin: 0; padding: 0; border: 0;}
 .shop-rating {
  height: 25px;
  overflow: hidden;
  zoom: 1;
  padding: 2px 0;
  position: relative;
  z-index: 999;
  font:12px Arial;
  color:#000;
  line-height:1.2em
 }
 .shop-rating span {
  height: 23px;
  display: block;
  line-height: 23px;
  float: left;
 }
 .shop-rating span.title {
  width: 125px;
  text-align: right;
  margin-right: 5px;
 }
 .shop-rating ul {
  float: left;
 }
 .shop-rating .result {
  margin-left: 20px;
  padding-top: 2px;
 }
 .shop-rating .result span {
  color: #ff6d02;
 }
 .rating-level,
 .rating-level a {
  background: url(//img.jbzj.com/demoimg/201007/o_star.png) no-repeat scroll 1000px 1000px;
 }
 .rating-level {
  background-position: 0px 0px;
  width: 120px;
  height: 23px;
  position: relative;
  z-index: 1000;
 }
 .shop-rating .result em {
  color: #f60;
  font-family: arial;
  font-weight: bold;
 }
 .rating-level li {
  display: inline;
 }
 .rating-level a {
  line-height: 23px;
  height: 23px;
  position: absolute;
  top: 0px;
  left: 0px;
  text-indent: -999em;
  *zoom: 1;
  outline: none;
 }
 .rating-level a.one-star {
  width: 20%;
  z-index: 6;
 }
 .rating-level a.two-stars {
  width: 40%;
  z-index: 5;
 }
 .rating-level a.three-stars {
  width: 60%;
  z-index: 4;
 }
 .rating-level a.four-stars {
  width: 80%;
  z-index: 3;
 }
 .rating-level a.five-stars {
  width: 100%;
  z-index: 2;
 }
 .rating-level .current-rating, .rating-level a:hover {background-position:0 -28px}
 .rating-level a.one-star:hover,.rating-level a.two-stars:hover,.rating-level a.one-star.current-rating,.rating-level a.two-stars.current-rating{background-position:0 -116px;}
 .rating-level .three-stars .current-rating,.rating-level .four-stars .current-rating,.rating-level .five-stars .current-rating{background-position:0 -28px;}
 </style>
</head>
<body>
<div class="shop-rating">
 <span class="title">你对我人品的评价:</span>
 <ul class="rating-level" id="stars2">
 <li><a href="javascript:void(0);" class="one-star" star:value="20">20</a></li>
 <li><a href="javascript:void(0);" class="two-stars" star:value="40">40</a></li>
 <li><a href="javascript:void(0);" class="three-stars" star:value="60">60</a></li>
 <li><a href="javascript:void(0);" class="four-stars" star:value="80">80</a></li>
 <li><a href="javascript:void(0);" class="five-stars" star:value="100">100</a></li>
 </ul>
 <span id="stars2-tips" class="result"></span>
 <input type="hidden" id="stars2-input" name="b" value="" size="2" />
</div>
<script>
 var TB = function() {
 var T$ = function(id) { return document.getElementById(id) }
 var T$$ = function(r, t) { return (r || document).getElementsByTagName(t) }
 var Stars = function(cid, rid, hid, config) {
  var lis = T$$(T$(cid), 'li'), curA;
  for (var i = 0, len = lis.length; i < len; i++) {
  lis[i]._val = i;
  lis[i].onclick = function() {
   T$(rid).innerHTML = '<em>' + (T$(hid).value = T$$(this, 'a')[0].getAttribute('star:value')) + '分</em> - ' + config.info[this._val];
   curA = T$$(T$(cid), 'a')[T$(hid).value / config.step - 1];
  };
  lis[i].onmouseout = function() {
   curA && (curA.className += config.curcss);
  }
  lis[i].onmouseover = function() {
   curA && (curA.className = curA.className.replace(config.curcss, ''));
  }
  }
 };
 return {Stars: Stars}
 }().Stars('stars2', 'stars2-tips', 'stars2-input', {
 'info' : ['人品极差', '人品不咋地', '人品一般吧', '人品不错', '人品极好啊'],
 'curcss': ' current-rating',
 'step': 20
 });
</script>
</body>
</html>

以上就是JavaScript制作淘宝星级评分效果的思路,语言很直白,易理解,希望对大家的学习有所帮助,和小编一起去探索javascript更多的神奇之处,共同进步。

Javascript 相关文章推荐
JS 树形递归实例代码
May 18 Javascript
jQuery列表拖动排列具体实现
Nov 04 Javascript
Jquery easyui 实现动态树
Nov 17 Javascript
jQuery实现下拉框功能实例代码
May 06 Javascript
Bootstrap弹出框modal上层的输入框不能获得焦点问题的解决方法
Dec 13 Javascript
浅谈jQuery中的$.extend方法来扩展JSON对象
Feb 12 Javascript
Angularjs 实现动态添加控件功能
May 25 Javascript
微信小程序左滑动显示菜单功能的实现
Jun 14 Javascript
dts文件中删除一个node或属性的操作方法
Aug 05 Javascript
vuejs router history 配置到iis的方法
Sep 20 Javascript
vue中render函数的使用详解
Oct 12 Javascript
es6中Promise 对象基本功能与用法实例分析
Feb 23 Javascript
jquery动态增加删减表格行特效
Nov 20 #Javascript
跟我学习javascript的异步脚本加载
Nov 20 #Javascript
JavaScript获取各大浏览器信息图示
Nov 20 #Javascript
跟我学习javascript创建对象(类)的8种方法
Nov 20 #Javascript
跟我学习javascript的最新标准ES6
Nov 20 #Javascript
详解JavaScript语言的基本语法要求
Nov 20 #Javascript
每天一篇javascript学习小结(面向对象编程)
Nov 20 #Javascript
You might like
PHP4中实现动态代理
2006/10/09 PHP
PHP文件操作实现代码分享
2011/09/01 PHP
PHP获取指定日期是星期几的实现方法
2016/11/30 PHP
Javascript下的keyCode键码值表
2007/04/10 Javascript
向大师们学习Javascript(视频与PPT)
2009/12/27 Javascript
通过js动态操作table(新增,删除相关列信息)
2012/05/23 Javascript
javascript简单性能问题及学习笔记
2014/02/04 Javascript
用js判断输入是否为中文的函数
2014/03/10 Javascript
jQuery学习笔记之Ajax用法实例详解
2015/12/01 Javascript
基于Javascript实现弹出页面效果
2016/01/01 Javascript
js获取页面引用的css样式表中的属性值方法(推荐)
2016/08/19 Javascript
Bootstrap栅格系统的使用和理解2
2016/12/14 Javascript
Bootstrap 轮播(Carousel)插件
2016/12/26 Javascript
jQuery表单元素选择器代码实例
2017/02/06 Javascript
浅谈js中的this问题
2017/08/31 Javascript
BetterScroll 在移动端滚动场景的应用
2017/09/18 Javascript
JS使用正则表达式实现常用的表单验证功能分析
2020/04/30 Javascript
我所理解的JavaScript中的this指向
2020/09/04 Javascript
Python中的生成器和yield详细介绍
2015/01/09 Python
Python装饰器的函数式编程详解
2015/02/27 Python
python利用urllib和urllib2访问http的GET/POST详解
2017/09/27 Python
python opencv3实现人脸识别(windows)
2018/05/25 Python
Python发送邮件测试报告操作实例详解
2018/12/08 Python
对python生成业务报表的实例详解
2019/02/03 Python
Pyqt5实现英文学习词典
2019/06/24 Python
Python collections模块使用方法详解
2019/08/28 Python
实例讲解使用CSS实现多边框和透明边框的方法
2015/09/08 HTML / CSS
将SVG图引入到HTML页面的实现
2019/09/20 HTML / CSS
应届大学生自荐信
2013/12/05 职场文书
大学军训感言1000字
2014/02/25 职场文书
原材料检验岗位职责
2014/03/15 职场文书
个人四风问题对照检查材料
2014/09/26 职场文书
2015年全国“爱牙日”宣传活动总结
2015/03/23 职场文书
副校长2015年教育教学工作总结
2015/07/27 职场文书
python字典的元素访问实例详解
2021/07/21 Python
vue使用echarts实现折线图
2022/03/21 Vue.js