js星星评分效果


Posted in Javascript onJuly 24, 2014

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';
   }
  }
 }
}

查看演示 http://demo.3water.com/js/2014/jsxxdf/

如果有喜欢使用基于jquery的星星打分效果,可以参考这个地址:https://3water.com/jiaoben/195077.html

Javascript 相关文章推荐
一个cssQuery对象 javascript脚本实现代码
Jul 21 Javascript
js或css文件后面跟参数的原因说明
Jan 09 Javascript
基于jquery的loading效果实现代码
Nov 05 Javascript
去掉gridPanel表头全选框的小例子
Jul 18 Javascript
关闭页面window.location事件未执行的原因及解决方法
Sep 01 Javascript
Jquery实现仿腾讯娱乐频道焦点图(幻灯片)特效
Mar 06 Javascript
jQuery使用addClass()方法给元素添加多个class样式
Mar 26 Javascript
JS二叉树的简单实现方法示例
Apr 05 Javascript
Thinkjs3新手入门之添加一个新的页面
Dec 06 Javascript
详解webpack模块加载器兼打包工具
Sep 11 Javascript
微信小程序实现列表页的点赞和取消点赞功能
Nov 02 Javascript
浅析Vue.js中v-bind v-model的使用和区别
Dec 04 Javascript
jquery实现的鼠标下拉滚动置顶效果
Jul 24 #Javascript
js创建对象的区别示例介绍
Jul 24 #Javascript
点击表单提交时出现jQuery没有权限的解决方法
Jul 23 #Javascript
Extjs根据条件设置表格某行背景色示例
Jul 23 #Javascript
技术男用来对妹子表白的百度首页
Jul 23 #Javascript
JS中使用sort结合localeCompare实现中文排序实例
Jul 23 #Javascript
JS在IE下缺少标识符的错误
Jul 23 #Javascript
You might like
数据库相关问题
2006/10/09 PHP
php xml文件操作代码(一)
2009/03/20 PHP
简单实现限定phpmyadmin访问ip的方法
2013/03/05 PHP
PHP swfupload图片上传的实例代码
2013/09/30 PHP
php数据库备份还原类分享
2014/03/20 PHP
PHP获取浏览器信息类和客户端地理位置的2个方法
2014/04/24 PHP
destoon各类调用汇总
2014/06/20 PHP
PHP.vs.JAVA
2016/04/29 PHP
php中请求url的五种方法总结
2017/07/13 PHP
php5对象复制、clone、浅复制与深复制实例详解
2019/08/14 PHP
jquery方法+js一般方法+js面向对象方法实现拖拽效果
2012/08/30 Javascript
JavaScript分页功能的实现方法
2015/04/25 Javascript
使用微信小程序开发前端【快速入门】
2016/12/05 Javascript
JS数组排序方法实例分析
2016/12/16 Javascript
修改vue+webpack run build的路径方法
2018/09/01 Javascript
Vue+element 解决浏览器自动填充记住的账号密码问题
2019/06/11 Javascript
JavaScript 实现继承的几种方式
2021/02/19 Javascript
Python利用IPython提高开发效率
2016/08/10 Python
Python使用combinations实现排列组合的方法
2018/11/13 Python
python实现ip代理池功能示例
2019/07/05 Python
pandas数据拼接的实现示例
2020/04/16 Python
html5定位并在百度地图上显示的示例
2014/04/27 HTML / CSS
美国职棒大联盟官方网上商店:MLBShop.com
2017/11/12 全球购物
日本乐天德国站:Rakuten.de
2019/05/16 全球购物
ORACLE十问
2015/04/20 面试题
资深财务管理人员自我评价
2013/09/22 职场文书
人事部主管岗位职责
2013/12/26 职场文书
食品安全责任书
2014/04/15 职场文书
2015年乡镇扶贫工作总结
2015/04/08 职场文书
兴趣班停课通知
2015/04/24 职场文书
劳动仲裁撤诉申请书
2015/05/18 职场文书
教师节班会开场白
2015/06/01 职场文书
文化大革命观后感
2015/06/17 职场文书
2016优秀员工先进事迹材料
2016/02/25 职场文书
廉洁自律承诺书2016
2016/03/25 职场文书
大学生如何逃脱“毕业季创业队即散伙”魔咒?
2019/08/19 职场文书