JavaScript实现星级评分

201 阅读 0 评论 133 点赞

我是靠谱客的博主甜美蛋挞，最近开发中收集的这篇文章主要介绍JavaScript实现星级评分，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

事件onmouseover

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
 <title>JavaScript星级评分</title>
 <style type="text/css">
 *{margin:0;padding:0;}
 .wrapper{height:20px;padding:5px;width:130px;margin:100px auto 10px;}
 </style>
 <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 GetTds() {
   var tbl = document.getElementById("tblMain");
   var tds = tbl.getElementsByTagName("td");
   return tds;
  }
  function InitEvent() {
   var tds=GetTds();
   for (var i = 0; i < tds.length; i++) {
    var td = tds[i];
    td.onmouseover = TdOnclick;
    td.style.cursor = "pointer";

   }
  }
  function TdOnclick() {
   var tds = GetTds();
   var index = ArrayIndexOf(tds, this); 
   for (var i = 0; i <=index; i++) {
    var td = tds[i];
    td.innerHTML = "★";
   }
   for (var j = index + 1; j < tds.length; j++) { 
    var td = tds[j];
    td.innerHTML = "☆";
   }
  }
 </script>
</head>
<body onload="InitEvent()" class="wrapper">
<table id="tblMain">
<tr><td>☆</td><td>☆</td><td>☆</td><td>☆</td><td>☆</td></tr>
</table>
</body>
</html>

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持脚本之家！