事件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. 安装Windows2012操作系统 - 初学者系列 - 学习者系列文章

    Windows 2012是微软最新的服务器操作系统,估计在国外服务器空间的运营商安装的比较多些吧.下面简要介绍下该操作系统的安装. 1.  将光盘放入光驱.进入BIOS设置成光驱启动.重启计算机. 2 ...

  2. leetcode[96] Binary Tree Inorder Traversal

    给定树根root.实现中序遍历,也就是左根右. 用递归的话,很简单,左边的返回值加上root的再加上右边的就行. 我自己写的有点挫: /** * Definition for binary tree ...

  3. easyui datagrid 前台分页

    核心方法 //分页data function pagerFilter(data, pagegrid) { if (typeof data.length == 'number' && t ...

  4. 02.零成本实现WEB性能测试-基于APACHE JMETER

    书评: 1.这本是介绍性能测试工具Jmeter的书籍,维度还够,但是粒度太粗. 2.对于想快速了解JMeter的使用和工具的原件使用,还是有一定的参考价值. 3.实际上,这本书可用来快速入门,掌握和了 ...

  5. QualityCenter的备份

    1.停止QC Server:2.备份Domain repository,它囊括每个项目的大量数据(包括自动化测试数据.附件.设置和格式表单等).要想知道某个项目所使用的数据库的名字,可以在Site A ...

  6. 解决nexus下载maven索引的问题

    解决nexus下载maven索引的问题 (2011-10-12 17:48:46) 转载▼ 标签: it 分类: java 转自 http://www.colorfuldays.org/program ...

  7. S全选功能代码

    JS全选功能代码优化 2014-06-26 00:00 by 龙恩0707, 470 阅读, 3 评论, 收藏, 编辑 JS全选功能代码优化 最近在看javascript MVC那本书,也感觉到自己写 ...

  8. c#生成word文档

    参考:http://blog.163.com/zhouchunping_99/blog/static/7837998820085114394716/ 生成word文档 生成word文档 view pl ...

  9. C程序设计语言（第二版）习题：第一章

    第一章虽然感觉不像是个习题.但是我还是认真去做,去想,仅此而已! 练习 1-1 Run the "hello, world" program on your system. Exp ...

  10. C#开发ActiveX控件

    昨天写了篇博客<Winform 程序嵌入WPF程序 并发送消息>,没有说明为什么要嵌入WPF程序,那么今天就来唠叨唠叨其中的一个使用场景,开发ActiveX控件 首先,新建一个类库工程Hu ...