Home > Article > Web Front-end > Complete example of javascript mouse sliding scoring control_javascript skills

Complete example of javascript mouse sliding scoring control_javascript skills

WBOYOriginal: 2016-05-16 15:59:231128browse

The example in this article describes the javascript mouse sliding scoring control. Share it with everyone for your reference. The specific implementation method is as follows:

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

I hope this article will be helpful to everyone’s JavaScript programming design.

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：JavaScript method to achieve layer expansion effect after mouse click_javascript skillsNext article：JavaScript method to achieve layer expansion effect after mouse click_javascript skills

See more

Complete example of javascript mouse sliding scoring control_javascript skills

Related articles