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下判断是否为闰年的Datetime包
Oct 26 Javascript
js三种排序算法分享
Aug 16 Javascript
JS正则中的RegExp对象对象
Nov 07 Javascript
jquery滚动到顶部底部代码
Apr 20 Javascript
javascript弹出窗口实现代码
Nov 12 Javascript
JavaScript类的继承方法小结【组合继承分析】
Jul 11 Javascript
JavaScript常用事件介绍
Jan 21 Javascript
Vue3.0结合bootstrap创建多页面应用
May 28 Javascript
手把手带你搭建一个node cli的方法示例
Aug 07 Javascript
Vue通过provide inject实现组件通信
Sep 03 Javascript
vue组件中传值EventBus的使用及注意事项说明
Nov 16 Javascript
React-vscode使用jsx语法的问题及解决方法
Jun 21 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
同台服务器使用缓存APC效率高于Memcached的演示代码
2010/02/16 PHP
php颜色转换函数hex-rgb(将十六进制格式转成十进制格式)
2013/09/23 PHP
php和jquery实现地图区域数据统计展示数据示例
2014/02/12 PHP
fsockopen pfsockopen函数被禁用,SMTP发送邮件不正常的解决方法
2015/09/20 PHP
表单提交错误后返回内容消失问题的解决方法(PHP网站)
2015/10/20 PHP
解决laravel-admin 自己新建页面里 js 需要刷新一次的问题
2019/10/03 PHP
js内存泄露的几种情况详细探讨
2013/05/31 Javascript
Javascript页面添加到收藏夹的简单方法
2013/08/07 Javascript
JavaScript jQuery 中定义数组与操作及jquery数组操作
2015/12/18 Javascript
JS获取CSS样式(style/getComputedStyle/currentStyle)
2016/01/19 Javascript
jQuery siblings()用法实例详解
2016/04/26 Javascript
浏览器兼容的JS写法总结
2016/04/27 Javascript
JS实现隐藏同级元素后只显示JS文件内容的方法
2016/09/04 Javascript
Javascript 获取鼠标当前的位置实现方法
2016/10/27 Javascript
浅析JavaScriptSerializer类的序列化与反序列化
2016/11/22 Javascript
Node.JS利用PhantomJs抓取网页入门教程
2017/05/19 Javascript
JS通过调用微信API实现微信支付功能的方法示例
2017/06/29 Javascript
JavaScript中各数制转换全面总结
2017/08/21 Javascript
详解如何构建Promise队列实现异步函数顺序执行
2018/10/23 Javascript
vue仿淘宝滑动验证码功能(样式模仿)
2019/12/10 Javascript
JS document文档的简单操作完整示例
2020/01/13 Javascript
vue页面加载时的进度条功能(实例代码)
2020/01/13 Javascript
十分钟教你上手ES2020新特性
2020/02/12 Javascript
js实现选项卡效果
2020/03/07 Javascript
详解JavaScript中的链式调用
2020/11/27 Javascript
[00:59]DOTA2英雄背景故事——上古巨神
2020/06/28 DOTA
Python Queue模块详解
2014/11/30 Python
python使用正则表达式来获取文件名的前缀方法
2018/10/21 Python
使用Python进行目录的对比方法
2018/11/01 Python
导入tensorflow:ImportError: libcublas.so.9.0 报错
2020/01/06 Python
商务助理求职信范文
2014/04/20 职场文书
2014年销售工作总结
2014/12/01 职场文书
2015年学校德育工作总结
2015/04/22 职场文书
乡镇法制宣传日活动总结
2015/05/05 职场文书
四年级作文之说明文作文
2019/10/14 职场文书
MySQL下载安装配置详细教程 附下载资源
2022/09/23 MySQL