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

<!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">

    .wrapper{left:100px;top:100px}

    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);  //this用得传神

            if (index < 0) {

                return;

            }

            for (var i = 0; i <=index; i++) {

                var td = tds[i];

                td.innerHTML = "★";

                switch (i) {

                    case 0:

                        tds[5].innerText = "很差";

                        break;

                    case 1:

                        tds[5].innerText = "较差";

                        break;

                    case 2:

                        tds[5].innerText = "还行";

                        break;

                    case 3:

                        tds[5].innerText = "推荐";

                        break;

                    case 4:

                        tds[5].innerText = "力荐";

                        break;                       

                }

            }

            for (var j = index + 1; j < tds.length-1; j++) {  //错误j写成了i

                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><td style="font-size:30px;width:45px"></td></tr>

</table>

</body>

</html>

JavaScript星级评分，仿百度，增强版的更多相关文章

  1. javascript星级评分（多个）

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

  2. JavaScript星级评分

    事件onmouseover <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http ...

  3. 原生javascript星级评分

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

  4. js仿百度文库文档上传页面的分类选择器_第二版

    仿百度文库文档上传页面的多级联动分类选择器第二版,支持在一个页面同一时候使用多个分类选择器. 此版本号把HTML,CSS,以及图片都封装到"category.js"中.解决因文件路 ...

  5. 高仿百度传课应用客户端源码iOS版

    高仿百度传课iOS版,版本号:2.4.1.2 运行环境:xcode6.3  ios8.3 (再往上系统没有测试) 转载请注明出处,不可用于商业用途及不合法用途. 如果你觉得不错,欢迎  star  哦 ...

  6. JavaScript仿百度图片浏览效果（转载）

    转载来源:https://www.jb51.net/article/98030.htm 这是一个非常好的案例,然而jquery的时代正在徐徐关闭. 当你调整浏览器宽高,你会发现它不是自适应的.当你想把 ...

  7. Springboot+Vue实现仿百度搜索自动提示框匹配查询功能

    案例功能效果图 前端初始页面 输入搜索信息页面 点击查询结果页面 环境介绍 前端:vue 后端:springboot jdk:1.8及以上 数据库:mysql 核心代码介绍 TypeCtrler .j ...

  8. 读书笔记：JavaScript DOM 编程艺术（第二版）

    读完还是能学到很多的基础知识,这里记录下,方便回顾与及时查阅. 内容也有自己的一些补充. JavaScript DOM 编程艺术(第二版) 1.JavaScript简史 JavaScript由Nets ...

  9. WPF仿百度Echarts人口迁移图

    GitHub地址:https://github.com/ptddqr/wpf-echarts-map/tree/master 关于大名鼎鼎的百度Echarts我就不多说了 不了解的朋友直接看官方的例子 ...

随机推荐

  1. Spring Boot 整合Servlet

    冷知识,几乎用不到 在spring boot中使用Servlet有两种实现方法: 方法一: 正常创建servlet,然后只用注解@ServletComponentScan package clc.us ...

  2. 汉字与区位码互转(天天使用Delphi的String存储的是内码，Windows记事本存储的文件也是内码)，几个常见汉字的各种编码，utf8与unicode的编码在线查询，附有读书笔记 good

    汉=BABA(内码)=-A0A0=2626(区位码)字=D7D6(内码)=-A0A0=5554(区位码) 各种编码查询表:http://bm.kdd.cc/ 汉(记住它,以后碰到内存里的数值,就会有敏 ...

  3. POJ1077 Eight —— 正向BFS

    主页面:http://www.cnblogs.com/DOLFAMINGO/p/7538588.html 代码一:以数组充当队列,利用结构体中的pre追溯上一个状态在数组(队列)中的下标: #incl ...

  4. Why is an 'Any CPU' application running as x86 on a x64 machine?

      It's likely that you linked some assemblies that are not Any CPU, but include native code (or are ...

  5. 底层并发APIs_源自objc.io

    本文由webfrogs译自objc.io,原文作者Daniel Eggert.   小引 本篇英文原文所发布的站点objc.io是一个专门为iOS和OS X开发者提供的深入讨论技术的平台,文章含金量很 ...

  6. hdu 4022 Bombing（map,multiset）

    题意:n个基地放在2维平面,然后m个炸弹人,每个炸弹人可以炸一行或者一列,输出每个炸弹人炸掉的基地个数. 思路:用map<int,multiset<int> >对应起来一行或者 ...

  7. java回调机制及其实现

    1. 什么是回调函数 回调函数,顾名思义,用于回调的函数.回调函数只是一个功能片段,由用户按照回调函数调用约定来实现的一个函数.回调函数是一个工作流的一部分,由工作流来决定函数的调用(回调)时机.回调 ...

  8. [SHOI 2013] 发微博

    [题目链接] https://www.lydsy.com/JudgeOnline/problem.php?id=4419 [算法] 用std :: set维护每个人的好友集合 当两人成为好友时将每人接 ...

  9. javascript之常遇到的浏览器兼容问题和解决方法

    转自http://www.cnblogs.com/duenyang/p/6066737.html 常遇到的关于浏览器的宽高问题: var winW=document.body.clientWidth| ...

  10. bzoj 1657 Mooo 奶牛的歌声 —— 单调栈

    题目:https://www.lydsy.com/JudgeOnline/problem.php?id=1657 单调栈水题. 代码如下: #include<iostream> #incl ...