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 相关文章推荐
jquery $.ajax相关用法分享
Mar 16 Javascript
JS实现悬浮移动窗口(悬浮广告)的特效
Mar 12 Javascript
jQuery事件绑定on()、bind()与delegate() 方法详解
Jun 03 Javascript
js获取新浪天气接口的实现代码
Jun 06 Javascript
微信开发 微信授权详解
Oct 21 Javascript
实例解析jQuery中如何取消后续执行内容
Dec 01 Javascript
JS实现超简单的汉字转拼音功能示例
Dec 22 Javascript
JS闭包可被利用的常见场景小结
Apr 09 Javascript
javascript+html5+css3自定义提示窗口
Jun 21 Javascript
微信禁止下拉查看URL的处理方法
Sep 28 Javascript
VUE解决微信签名及SPA微信invalid signature问题(完美处理)
Mar 29 Javascript
原生js实现日历效果
Mar 02 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
在PHP3中实现SESSION的功能(二)
2006/10/09 PHP
php getsiteurl()函数
2009/09/05 PHP
PHP strstr 函数判断字符串是否否存在的实例代码
2013/09/28 PHP
php使用json_encode对变量json编码
2014/04/07 PHP
使用PHPCMS搭建wap手机网站
2015/09/20 PHP
详解php curl带有csrf-token验证模拟提交方法
2018/04/18 PHP
jquery的ajax从纯真网(cz88.net)获取IP地址对应地区名
2009/12/02 Javascript
JSONP跨域的原理解析及其实现介绍
2014/03/22 Javascript
jquery checkbox 勾选的bug问题解决方案与分析
2014/11/13 Javascript
jQuery检查事件是否触发的方法
2015/06/26 Javascript
浅析Node.js 中 Stream API 的使用
2015/10/23 Javascript
微信小程序 两种滑动方式(横向滑动,竖向滑动)详细及实例代码
2017/01/13 Javascript
详解angular2采用自定义指令(Directive)方式加载jquery插件
2017/02/09 Javascript
使用vue.js编写蓝色拼图小游戏
2017/03/17 Javascript
yarn的使用与升级Node.js的方法详解
2017/06/04 Javascript
vue自定义指令directive实例详解
2018/01/17 Javascript
JS简单生成由字母数字组合随机字符串示例
2018/05/25 Javascript
vue-image-crop基于Vue的移动端图片裁剪组件示例
2018/08/28 Javascript
Vue-Cli 3.0 中配置高德地图的两种方式
2019/06/19 Javascript
使用layer.msg 时间设置不起作用的解决方法
2019/09/12 Javascript
简单介绍Python中的JSON使用
2015/04/28 Python
Python神奇的内置函数locals的实例讲解
2019/02/22 Python
Django CBV与FBV原理及实例详解
2019/08/12 Python
python性能测量工具cProfile使用解析
2019/09/26 Python
python图形用户接口实例详解
2019/12/16 Python
Python如何把多个PDF文件合并代码实例
2020/02/13 Python
详解Python yaml模块
2020/09/23 Python
Tech21美国/加拿大:英国NO.1防摔保护壳品牌
2018/01/20 全球购物
万豪国际住宅与别墅集团:Homes & Villas by Marriott International
2020/10/08 全球购物
shell的种类有哪些
2015/04/15 面试题
仓库门卫岗位职责
2013/12/22 职场文书
国庆节活动总结
2014/08/26 职场文书
应届生个人的求职(自荐信范文2篇)
2019/08/23 职场文书
Mysql 如何查询时间段交集
2021/06/08 MySQL
Python可视化学习之seaborn绘制矩阵图详解
2022/02/24 Python
SQL Server使用PIVOT与unPIVOT实现行列转换
2022/05/25 SQL Server