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 相关文章推荐
Jquery中$.get(),$.post(),$.ajax(),$.getJSON()的用法总结
Nov 14 Javascript
浅谈javascript 函数内部属性
Jan 21 Javascript
简单对比分析JavaScript中的apply,call与this的使用
Dec 04 Javascript
JavaScript中的冒泡排序法
Aug 03 Javascript
浅谈js中的三种继承方式及其优缺点
Aug 10 Javascript
jQuery EasyUI datagrid在翻页以后仍能记录被选中行的实现代码
Aug 15 Javascript
javascript cookie基础应用之记录用户名的方法
Sep 20 Javascript
JavaScript中双符号的运算详解
Mar 12 Javascript
Node.js简单入门前传
Aug 21 Javascript
《javascript设计模式》学习笔记四:Javascript面向对象程序设计链式调用实例分析
Apr 07 Javascript
Javascript摸拟自由落体与上抛运动原理与实现方法详解
Apr 08 Javascript
AJAX引擎原理以及XmlHttpRequest对象的axios、fetch区别详解
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
php include的妙用,实现路径加密
2008/07/29 PHP
PHP写UltraEdit插件脚本实现方法
2011/12/26 PHP
php中使用parse_url()对网址进行解析的实现代码(parse_url详解)
2012/01/03 PHP
PHP得到某段时间区间的时间戳 php定时任务
2012/04/12 PHP
php类自动装载、链式操作、魔术方法实现代码
2017/07/23 PHP
浅谈PHP中new self()和new static()的区别
2017/08/11 PHP
PHP实现提高SESSION响应速度的几种方法详解
2019/08/09 PHP
读jQuery之一(对象的组成)
2011/06/11 Javascript
浅谈JavaScript字符串与数组
2015/06/03 Javascript
ES6中class类用法实例浅析
2017/04/06 Javascript
Angular模板表单校验方法详解
2017/08/11 Javascript
基于JSON数据格式详解
2017/08/31 Javascript
react-router-dom 嵌套路由的实现
2020/05/02 Javascript
Python程序语言快速上手教程
2012/07/18 Python
用Python从零实现贝叶斯分类器的机器学习的教程
2015/03/31 Python
举例讲解Django中数据模型访问外键值的方法
2015/07/21 Python
Python中你应该知道的一些内置函数
2017/03/31 Python
Windows下PyCharm安装图文教程
2018/08/27 Python
Python线性拟合实现函数与用法示例
2018/12/13 Python
Python Flask框架模板操作实例分析
2019/05/03 Python
深入浅析Python中的迭代器
2019/06/04 Python
Python基本语法之运算符功能与用法详解
2019/10/22 Python
python3下pygame如何实现显示中文
2020/01/11 Python
Django框架静态文件处理、中间件、上传文件操作实例详解
2020/02/29 Python
python tkinter GUI绘制,以及点击更新显示图片代码
2020/03/14 Python
Java Spring项目国际化(i18n)详细方法与实例
2020/03/20 Python
使用python把xmind转换成excel测试用例的实现代码
2020/10/12 Python
涉外经济法专业毕业生推荐信
2013/11/24 职场文书
电信营业员自我评价分享
2014/01/17 职场文书
幼儿园大班开学教师寄语
2014/04/03 职场文书
雷锋精神演讲稿
2014/05/13 职场文书
乡镇计划生育工作汇报
2014/10/28 职场文书
2014年房地产工作总结范文
2014/11/19 职场文书
干部培训工作总结2015
2015/05/25 职场文书
2019中小学生安全过暑期倡议书
2019/06/24 职场文书
一次SQL如何查重及去重的实战记录
2022/03/13 MySQL