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 input文本框禁用右键和复制粘贴功能的代码
Apr 15 Javascript
jQuery ajaxSubmit 实现ajax提交表单局部刷新
Jul 04 Javascript
BootStrap无限级分类(无限极分类封装版)
Aug 26 Javascript
JavaScript事件方法(实例讲解)
Jun 27 Javascript
vue 使用ref 让父组件调用子组件的方法
Feb 08 Javascript
javascript性能优化之分时函数的介绍
Mar 28 Javascript
jQuery实现百度图片移入移出内容提示框上下左右移动的效果
Jun 05 jQuery
JavaScript中为事件指定处理程序的五种方式分析
Jul 27 Javascript
如何在Vue中使用CleaveJS格式化你的输入内容
Dec 14 Javascript
angular 实现下拉列表组件的示例代码
Mar 09 Javascript
react高阶组件添加和删除props
Apr 26 Javascript
详解微信小程序回到顶部的两种方式
May 09 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新手上路(十二)
2006/10/09 PHP
实用函数5
2007/11/08 PHP
使用配置类定义Codeigniter全局变量
2014/06/12 PHP
图文详解phpstorm配置Xdebug进行调试PHP教程
2016/06/13 PHP
浅谈laravel-admin form中的数据,在提交后,保存前,获取并进行编辑
2019/10/21 PHP
ExtJS 简介 让你知道extjs是什么
2008/12/29 Javascript
JS array 数组详解
2009/03/22 Javascript
自己的js工具_Form 封装
2009/08/21 Javascript
js写一个弹出层并锁屏效果实现代码
2012/12/07 Javascript
jquery fancybox ie6不显示关闭按钮的解决办法
2013/12/25 Javascript
jquery实现多屏多图焦点图切换特效的方法
2015/05/04 Javascript
基于JavaScript如何实现私有成员的语法特征及私有成员的实现方式
2015/10/28 Javascript
jQuery焦点图插件SaySlide
2015/12/21 Javascript
实例详解JavaScript获取链接参数的方法
2016/01/01 Javascript
vue 和vue-touch 实现移动端左右导航效果(仿京东移动站导航)
2017/04/22 Javascript
深入理解Vue router的部分高级用法
2018/08/15 Javascript
vue--vuex详解
2019/04/15 Javascript
微信JS-SDK实现微信会员卡功能(给用户微信卡包里发送会员卡)
2019/07/25 Javascript
Vue使用CDN引用项目组件,减少项目体积的步骤
2020/10/30 Javascript
vue 数据遍历筛选 过滤 排序的应用操作
2020/11/17 Javascript
Python微信库:itchat的用法详解
2017/08/14 Python
Python中将两个或多个list合成一个list的方法小结
2019/05/12 Python
使用Python opencv实现视频与图片的相互转换
2019/07/08 Python
如何基于Python制作有道翻译小工具
2019/12/16 Python
解决pycharm不能自动补全第三方库的函数和属性问题
2020/03/12 Python
OpenCV 使用imread()函数读取图片的六种正确姿势
2020/07/09 Python
浅谈优化Django ORM中的性能问题
2020/07/09 Python
Charles & Keith欧盟:新加坡时尚品牌
2019/08/01 全球购物
西部世纪.net笔试题面试题
2014/04/03 面试题
JSP和EJB可以共享HttpSession么?EJB里面可以改变session里面的内容
2013/06/05 面试题
大学生毕业自我评价范文分享
2013/11/11 职场文书
大学校园生活自我鉴定
2014/01/13 职场文书
征婚广告词
2014/03/17 职场文书
幼儿园运动会口号
2014/06/07 职场文书
爱护公物标语
2014/06/24 职场文书
Python 使用dict实现switch的操作
2021/04/07 Python