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 相关文章推荐
讲两件事:1.this指针的用法小探. 2.ie的attachEvent和firefox的addEventListener在事件处理上的区别
Apr 12 Javascript
基于PHP+Jquery制作的可编辑的表格的代码
Apr 10 Javascript
幻灯片带网页设计中的20个奇妙应用示例小结
May 27 Javascript
JS Replace 全部替换字符的用法小结
Dec 24 Javascript
javascript学习笔记(四)function函数部分
Sep 30 Javascript
javascript实现单击和双击并存的方法
Dec 13 Javascript
基于jquery实现左右按钮点击的图片切换效果
Jan 27 Javascript
谈谈encodeURI和encodeURIComponent以及escape的区别与应用
Nov 24 Javascript
Jquery实现简单的轮播效果(代码管用)
Mar 14 Javascript
jQuery页面弹出框实现文件上传
Feb 09 Javascript
详解Angular 4.x NgIf 的用法
May 22 Javascript
Angular实现下载安装包的功能代码分享
Sep 05 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开发的一些注意点总结
2010/10/12 PHP
CI(CodeIgniter)框架中的增删改查操作
2014/06/10 PHP
基于PHP代码实现中奖概率算法可用于刮刮卡、大转盘等抽奖算法
2015/12/20 PHP
Javascript事件热键兼容ie|firefox
2010/12/30 Javascript
JQUERY的属性选择符和自定义选择符使用方法(二)
2011/04/07 Javascript
JavaScript汉诺塔问题解决方法
2015/04/21 Javascript
JavaScript学习小结(一)——JavaScript入门基础
2015/09/02 Javascript
js实现漫天星星效果
2017/01/19 Javascript
AngularJS实现路由实例
2017/02/12 Javascript
node.js操作mysql简单实例
2017/05/25 Javascript
详解angularJS动态生成的页面中ng-click无效解决办法
2017/06/19 Javascript
教你5分钟学会用requirejs(必看篇)
2017/07/25 Javascript
原生JavaScript来实现对dom元素class的操作方法(推荐)
2017/08/16 Javascript
Angular 4中如何显示内容的CSS样式示例代码
2017/11/06 Javascript
vue组件的写法汇总
2018/04/12 Javascript
快速解决vue-cli在ie9+中无效的问题
2018/09/04 Javascript
javascript实现的字符串转换成数组操作示例
2019/06/13 Javascript
VUE前后端学习tab写法实例
2019/08/06 Javascript
一则python3的简单爬虫代码
2014/05/26 Python
Python求算数平方根和约数的方法汇总
2016/03/09 Python
python3读取图片并灰度化图片的四种方法(OpenCV、PIL.Image、TensorFlow方法)总结
2019/07/04 Python
Django单元测试工具test client使用详解
2019/08/02 Python
python GUI库图形界面开发之PyQt5 MDI(多文档窗口)QMidArea详细使用方法与实例
2020/03/05 Python
详解PyQt5信号与槽的几种高级玩法
2020/03/24 Python
浅析Python requests 模块
2020/10/09 Python
荷兰电脑专场:Paradigit
2018/05/05 全球购物
Hurley官方网站:扎根于海滩生活方式的全球青年文化品牌
2020/05/18 全球购物
一些高难度的SQL面试题
2016/11/29 面试题
建筑实习自我鉴定
2013/10/18 职场文书
退休感言
2014/01/28 职场文书
中药学专业求职信
2014/05/31 职场文书
2015年元旦文艺晚会总结(学院)
2014/11/28 职场文书
先进班组事迹材料
2014/12/25 职场文书
工作表扬信
2015/01/17 职场文书
科技馆观后感
2015/06/08 职场文书
JavaScript嵌入百度地图API的最详细方法
2021/04/16 Javascript