事件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. Hbuilder常用快捷键功能.html

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  2. hdu 1059 Dividing 多重背包

    点击打开链接链接 Dividing Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others ...

  3. ajax的post请求

    get和post是http请求方法最主要的两种方式. post: 来个例子test.html <!doctype html> <html lang="en"> ...

  4. james+javamail入门

    James+Javamail构建邮件服务(一) 本文描述如何使用James搭建具备一定邮件过滤.邮件操作功能的邮件服务器,以及使用Javamail实现对James服务器邮件的收发功能. 1关于Jame ...

  5. Jqury笔记

    1.  --------------- -var aa = new Array(); aa.push(1); alert(aa[0]); var aa=[];也表示一个数组: ------------ ...

  6. DropDownListFor的用法

    Asp.Net MVC中DropDownListFor的用法   在Asp.Net MVC中可以用DropDownListFor的方式来让用户选择已定列表中的一个数值.用法不复杂,这里简单做一个记录. ...

  7. 测试驱动 ASP.NET MVC 和构建可测试 ASP.NET MVC 应用程序

    [测试驱动 ASP.NET MVC] http://t.cn/8kdi4Wl [构建可测试 ASP.NET MVC 应用程序]http://t.cn/8kdi4Wj

  8. 关于SourceTree License

    SourceTree 是免费软件,但是需要到官网注册一下账号以获得免费的License 官网地址:https://id.atlassian.com/login?application=mac& ...

  9. TOGAF企业连续体和工具之架构资源库及架构工具的选择

    TOGAF企业连续体和工具之架构资源库及架构工具的选择 3. 架构资源库 在一个企业,尤其是在一个大型企业中,建设一个成熟的架构往往会产生大量的工作产品.为了很好地管理和利用这些工作产品,企业需要制定 ...

  10. CentOS安装Python教程

    下载/安装python yum install -y bzip2* #nodejs 0.8.5需要,请安装python前,先安装此模块.   wget http://www.python.org/ft ...