事件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. leetcode第31题--Longest Valid Parentheses

    Given a string containing just the characters '(' and ')', find the length of the longest valid (wel ...

  2. 使用.net备份和还原数据库

    原文:使用.net备份和还原数据库 CSDN网友的提问http://community.csdn.net/Expert/TopicView3.asp?id=4929678C#实现SQLSERVER20 ...

  3. 【MS SQL】通过执行计划来分析SQL性能

    原文:[MS SQL]通过执行计划来分析SQL性能 如何知道一句SQL语句的执行效率呢,只知道下面3种: 1.通过SQL语句执行时磁盘的活动量(IO)信息来分析:SET STATISTICS IO O ...

  4. less 命令

    每天一个linux命令(13):less 命令 less 工 具也是对文件或其它输出进行分页显示的工具,应该说是linux正统查看文件内容的工具,功能极其强大.less 的用法比起 more 更加的有 ...

  5. ODBC操作数据库

    /*ODBC使用步骤:(ODBC数据源由微软平台提供) * 1.配置ODBC数据源(控制面板->管理工具->ODBC数据源) * 2.加载并注册驱动程序,导入java.sql.*包 * 3 ...

  6. Entity Framework,TransactionScope 混合使用的问题讨论

    using (var ts = new TransactionScope()) { string connStr = "Data Source=.;Initial Catalog=Test; ...

  7. iOS基础 - 类扩展

    一.类扩展(class extension,匿名分类) 1.格式 @interface 类名 () { // 成员变量... } // 方法声明... @end 2.作用 1> 写在.m文件中 ...

  8. 【转】几点 iOS 开发技巧

    [译] 几点 iOS 开发技巧 原文:iOS Programming Architecture and Design Guidelines 原文来自破船的分享 原文作者是开发界中知晓度相当高的 Mug ...

  9. session验证登陆- 页面跳转

    用session验证登陆,当用户想访问一个页面时由于没有登录,就跳转到登录页面,登录后跳转到用户请求的页面,在session跳转中传上次请求的页面.  怎么获得这个url值并跳转到该页面呢? 以此跳转 ...

  10. [google面试CTCI] 1-8.判断子字符串

    [字符串与数组] Q:Assume you have a method isSubstring which checks if one word is a substring of another G ...