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 相关文章推荐
SyntaxHighlighter代码加色使用方法
Sep 07 Javascript
关于JQuery($.load)事件的用法和分析
Apr 09 Javascript
基于JQuery 滑动与动画的说明介绍
Apr 18 Javascript
js给页面加style无效果的解决方法
Jan 20 Javascript
Jquery获取和修改img的src值的方法
Feb 17 Javascript
jquery实现更改表格行顺序示例
Apr 30 Javascript
JavaScript和JQuery获取DIV值的方法示例
Mar 07 Javascript
JavaScrpt判断一个数是否是质数的实例代码
Jun 11 Javascript
MUI 实现侧滑菜单及其主体部分上下滑动的方法
Jan 25 Javascript
微信小程序模拟cookie的实现
Jun 20 Javascript
3分钟了解vue数据劫持的原理实现
May 01 Javascript
夯基础之手撕javascript继承详解
Nov 09 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分页类代码
2013/04/02 PHP
php中try catch捕获异常实例详解
2014/11/21 PHP
Yii2框架dropDownList下拉菜单用法实例分析
2016/07/18 PHP
通过JS获取用户本地图片路径并显示的代码
2012/02/16 Javascript
JavaScript高级程序设计(第3版)学习笔记3 js简单数据类型
2012/10/11 Javascript
js触发onchange事件的方法说明
2014/03/08 Javascript
上传文件返回的json数据会被提示下载问题解决方案
2014/12/03 Javascript
jquery实现上下左右滑动的方法
2015/02/09 Javascript
AngularJS实现在ng-Options加上index的解决方法
2016/11/03 Javascript
vue.js仿hover效果的实现方法示例
2019/01/28 Javascript
详解JavaScript作用域和作用域链
2019/03/19 Javascript
layui 上传文件_批量导入数据UI的方法
2019/09/23 Javascript
layui实现下拉复选功能的例子(包括数据的回显与上传)
2019/09/24 Javascript
原生javascript中this几种常见用法总结
2020/02/24 Javascript
vue 解决addRoutes多次添加路由重复的操作
2020/08/04 Javascript
结合axios对项目中的api请求进行封装操作
2020/09/21 Javascript
[03:11]完美世界DOTA2联赛PWL DAY8集锦
2020/11/09 DOTA
python检测服务器是否正常
2014/02/16 Python
python实现的二叉树算法和kmp算法实例
2014/04/25 Python
Python实现建立SSH连接的方法
2015/06/03 Python
编写自定义的Django模板加载器的简单示例
2015/07/21 Python
Python实现的用户登录系统功能示例
2018/02/05 Python
浅谈python实现Google翻译PDF,解决换行的问题
2018/11/28 Python
python画图系列之个性化显示x轴区段文字的实例
2018/12/13 Python
Django rstful登陆认证并检查session是否过期代码实例
2019/08/13 Python
Django多进程滚动日志问题解决方案
2019/12/17 Python
Python threading.local代码实例及原理解析
2020/03/16 Python
Python map及filter函数使用方法解析
2020/08/06 Python
IE10 Error.stack 让脚本调试更加方便快捷
2013/04/22 HTML / CSS
宝拉珍选美国官网:Paula’s Choice美国
2018/01/07 全球购物
八一建军节感言
2014/02/28 职场文书
电脑售后服务承诺书
2014/03/27 职场文书
成品库仓管员岗位职责
2014/04/06 职场文书
学校党员个人问题整改措施思想汇报
2014/10/08 职场文书
党的群众路线教育实践活动学习计划
2014/11/03 职场文书
Redis入门教程详解
2021/08/30 Redis