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 相关文章推荐
Discuz! 6.1_jQuery兼容问题
Sep 23 Javascript
JS 模态对话框和非模态对话框操作技巧汇总
Apr 15 Javascript
jquery与prototype框架的详细对比
Nov 21 Javascript
javascript中的遍历for in 以及with的用法
Dec 22 Javascript
javascript显式类型转换实例分析
Apr 25 Javascript
AngularJS中的过滤器filter用法完全解析
Apr 22 Javascript
Vue-cli3简单使用(图文步骤)
Apr 30 Javascript
vue实现axios图片上传功能
Aug 20 Javascript
JS精确判断数据类型代码实例
Dec 18 Javascript
koa2的中间件功能及应用示例
Mar 05 Javascript
js中位数不足自动补位扩展padLeft、padRight实现代码
Apr 06 Javascript
Java无向树分析 实现最小高度树
Apr 09 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
将数组写入txt文件 var_export
2009/04/21 PHP
PHP缩略图等比例无损压缩,可填充空白区域补充色
2011/06/10 PHP
探讨:如何通过stats命令分析Memcached的内部状态
2013/06/14 PHP
php项目开发中用到的快速排序算法分析
2016/06/25 PHP
Yii框架 session 数据库存储操作方法示例
2019/11/18 PHP
容易被忽略的JS脚本特性
2011/09/13 Javascript
基于jQuery判断两个元素是否有重叠部分的代码
2012/07/25 Javascript
快速查找数组中的某个元素并返回下标示例
2013/09/03 Javascript
jquery实现邮箱自动补全功能示例分享
2014/02/17 Javascript
JavaScript函数中关于valueOf和toString的理解
2016/06/14 Javascript
浅析上传头像示例及其注意事项
2016/12/14 Javascript
浅谈ES6 模板字符串的具体使用方法
2017/11/07 Javascript
微信小程序实现通过js操作wxml的wxss属性示例
2018/12/06 Javascript
深入学习Vue nextTick的用法及原理
2019/10/08 Javascript
微信小程序实现音乐播放器
2019/11/20 Javascript
vue.js this.$router.push获取不到params参数问题
2020/03/03 Javascript
element中el-container容器与div布局区分详解
2020/05/13 Javascript
python使用beautifulsoup从爱奇艺网抓取视频播放
2014/01/23 Python
python基础教程之自定义函数介绍
2014/08/29 Python
Python探索之URL Dispatcher实例详解
2017/10/28 Python
Python实现基于POS算法的区块链
2018/08/07 Python
Python logging模块用法示例
2018/08/28 Python
对python 操作solr索引数据的实例详解
2018/12/07 Python
python的继承知识点总结
2018/12/10 Python
python中的垃圾回收(GC)机制
2020/09/21 Python
分享一枚pycharm激活码适用所有pycharm版本我的pycharm2020.2.3激活成功
2020/11/20 Python
jupyter notebook远程访问不了的问题解决方法
2021/01/11 Python
学术会议欢迎词
2014/01/09 职场文书
2014年行政部工作总结
2014/11/19 职场文书
幼儿园大班教师随笔
2015/08/14 职场文书
《确定位置》教学反思
2016/02/18 职场文书
入党申请书怎么写?
2019/06/21 职场文书
python Tkinter的简单入门教程
2021/04/11 Python
python基于scrapy爬取京东笔记本电脑数据并进行简单处理和分析
2021/04/14 Python
晶体管单管来复再生式收音机
2021/04/22 无线电
Apache Kafka 分区重分配的实现原理解析
2022/07/15 Servers