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实现Windows 8 Metro风格实现
Oct 15 Javascript
浅谈javascript中的事件冒泡和事件捕获
Dec 28 Javascript
超简单的Vue.js环境搭建教程
Mar 17 Javascript
JavaScript使用原型和原型链实现对象继承的方法详解
Apr 05 Javascript
JS如何实现在页面上快速定位(锚点跳转问题)
Aug 14 Javascript
关于react-router/react-router-dom v4 history不能访问问题的解决
Jan 08 Javascript
React为 Vue 引入容器组件和展示组件的教程详解
May 03 Javascript
「中高级前端面试」JavaScript手写代码无敌秘籍(推荐)
Apr 08 Javascript
vue 实现搜索的结果页面支持全选与取消全选功能
May 10 Javascript
Vue 中可以定义组件模版的几种方式
Aug 06 Javascript
快速解决layui弹窗按enter键不停弹窗的问题
Sep 18 Javascript
Vue移动端实现图片上传及超过1M压缩上传
Dec 23 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的list()的一步操作给一组变量进行赋值的使用
2011/05/18 PHP
php分页原理 分页代码 分页类制作教程
2016/09/23 PHP
PHP实现电商订单自动确认收货redis队列
2017/05/17 PHP
深入理解PHP的远程多会话调试
2017/09/21 PHP
了解一点js的Eval函数
2012/07/26 Javascript
extjs tabpanel限制选项卡数量实现思路及代码
2013/04/02 Javascript
Jquery创建一个层当鼠标移动到层上面不消失效果
2013/12/12 Javascript
jquery搜索框效果实现方法
2015/01/16 Javascript
分享一个自己写的简单的javascript分页组件
2015/02/15 Javascript
多个js毫秒倒计时同时进行效果
2016/01/05 Javascript
简单掌握JavaScript中const声明常量与变量的用法
2016/05/21 Javascript
jQuery实现的瀑布流加载效果示例
2016/09/13 Javascript
js字符串类型String常用操作实例总结
2019/07/05 Javascript
jQuery zTree插件快速实现目录树
2019/08/16 jQuery
浅谈layui数据表格判断问题(加入表单元素),设置单元格样式
2019/10/26 Javascript
Vue解析剪切板图片并实现发送功能
2020/02/04 Javascript
[01:04:01]2014 DOTA2国际邀请赛中国区预选赛 5 23 CIS VS DT第一场
2014/05/24 DOTA
Python处理XML格式数据的方法详解
2017/03/21 Python
Python开发微信公众平台的方法详解【基于weixin-knife】
2017/07/08 Python
python去除文件中重复的行实例
2018/06/29 Python
python实现播放音频和录音功能示例代码
2018/12/30 Python
python实现的按要求生成手机号功能示例
2019/10/08 Python
selenium学习教程之定位以及切换frame(iframe)
2021/01/04 Python
纯CSS3发光分享按钮的实现教程
2014/09/06 HTML / CSS
纯css3实现照片墙效果
2014/12/26 HTML / CSS
Right-on官方网站:日本知名的休闲服装品牌
2019/07/12 全球购物
中英双版中文教师求职信
2013/10/27 职场文书
药品采购员岗位职责
2014/02/08 职场文书
实习报告评语
2014/04/26 职场文书
幼儿教师演讲稿
2014/05/06 职场文书
婚宴邀请函
2015/01/30 职场文书
2015年会计工作总结范文
2015/05/26 职场文书
2015暑期爱心支教策划书
2015/07/14 职场文书
情况说明书怎么写
2015/10/08 职场文书
LayUI+Shiro实现动态菜单并记住菜单收展的示例
2021/05/06 Javascript
Mysql中调试存储过程最简单的方法
2021/06/30 MySQL