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 相关文章推荐
JavaScript 打地鼠游戏代码说明
Oct 12 Javascript
JS函数实现动态添加CSS样式表文件
Dec 15 Javascript
jQuery.fn和jQuery.prototype区别介绍
Oct 05 Javascript
Knockout text绑定DOM的使用方法
Nov 15 Javascript
jquery操作复选框(checkbox)的12个小技巧总结
Feb 04 Javascript
jquery选择checked在ie8普通模式下的问题
Feb 12 Javascript
javascript获取dom的下一个节点方法
Sep 05 Javascript
基于JS模仿windows文件按名称排序效果
Jun 29 Javascript
利用jsonp跨域调用百度js实现搜索框智能提示
Aug 24 Javascript
浅谈jquery上下滑动的注意事项
Oct 13 Javascript
vue-router单页面路由
Jun 17 Javascript
如何构建 vue-ssr 项目的方法步骤
Aug 04 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
优化网页之快速的呈现我们的网页
2007/06/29 Javascript
javascript十个最常用的自定义函数(中文版)
2009/09/07 Javascript
jquery.artwl.thickbox.js  一个非常简单好用的jQuery弹出层插件
2012/03/01 Javascript
js给onclick事件赋值,动态传参数实例解说
2013/03/28 Javascript
js日期对象兼容性的处理方法
2014/01/28 Javascript
js设置文本框中焦点位置在最后的示例代码(简单实用)
2014/03/04 Javascript
JavaScript获取表格(table)当前行的值、删除行、增加行
2015/07/03 Javascript
jqTransform美化表单
2015/10/10 Javascript
完美实现bootstrap分页查询
2015/12/09 Javascript
jQuery mobile 移动web(4)
2015/12/20 Javascript
JavaScript学习笔记之取数组中最大值和最小值
2016/03/23 Javascript
Jquery和BigFileUpload实现大文件上传及进度条显示
2016/06/27 Javascript
JS实现超简单的汉字转拼音功能示例
2016/12/22 Javascript
JavaScript中动态向表格添加数据
2017/01/24 Javascript
vue组件中点击按钮后修改输入框的状态实例代码
2017/04/14 Javascript
vue单页应用中如何使用jquery的方法示例
2017/07/27 jQuery
vue 使用 vue-pdf 实现pdf在线预览的示例代码
2020/04/26 Javascript
jquery实现淡入淡出轮播图效果
2020/12/13 jQuery
[48:39]Ti4主赛事胜者组第一天 EG vs NEWBEE 2
2014/07/19 DOTA
python从网络读取图片并直接进行处理的方法
2015/05/22 Python
Python3爬取英雄联盟英雄皮肤大图实例代码
2018/11/14 Python
Python二叉树的遍历操作示例【前序遍历,中序遍历,后序遍历,层序遍历】
2018/12/24 Python
python3字符串操作总结
2019/07/24 Python
在Python3 numpy中mean和average的区别详解
2019/08/24 Python
Python通过正则库爬取淘宝商品信息代码实例
2020/03/02 Python
Django之choices选项和富文本编辑器的使用详解
2020/04/01 Python
详解Python遍历列表时删除元素的正确做法
2021/01/07 Python
详解Django关于StreamingHttpResponse与FileResponse文件下载的最优方法
2021/01/07 Python
css3实现input输入框颜色渐变发光效果代码
2014/04/02 HTML / CSS
总结30个CSS3选择器
2017/04/13 HTML / CSS
css3实现动画的三种方式
2020/08/24 HTML / CSS
速卖通欧盟:Aliexpress EU
2020/08/19 全球购物
教师专业理论水平的自我评价分享
2013/11/09 职场文书
北京大学中文系教授推荐的10本小说
2019/08/08 职场文书
导游词之永济鹳雀楼
2020/01/16 职场文书
Python使用华为API为图像设置多个锚点标签
2022/04/12 Python