编程 Javascript

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程序设计有所帮助。

- Author -

永远爱好写程序

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

分享20多个很棒的jQuery 文件上传插件或教程

Sep 04 Javascript

利用jQuery简单实现产品展示图片左右滚动功能(示例代码)

Jan 02 Javascript

jquery选择符快速提取web表单数据示例

Mar 27 Javascript

Javascript学习笔记之对象篇（一） : 对象的使用和属性

Jun 24 Javascript

jquery动态分页效果堪比时光网

Sep 25 Javascript

jQuery中:password选择器用法实例

Jan 03 Javascript

jQuery实现自定义checkbox和radio样式

Jul 13 Javascript

初识Javascript小结

Jul 16 Javascript

Bootstarp 基础教程之表单部分实例代码

Feb 03 Javascript

在点击div中的p时，如何阻止事件冒泡

Feb 07 Javascript

详谈Ajax请求中的async:false/true的作用(ajax 在外部调用问题)

Feb 10 Javascript

JavaScript实现九宫格拖拽效果

Jun 28 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