当前位置： 移动技术网 > IT编程>开发语言>JavaScript > JavaScript实现星级评分

JavaScript实现星级评分

2019年03月30日  | 移动技术网IT编程  | 我要评论

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

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

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网