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>javascript鼠标滑动控件</title>
<script type="text/javascript">
function ArrayIndexof(arr, inElement) {
  for (var i = 0; i < arr.length; i++) {
 if (arr[i] == inElement) {
   return i;
 }
  }
  return -1;
}
function GetTDS() {
  var tbl = document.getElementById("tblMain");
  var tds = tbl.getElementsByTagName("td");
  return tds;      
}
function iniEvent() {
  var tds = GetTDS();
  for (var i = 0; i < tds.length; i++) {
 td = tds[i];
 td.onmouseover = TdOnMouseOver;
  }
  var tbl = document.getElementById("tblMain");
  tbl.onmouseout = TableMouseOut;
}
function SetRating(tdTmp) {
  var tds = GetTDS();
  var index = ArrayIndexof(tds, tdTmp);
  for (var i = 0; i <= index; i++) {
 td = tds[i];
 td.innerHTML = "★";
  }
  for (var i = index + 1; i < tds.length; i++) {
 td = tds[i];
 td.innerHTML = "☆";
  }
}
function TdOnMouseOver() {
  SetRating(this);
}
//鼠标离开表格后自动清除
function TableMouseOut() {
  var tds = GetTDS();
  for (var i = 0; i < tds.length; i++) {
 td = tds[i];
 td.innerHTML = "☆";         
  }
}
</script>
</head>
<body onload="iniEvent()">
<table id="tblMain" border="1">
<tr>
  <td>☆</td>
  <td>☆</td>
  <td>☆</td>
  <td>☆</td>
  <td>☆</td>
</tr>
</table>
</body>
</html>

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

Javascript 相关文章推荐
JQuery读取XML文件数据并显示的实现代码
Dec 16 Javascript
JavaScript可否多线程? 深入理解JavaScript定时机制
May 23 Javascript
JS比较两个时间大小的简单示例代码
Dec 20 Javascript
提高jQuery性能优化的技巧
Aug 03 Javascript
AngularJS中$http使用的简单介绍
Mar 17 Javascript
js如何获取网页所有图片
May 12 Javascript
js中数组常用方法总结(推荐)
Apr 09 Javascript
vue实现带复选框的树形菜单
May 27 Javascript
CKEditor 4.4.1 添加代码高亮显示插件功能教程【使用官方推荐Code Snippet插件】
Jun 14 Javascript
Vue 实现显示/隐藏层的思路(加全局点击事件)
Dec 31 Javascript
vue项目使用高德地图的定位及关键字搜索功能的实例代码(踩坑经验)
Mar 07 Javascript
解决vue项目中某一页面不想引用公共组件app.vue的问题
Aug 14 Javascript
javascript实现链接单选效果的方法
May 13 #Javascript
javascript实现table选中的行以指定颜色高亮显示的方法
May 13 #Javascript
javascript实现table表格隔行变色的方法
May 13 #Javascript
javascript模拟评分控件实现方法
May 13 #Javascript
javascript动态设置样式style实例分析
May 13 #Javascript
javascript事件冒泡实例分析
May 13 #Javascript
javascript无刷新评论实现方法
May 13 #Javascript
You might like
PHP 和 XML: 使用expat函数(二)
2006/10/09 PHP
PHP彩蛋信息介绍和阻止泄漏的方法(隐藏功能)
2014/08/06 PHP
PHP实现利用MySQL保存session的方法
2014/08/23 PHP
WordPress中的shortcode短代码功能使用详解
2016/05/17 PHP
js word表格动态添加代码
2010/06/07 Javascript
JavaScript初学者应注意的七个细节小结
2012/01/30 Javascript
JS JSON对象转为字符串的简单实现方法
2013/11/18 Javascript
jQuery on方法传递参数示例
2014/12/09 Javascript
javascript实现画不相交的圆
2015/04/07 Javascript
JQuery validate插件Remote用法大全
2016/05/15 Javascript
简单理解vue中Props属性
2016/10/27 Javascript
AngularJS监听路由变化的方法
2017/03/07 Javascript
JS ES6中setTimeout函数的执行上下文示例
2017/04/27 Javascript
vue如何判断dom的class
2018/04/26 Javascript
vue移动端html5页面根据屏幕适配的四种解决方法
2018/10/19 Javascript
elementUI中Table表格问题的解决方法
2018/12/04 Javascript
Vue使用watch监听一个对象中的属性的实现方法
2019/05/10 Javascript
js 闭包深入理解与实例分析
2020/03/19 Javascript
Python深入学习之对象的属性
2014/08/31 Python
Python编程之string相关操作实例详解
2017/07/22 Python
机器学习实战之knn算法pandas
2019/06/22 Python
python multiprocessing模块用法及原理介绍
2019/08/20 Python
Python语法之精妙的十个知识点(装B语法)
2020/01/18 Python
Django路由层URLconf作用及原理解析
2020/09/24 Python
几个CSS3的flex弹性盒模型布局的简单例子演示
2016/05/12 HTML / CSS
美国著名的婴儿学步鞋老品牌:Robeez
2016/08/20 全球购物
波兰品牌内衣及泳装网上商店:Astratex.pl
2017/02/03 全球购物
大专毕业生自我鉴定
2013/11/21 职场文书
竞争性谈判邀请书
2014/02/06 职场文书
硕士生工作推荐信
2014/03/07 职场文书
道路交通安全实施方案
2014/03/12 职场文书
副校长竞聘演讲稿
2014/09/01 职场文书
2014年房地产销售工作总结
2014/12/01 职场文书
汽车4S店销售经理岗位职责
2015/04/02 职场文书
结婚司仪主持词
2015/06/29 职场文书
搞笑的婚礼主持词
2015/06/29 职场文书