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

     tr,td{font-size:66px;color:#000000;background:#ffffff;}

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

JavaScript星级评分的更多相关文章

  1. javascript星级评分（多个）

    JS打多个类型星级评分: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http: ...

  2. JavaScript星级评分，仿百度，增强版

    JavaScript星级评分,仿百度,增强版 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" & ...

  3. 原生javascript星级评分

    写个最简单的原生js的星级评分: <div id="rank" class="pingfen"> <ul> <li>< ...

  4. js星级评分点击星级评论打分效果

    html代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www ...

  5. js星级评分点击星级评论打分效果--收藏--转载

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  6. js实现星级评分效果（非常规5个li代码）

    1. 前言 此方案受到JS单行写一个评级组件启发,自己写了一个简单Demo. 功能有正常滑动,动态显示实心星星个数:当点击确认,则保持当前的实心星星个数:再移动时未点击,则离开后还是保持之前的状态. ...

  7. jQuery动态星级评分效果实现方法

    本文实例讲述了jQuery动态星级评分效果实现方法.分享给大家供大家参考.具体如下: 这里的jQuery星级评分代码,是大家都很喜欢的功能,目前广泛应用,本星级评分加入了动画效果,注意,如果要真正实现 ...

  8. js css 点亮 星级评分

    利用css 和 js 实现星级评分 <!DOCTYPE html> <html lang="en"> <head> <meta chars ...

  9. 数组练习：各种数组方法的使用&&事件练习：封装兼容性添加、删除事件的函数&&星级评分系统

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

随机推荐

  1. 用lucene.net根据关键字检索本地word文档

    目前在做一个winform小软件,其中有一个功能是能根据关键字检索本地保存的word文档.第一次是用com读取word方式(见上一篇文章),先遍历文件夹下的word文档,读取每个文档时循环关键字查找, ...

  2. Java泛型和集合之泛型介绍

    在声明一个接口和类的时候可以使用尖括号带有一个或者多个参数但是当你在声明属于一个接口或者类的变量的时候或者你在创建一个类实例的时候需要提供他们的具体类型.我们来看下下面这个例子 List<Str ...

  3. Inno Setup connection to the database and create

    原文 Inno Setup connection to the database and create Description: the first half of this program in I ...

  4. LINQ TO SQL ——Group by

    原文:LINQ TO SQL --Group by 分组在SQL中应用的十分普遍,在查询,统计时都有可能会用到它.LINQ TO SQL中同样具备group的功能,这篇我来讲下LINQ TO SQL中 ...

  5. 开始Unity3D参观考察

    前言:这个系列的文章纯属对自己学习的整理,非高手之作. 但确实的记载了我作为一个没接触过3D游戏编程的大学生的心路历程.争取每周整理一次吧. 之所以会開始学Unity3D,最基本的原因是由于在快放暑假 ...

  6. EF6+MVC4+EasyUI个人日记系统开源共享

    发现在2015年里学习MVC的人越来越多,本人的群成员也越来越多,为了更方便大家学习,在此共享一个个人的小项目. 如下是部分截图: 简单介绍一下本系统的一些相关知识. 1.简单的3层框架,易学易懂 2 ...

  7. ASP.NET MVC Model元数据

    ASP.NET MVC Model元数据(三) 前言 在上篇中我们大概的讲解了Model元数据的生成过程,并没有对Model元数据本身和详细的生成过程有所描述,本篇将会对详细的生成过程进行讲解,并且会 ...

  8. C# STA和MTA线程设置

    参考资料: http://www.yesky.com/20010207/158097.shtml http://www.ftponline.com/china/XmlFile.aspx?ID=242 ...

  9. golang切片slice

    切片slice是引用类型 len()函数获取元素的个数 cap()获取数组的容量 1.申明方式 (1)var a []int 与数组不同的是他不申明长度(2)s2 := make([]int, 3, ...

  10. ArcGIS多面体（multipatch）解析（一）

    从几何学的角度来说,再复杂的三维形状都可以通过足够多,足够小的三角形组合起来表达.比如矩形可以表达成两个三角形,如下图: 圆柱形可以由多个三角形排列而成: 但ArcGIS中的多面体构成并没有采用这种“ ...