最近再做一个评价功能,当时首先想到的是淘宝的评价功能,感觉那个不错,由于是初学者所以还不是很会,于是在网上百度了一下,我发现网上的都是只有一行星级评价功能,所以我在他

<script type="text/javascript" >var Class = {create: function() {return function() { this.initialize.apply(this, arguments); }}
}
var Extend = function(destination, source) {for (var property in source) {destination[property] = source[property];}
}
function stopDefault( e ) {if ( e && e.preventDefault ){e.preventDefault();}else{window.event.returnValue = false;}return false;
} var Stars = Class.create();
Stars.prototype = {initialize: function(star,options) {this.SetOptions(options); //默认属性var flag = 999; //定义全局指针var isIE = (document.all) ? true : false; //IE?var starlist = document.getElementById(star).getElementsByTagName('a'); //星星列表var input = document.getElementById(this.options.Input) || document.getElementById(star+"-input"); // 输出结果var tips = document.getElementById(this.options.Tips) || document.getElementById(star+"-tips"); // 打印提示var nowClass = " " + this.options.nowClass; // 定义选中星星样式名var tipsTxt = this.options.tipsTxt; // 定义提示文案var len = starlist.length; //星星数量for(i=0;i<len;i++){ // 绑定事件 点击 鼠标滑过starlist[i].value = i;starlist[i].onclick = function(e){stopDefault(e);this.className = this.className + nowClass;flag = this.value;input.value = this.getAttribute("star:value");tips.innerHTML = tipsTxt[this.value]}starlist[i].onmouseover = function(){if (flag< 999){var reg = RegExp(nowClass,"g");starlist[flag].className = starlist[flag].className.replace(reg,"")}}starlist[i].onmouseout = function(){if (flag< 999){starlist[flag].className = starlist[flag].className + nowClass;}}};if (isIE){ //FIX IE下样式错误var li = document.getElementById(star).getElementsByTagName('li');for (var i = 0, len = li.length; i < len; i++) {var c = li[i];if (c) {c.className = c.getElementsByTagName('a')[0].className;}}}},//设置默认属性SetOptions: function(options) {this.options = {//默认值Input:          "",//设置触保存分数的INPUTTips:           "",//设置提示文案容器nowClass:   "current-rating",//选中的样式名tipsTxt:        ["1分-严重不合格","2分-不合格","3分-合格","4分-优秀","5分-完美"]//提示文案
        };Extend(this.options, options || {});}
}
var Stars1 = new Stars("stars1")
var Stars2 = new Stars("stars2")
var Stars3 = new Stars("stars3")
var Stars4 = new Stars("stars4")

仿淘宝实现多行星级评价相关推荐

  1. 基于BootStrap仿淘宝星星商品评价案例

    <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...

  2. 【jquery】优化仿淘宝五星评价打分(附注释)

    在前面的博文http://blog.csdn.net/lzgs_4/article/details/47913629,我们已经把仿淘宝五星评价打分功能实现出来了,实现五星打分的思路基本就是前面博文提到 ...

  3. 【jQuery】仿淘宝五星评价打分的实现

    我的上一篇博文写到了评价分数的五星显示,这篇博文将介绍如何实现打分的效果. 首先,我们还是先分析我们想要的效果. 1.当鼠标移到星星上面的时候,当前星星以及前面的星星要亮起来,然后星星的右侧出现提示语 ...

  4. 仿淘宝中的评价晒单中选择图片可以预览,添加,删除

    前一篇文章写了如何把input="file"的默认样式改为自己想要的样式所以这篇是在这个的基础上写的,也就是说改变成了自己想要的样式之后,点击选择图片,可以放在一个div中预览,同 ...

  5. 订单系统开发(仿淘宝和美团网) 之 项目总结(降低数据库并发量)

    原文:订单系统开发(仿淘宝和美团网) 之 项目总结(降低数据库并发量) 继上一篇"订单系统开发(仿淘宝和美团网) 之 项目总结(一)",这篇博客重点想说下订单系统开发的设计和有待优 ...

  6. Android仿淘宝详情页面viewPager滑动到最后一张图片跳转的功能

    需要做一个仿淘宝客户端ViewPager滑动到最后一页,再拖动的时候跳到详情的功能,刚开始我也迷糊了,通过查阅相关资料发现有好多种实现方法,下面小编给大家分享实例代码,感兴趣的朋友一起看看吧 需要做一 ...

  7. jquery特效-基于jQuery仿淘宝红色分类导航

    今天给大家分享一款基于jQuery仿淘宝红色分类导航.这款分类导航适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗.效果图如下: 实现的代码. ...

  8. 一款基于jQuery仿淘宝红色分类导航

    今天给大家分享一款基于jQuery仿淘宝红色分类导航.这款分类导航适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗.效果图如下: 在线预览    ...

  9. 仿淘宝详情页 直接上代码

    仿淘宝详情页 直接上代码 package com.example.liketitledemo;import android.content.Context; import android.graphi ...

最新文章

  1. 学计算机必懂的53个单词缩写
  2. linux c 编译错误 conflicting types for 的解决办法
  3. Semantic-UI的React实现(二):CSS类构造模块
  4. 编程题: 将一个矩阵(二维数组)顺时针旋转90度
  5. PowerDesigner15在win7-64位系统下对MySQL 进行反向工程以及建立物理模型产生SQL语句步骤图文傻瓜式详解...
  6. 7-69 计算圆周率 (15 分)
  7. es6 prototype 属性和__proto__属性
  8. 作业帮:给定一个整数数组,找出其中两个数相加等于目标值(去重set)
  9. 反应堆模式最牛的那篇论文--由solidmango执笔翻译
  10. org.springframework.dao.IncorrectResultSizeDataAccessException: query did not return a unique result
  11. 最新版微信小程序如何引入iconfont阿里矢量图库解决方案
  12. java水彩画效果滤镜,把动物照片转成水彩画效果的PS滤镜教程
  13. 根据日期获取周数的计算
  14. Web报表系统葡萄城报表:报表设计
  15. Linux编译simplest_ffmpeg_player
  16. USYD悉尼大学INFO1110 详细作业解析Week3 all quizzes
  17. 计算机网络安全运维管理工作总结,计算机设备日常运维工作总结
  18. C语言:初学者2--求π的值(3种方法)
  19. 什么是孤独?。。。一款只有6个用户的APP
  20. 8g内存一般占用多少_8g内存开机占用一半|Windows操作系统内存使用率多少正常?...

热门文章

  1. 【微信小程序开发•系列文章一】入门
  2. 【转】php中的会话机制(2)
  3. 携程智联等网站百分之60%的访问量都是爬虫,对此我们应该怎么办
  4. MATLAB 之特征值与特征向量、jordan标准形
  5. 「LibreOJ Round #11」Misaka Network 与测试【二分图最大匹配+读入坑点】
  6. Sicily 1214. 信号分析
  7. linux与windows市场占有率,桌面系统市场占有率普遍规律是Windows占九成,Mac占一成,Linux占1-2%...
  8. 2020年秋招面试记录——爱奇艺笔试
  9. 【§孤独的猫xp电脑主题下载§系统美化】
  10. 响铃:整合通信与视频,网易云能成为丁磊的下一个“爆款”吗?