欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

JavaScript实现星级评分

程序员文章站 2022-06-13 14:56:34
事件onmouseover

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

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