javascript模拟评分控件实现方法


Posted in Javascript onMay 13, 2015

本文实例讲述了javascript模拟评分控件实现方法。分享给大家供大家参考。具体实现方法如下:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>动态设置style(评分效果)</title>
<script type="text/javascript">
//查找一个元素在数组中的索引位置
function ArrayIndexOf(arr, element) {
  for (var i = 0; i < arr.length; i++) {
  if (arr[i] == element) {
   return i;
  }
 }
  return -1;
}
function IniEvent() {
  var tbl = document.getElementById("tblRating");
  var tds = tbl.getElementsByTagName("td");
  for (var i = 0; i < tds.length; i++) {
 var td = tds[i];
 td.onclick = tdOnClick;
 td.style.cursor = "pointer"; //设置光标手型
  }
}
function tdOnClick() {
  var tbl = document.getElementById("tblRating");
  var tds = tbl.getElementsByTagName("td");
  //查找当前点击的td的索引
   var index = ArrayIndexOf(tds, this);
  //之前的td改为红色
  for (var i = 0; i <= index; i++) {
  tds[i].style.background = "red";
  }
  //之后的td改为白色
  for (var i = index + 1; i < tds.length; i++) {
   tds[i].style.background = "white";
  }
}
</script>
</head>
<body onload="IniEvent()">
  <table id="tblRating">
  <tr>
    <td>☆</td>
    <td>☆</td>
    <td>☆</td>
    <td>☆</td>
    <td>☆</td>
  </tr>
  </table>
</body>
</html>

希望本文所述对大家的javascript程序设计有所帮助。

Javascript 相关文章推荐
根据出生日期自动取得星座的js代码
Jul 20 Javascript
基于JQuery的列表拖动排序实现代码
Oct 01 Javascript
javascript实现当前页导航激活的方法
Feb 27 Javascript
jQuery Mobile弹出窗、弹出层知识汇总
Jan 05 Javascript
第一次接触神奇的Bootstrap导航条
Aug 09 Javascript
原生js中ajax访问的实例详解
Sep 19 Javascript
浅谈在node.js进入文件目录的问题
May 13 Javascript
Node.js+ELK日志规范的实现
May 23 Javascript
react 组件传值的三种方法
Jun 03 Javascript
layui复选框的全选与取消实现方法
Sep 02 Javascript
基于vue-cli3创建libs库的实现方法
Dec 04 Javascript
Ant Design Pro 之 ProTable使用操作
Oct 31 Javascript
javascript动态设置样式style实例分析
May 13 #Javascript
javascript事件冒泡实例分析
May 13 #Javascript
javascript无刷新评论实现方法
May 13 #Javascript
javascript动态创建表格及添加数据实例详解
May 13 #Javascript
javascript动态创建链接的方法
May 13 #Javascript
javascript中innerText和innerHTML属性用法实例分析
May 13 #Javascript
javascript元素动态创建实现方法
May 13 #Javascript
You might like
PHP 获取远程网页内容的代码(fopen,curl已测)
2011/06/06 PHP
PHP句法规则详解 入门学习
2011/11/09 PHP
php版微信公众平台回复中文出现乱码问题的解决方法
2016/09/22 PHP
总结PHP内存释放以及垃圾回收
2018/03/29 PHP
微信公众平台开发教程⑥ 微信开发集成类的使用图文详解
2019/04/10 PHP
json跟xml的对比分析
2008/06/10 Javascript
JavaScript 加号(+)运算符号
2009/12/06 Javascript
锋利的jQuery jQuery中的DOM操作
2010/03/21 Javascript
jQuery获取节点和子节点文本的方法
2014/07/22 Javascript
JS控制网页动态生成任意行列数表格的方法
2015/03/09 Javascript
jQuery.trim() 函数及trim()用法详解
2015/10/26 Javascript
javascript中的altKey 和 Event属性大全
2015/11/06 Javascript
Jquery on方法绑定事件后执行多次的解决方法
2016/06/02 Javascript
Vue计算属性的使用
2017/08/04 Javascript
Bootstrap fileinput 上传新文件移除时触发服务器同步删除的配置
2018/10/08 Javascript
JavaScript数据结构与算法之二叉树插入节点、生成二叉树示例
2019/02/21 Javascript
jQuery 实现DOM元素拖拽交换位置的实例代码
2020/07/14 jQuery
Js Snowflake(雪花算法)生成随机ID的实现方法
2020/08/26 Javascript
Django时区详解
2019/07/24 Python
python 进程的几种创建方式详解
2019/08/29 Python
pytorch1.0中torch.nn.Conv2d用法详解
2020/01/10 Python
Python django框架开发发布会签到系统(web开发)
2020/02/12 Python
Python多线程操作之互斥锁、递归锁、信号量、事件实例详解
2020/03/24 Python
python中线程和进程有何区别
2020/06/17 Python
FC-Moto西班牙:摩托车手最大的购物场所之一
2019/04/11 全球购物
美国孩之宝玩具官网:Hasbro Pulse
2019/06/24 全球购物
Smilodox官方运动服装店:从运动服到健身配件
2020/08/27 全球购物
团员的自我评价
2013/12/01 职场文书
学习十八届三中全会精神实施方案
2014/02/17 职场文书
现场活动策划方案
2014/08/22 职场文书
优秀党员个人总结
2015/02/14 职场文书
交通事故起诉书
2015/05/19 职场文书
行政二审代理词
2015/05/25 职场文书
运动会观后感
2015/06/09 职场文书
2016大学军训通讯稿
2015/11/25 职场文书
解决vue $http的get和post请求跨域问题
2021/06/07 Vue.js