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编写的第一人称射击游戏
Feb 25 Javascript
基于Jquery 解决Ajax请求的页面 浏览器后退前进功能,页面刷新功能实效问题
Dec 11 Javascript
jquery 图片上传按比例预览插件集合
May 28 Javascript
jQuery图片特效插件Revealing实现拉伸放大
Apr 22 Javascript
js设置document.domain实现跨域的注意点分析
May 21 Javascript
javascript巧用eval函数组装表单输入项为json对象的方法
Nov 25 Javascript
不用一句js代码初始化组件
Jan 27 Javascript
BootStrap 动态表单效果
Jun 02 Javascript
解决koa2 ctx.render is not a function报错问题
Aug 07 Javascript
Vue 实现列表动态添加和删除的两种方法小结
Sep 07 Javascript
微信小程序获取公众号文章列表及显示文章的示例代码
Mar 10 Javascript
vue 动态添加class,三个以上的条件做判断方式
Nov 02 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中常用字符串处理代码片段整理
2011/11/07 PHP
PHP让网站移动访问更加友好方法
2019/02/14 PHP
PHP字符串中抽取子串操作实例分析
2019/06/22 PHP
javaScript函数中执行C#代码中的函数方法总结
2013/08/07 Javascript
jqgrid 编辑添加功能详细解析
2013/11/08 Javascript
JavaScript中判断页面关闭、页面刷新的实现代码
2014/08/27 Javascript
原生js编写基于面向对象的分页组件
2016/12/05 Javascript
JS库particles.js创建超炫背景粒子插件(附源码下载)
2017/09/13 Javascript
React Native AsyncStorage本地存储工具类
2017/10/24 Javascript
JS实现左边列表移到到右边列表功能
2018/03/28 Javascript
jQuery实现遍历XML节点和属性的方法示例
2018/04/29 jQuery
详解如何使用微信小程序云函数发送短信验证码
2019/03/13 Javascript
使用imba.io框架得到比 vue 快50倍的性能基准
2019/06/17 Javascript
Vue组件基础用法详解
2020/02/05 Javascript
javascript单张多张图无缝滚动实例代码
2020/05/10 Javascript
解决echarts vue数据更新,视图不更新问题(echarts嵌在vue弹框中)
2020/07/20 Javascript
vue 组件简介
2020/07/31 Javascript
Python数据结构之Array用法实例
2014/10/09 Python
Python中使用urllib2模块编写爬虫的简单上手示例
2016/01/20 Python
使用Python对Excel进行读写操作
2017/03/30 Python
python调用c++传递数组的实例
2019/02/13 Python
Django在pycharm下修改默认启动端口的方法
2019/07/26 Python
windows 10 设定计划任务自动执行 python 脚本的方法
2019/09/11 Python
分享一个pycharm专业版安装的永久使用方法
2019/09/24 Python
python获取引用对象的个数方式
2019/12/20 Python
python小白学习包管理器pip安装
2020/06/09 Python
opencv 图像轮廓的实现示例
2020/07/08 Python
药品质量检测应届生求职信
2013/11/14 职场文书
调解员先进事迹材料
2014/02/07 职场文书
三八红旗手先进事迹材料
2014/05/13 职场文书
学校教研活动总结
2014/07/02 职场文书
通信工程求职信
2014/07/16 职场文书
社区植树节活动总结
2015/02/06 职场文书
毕业论文致谢怎么写
2015/05/14 职场文书
医院感染管理制度
2015/08/05 职场文书
Win11如何修改dns?Win11修改dns图文教程
2022/01/18 数码科技