JavaScript实现星级评分

网络编程 2024/11/15 佚名

3 2 1

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

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

js,星级评分

标签：

js,星级评分

免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com

评论“JavaScript实现星级评分”

JavaScript实现星级评分

暂无“JavaScript实现星级评分”评论...

JavaScript实现星级评分

js,星级评分

那些精彩的JavaScript代码片段

angular2倒计时组件使用详解

评论“JavaScript实现星级评分”

更新动态

友情链接