事件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. Spring IOC之依赖

    一个标准的企业级应用不只有一个对象组成.即使是最简单的引用也会有个相互作用的对象以使最终呈现 在用户面前的是个连贯一致的引用. 1依赖注入 依赖注入(DI)是一个对象定义他们依赖的过程,也就是说他们一 ...

  2. [译]Java 设计模式之原型

    (文章翻译自Java Design Pattern: Prototype) 原型模式用于当当非常相似的对象频繁被需要的时候.原型模式克隆了对象并且设置变化的特征.这种方式会消耗更少的资源.考虑下为什么 ...

  3. Redis源代码分析（二十四）--- tool工具类（2）

    在上篇文章中初步的分析了一下,Redis工具类文件里的一些使用方法,包含2个随机算法和循环冗余校验算法,今天,继续学习Redis中的其它的一些辅助工具类的使用方法.包含里面的大小端转换算法,sha算法 ...

  4. INSTEAD OF触发器

    Oracle触发器5(INSTEAD OF触发器) 前提:对于简单的视图,可以直接进行DML操作,但是对于复杂视图,不允许直接执行DML操作,当视图符合以下任何一种情况都不可以: 具有集合操作符(UN ...

  5. linux服务创建及jq配置服务列表查看

    1.应用背景 随着业务需求,后台处理服务不断增多,对于这些服务或后台程序的查看.更新操作越来越凌乱,所以我们首先需要一个服务列表查看工具,方便查看各 服务的端口.运行状态.jar包路径等等. 2.创建 ...

  6. .net创建并安装windows服务案例

    1. 创建windows服务[引用博文]: 1. 将这个服务程序切换到设计视图2. 右击设计视图选择“添加安装程序”3. 切换到刚被添加的ProjectInstaller的设计视图4. 设置servi ...

  7. 自动生成api文档

    vs2010代码注释自动生成api文档 最近做了一些接口,提供其他人调用,要写个api文档,可是我想代码注释已经写了说明,能不能直接把代码注释生成api?于是找到以下方法 环境:vs2010 先下载安 ...

  8. VS多平台开发

    Xamarin技术文档------VS多平台开发   此技术业余时间研究,仅供大家学习参考,不涉及深入研究,有一定开发基础的人员,应该都能较快上手. 一.简介 Xamarin始创于2011年,旨在使移 ...

  9. MVC程序中实体框架的连接恢复和命令拦截

    MVC程序中实体框架的连接恢复和命令拦截 这是微软官方SignalR 2.0教程Getting Started with Entity Framework 6 Code First using MVC ...

  10. c#中关于String、string，Object、object，Int32、int

    在java中,string和String有着明显的区别,后者就是前者的一个封装.在c#中,好像是通用的,大部分情况下,两者互换并不会产生问题.今天特意查了一下资料,了解了一下两者的关系. 简单的讲,S ...