js实现商城星星评分的效果


Posted in Javascript onDecember 29, 2015

在这里和朋友们分享一个使用js实现商城星星评分的效果,希望能给大家点帮助,当然更好的特效还有待大家完善。

html如下:

<div class="starts">
  <ul id="pingStar">
    <li rel="1" title="特别差,给1分"></li>
    <li rel="2" title="很差,给2分"></li>
    <li rel="3" title="一般般,给3分"></li>
    <li rel="4" title="很好,给4分"></li>
    <li rel="5" title="非常好,给5分"></li>
    <span id="dir"></span>
  </ul>
  <input type="hidden" value="" id="startP">
</div>

css样式:

.starts,.starts ul{float:left;}
.starts{padding-left:16px;padding-top:7px;}
.starts ul li{width:32px;height:31px;float:left;background:#ddd;padding-right:3px;}
.starts ul li.on{background:red;}
.starts ul span{display:inline;float:left;padding-left:10px;height:31px;line-height:31px;}

最后js调用如下:

window.onload = function () {
  var s = document.getElementById("pingStar"),
    m = document.getElementById('dir'),
    n = s.getElementsByTagName("li"),
    input = document.getElementById('startP'); //保存所选值
  clearAll = function () {
    for (var i = 0; i < n.length; i++) {
      n[i].className = '';
    }
  }
  for (var i = 0; i < n.length; i++) {
    n[i].onclick = function () {
      var q = this.getAttribute("rel");
      clearAll();
      input.value = q;
      for (var i = 0; i < q; i++) {
        n[i].className = 'on';
      }
      m.innerHTML = this.getAttribute("title");
    }
    n[i].onmouseover = function () {
      var q = this.getAttribute("rel");
      clearAll();
      for (var i = 0; i < q; i++) {
        n[i].className = 'on';
      }
    }
    n[i].onmouseout = function () {
      clearAll();
      for (var i = 0; i < input.value; i++) {
        n[i].className = 'on';
      }
    }
  }
}

以上就是本文的全部内容,希望对大家的学习jquery程序设计有所帮助。

Javascript 相关文章推荐
javascript多种数据类型表格排序代码分析
Sep 11 Javascript
JavaScript修改浏览器tab标题小技巧
Jan 06 Javascript
JavaScript更改字符串的大小写
May 07 Javascript
jquery中ajax处理跨域的三大方式
Jan 05 Javascript
Bootstrap源码解读模态弹出框(11)
Dec 28 Javascript
js面向对象编程总结
Feb 16 Javascript
Node.js和Express简单入门介绍
Mar 24 Javascript
微信小程序实现带刻度尺滑块功能
Mar 29 Javascript
react native带索引的城市列表组件的实例代码
Aug 08 Javascript
vue页面使用阿里oss上传功能的实例(一)
Aug 09 Javascript
jQuery实现的自定义轮播图功能详解
Dec 28 jQuery
Element Rate 评分的使用方法
Jul 27 Javascript
原生js配合cookie制作保存路径的拖拽
Dec 29 #Javascript
一种新的javascript对象创建方式Object.create()
Dec 28 #Javascript
JavaScrip常见的一些算法总结
Dec 28 #Javascript
简单介绍JavaScript数据类型之隐式类型转换
Dec 28 #Javascript
Bootstrap导航栏各元素操作方法(表单、按钮、文本)
Dec 28 #Javascript
Bootstrap实现响应式导航栏效果
Dec 28 #Javascript
基于jQuery实现选取月份插件附源码下载
Dec 28 #Javascript
You might like
PHP实现无限分类的实现方法
2016/11/14 PHP
PHP-CGI远程代码执行漏洞分析与防范
2017/05/07 PHP
jQuery参数列表集合
2011/04/06 Javascript
jQuery之选项卡的简单实现
2014/02/28 Javascript
IE6-IE9中tbody的innerHTML不能赋值的解决方法
2014/09/26 Javascript
javascript动态修改Li节点值的方法
2015/01/20 Javascript
jquery实现简单合拢与展开网页面板的方法
2015/09/01 Javascript
JavaScript数据推送Comet技术详解
2016/04/07 Javascript
JS延时器提示框的应用实例代码解析
2016/04/27 Javascript
js注入 黑客之路必备!
2016/09/14 Javascript
微信小程序开发图片拖拽实例详解
2017/05/05 Javascript
详解Vue的computed(计算属性)使用实例之TodoList
2017/08/07 Javascript
原生JS实现$.param() 函数的方法
2018/08/10 Javascript
Angular4.0动画操作实例详解
2019/05/10 Javascript
vue实现自定义多选按钮
2020/07/16 Javascript
探究一道价值25k的蚂蚁金服异步串行面试题
2020/08/21 Javascript
JS+CSS实现动态时钟
2021/02/19 Javascript
[48:39]Ti4主赛事胜者组第一天 EG vs NEWBEE 2
2014/07/19 DOTA
python getopt 参数处理小示例
2009/06/09 Python
python实现的简单RPG游戏流程实例
2015/06/28 Python
使用apidoc管理RESTful风格Flask项目接口文档方法
2018/02/07 Python
python中的decorator的作用详解
2018/07/26 Python
详解python3中的真值测试
2018/08/13 Python
python基于K-means聚类算法的图像分割
2019/10/30 Python
实现ECharts双Y轴左右刻度线一致的例子
2020/05/16 Python
TensorFlow Autodiff自动微分详解
2020/07/06 Python
python中判断文件结束符的具体方法
2020/08/04 Python
将HTML5 Canvas的内容保存为图片借助toDataURL实现
2013/05/20 HTML / CSS
电脑教师的教学自我评价
2013/11/26 职场文书
军训教官感言
2014/03/02 职场文书
大学中国梦演讲稿
2014/04/23 职场文书
北京青年观后感
2015/06/15 职场文书
房产遗嘱范本
2015/08/06 职场文书
2016大学生形势与政策心得体会
2016/01/12 职场文书
六年级作文之关于梦
2019/10/22 职场文书
vue el-table实现递归嵌套的示例代码
2022/08/14 Vue.js