<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <title></title>

    <style type="text/css">

        td

        {

            width:50px;

            height:50px;

            border:1px solid #808080;

            cursor:pointer;

        }

    </style>

    <script type="text/javascript">

        window.onload=function()

        {

            var tds = document.getElementsByTagName("td");

            for(var i=0;i<tds.length;i++)

            {

                tds[i].onmouseenter = OnMouseEnter;

                tds[i].onmouseleave = OnMouseLeave;

                tds[i].onclick = OnClick;

            }

        }

        //判断是否被点击，是 就保存黄色；不是 就变为白色

        var isClick = false;

        //鼠标点击td保留背景色

        function OnClick()

        {

            if (!isClick)

            {

                OnMouseEnter;

                isClick = true;

            }

        }

        //鼠标停留td背景色变黄

        function OnMouseEnter()

        {

            var previous = this.previousElementSibling;

            this.style.backgroundColor = "yellow";

            while (previous)

            {

                previous.style.backgroundColor = "yellow";

                previous = previous.previousElementSibling;

            }

        }

        //鼠标移开td背景色变白

        function OnMouseLeave()

        {

            if (!isClick)

            {

                var previous = this.previousElementSibling;

                this.style.backgroundColor = "white";

                while (previous) {

                    previous.style.backgroundColor = "white";

                    previous = previous.previousElementSibling;

                }

            }

        }

    </script>

</head>

<body>

    <div style="text-align:center;">

        <table style="margin:0 auto;">

            <thead>

                评分后不可更改

            </thead>

            <tr>

                <td>1</td>

                <td>2</td>

                <td>3</td>

                <td>4</td>

                <td>5</td>

            </tr>

        </table>

    </div>

</body>

</html>

鼠标点击后可保留颜色。

页面效果如下：

JS实现星级评分的更多相关文章

  1. js实现星级评分效果（非常规5个li代码）

    1. 前言 此方案受到JS单行写一个评级组件启发,自己写了一个简单Demo. 功能有正常滑动,动态显示实心星星个数:当点击确认,则保持当前的实心星星个数:再移动时未点击,则离开后还是保持之前的状态. ...

  2. js 实现星级评分

    最近的项目中有一个星级评分的需求,  自己就写了一下, 由于可能一个页面要用到多个,就采用了面向对象的写法. 用到的png图片也放到这里.    js要用到jquery. css: .sr-star{ ...

  3. js实现星级评分之方法一

    利用一个星级评分的小案例,来逐步封装js星级评分插件. 从最基础的js知识,通过一个小的demo,逐步学习js的面向对象知识. 从浅到深,逐步递进. 图片素材 <!DOCTYPE html> ...

  4. 原生JS实现-星级评分系统

    今天我又写了个很酷的实例:星级评分系统(可自定义星星个数.显示信息) sufuStar.star();使用默认值5个星星,默认信息 var msg = [........]; sufuStar.sta ...

  5. js css 点亮 星级评分

    利用css 和 js 实现星级评分 <!DOCTYPE html> <html lang="en"> <head> <meta chars ...

  6. 原生javascript星级评分

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

  7. js星级评分点击星级评论打分效果

    html代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www ...

  8. js星级评分点击星级评论打分效果--收藏--转载

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  9. javascript星级评分（多个）

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

随机推荐

  1. Spring整合activiti-modeler5.16遇到的小问题

    接上一篇整合activiti-modeler并成功创建model:Spring整合activiti-modeler5.16   之后,我尝试运用自定义的model部署流程,但是在部署的过程中又遇到了一 ...

  2. php CI框架nginx 配置

    # ci     server {        listen       80;        server_name  my.clb.com;        root /var/website/c ...

  3. iis7.5中使用fastcgi方式配置php5.6.5

    1.下载php-5.6.5,解压到d:/servers/php.修改extension_dir,放开用到的.dll文件:修改timezone=Asia/Shanghai; 2.如果在命令行执行php ...

  4. 转--简单工厂模式 Simple Factory

    简单工厂模式的作用就是定义一个用于创建对象的接口 在简单工厂模式中,一个工厂类处于对产品类实例化调用的中心位置上,它决定那一个产品类应当被实例化.         先来看看它的组成: 1) 工厂类角色 ...

  5. Android屏幕适配建议

    一.关于布局适配 1.不要使用绝对布局 2.尽量使用match_parent 而不是fill_parent . 3.能够使用权重的地方尽量使用权重(android:layout_weight) 4.如 ...

  6. ylbtech-Unitity-cs:传递的字符串中数字字符的数目

    ylbtech-Unitity-cs:传递的字符串中数字字符的数目 1.A,效果图返回顶部   1.B,源代码返回顶部 1.B.1, using System; namespace Functions ...

  7. php新浪微博登录接口用法实例

    本文实例讲述了php新浪微博登录接口用法.分享给大家供大家参考.具体分析如下: 在做微博登陆之前是需要申请到APP KEY 和App Secret,这个的申请方式请去 open.weibo.com 申 ...

  8. 20145305 《Java程序设计》第6周学习总结

    教材学习内容总结 1.输入串流代表对象为java.io.InputStream实例,输出串流代表对象为java.io.OutputStream实例 2.InputStream与OutputStream ...

  9. springmvc 注解 RequestParam/RequestHeader/CookieValue

    RequestParam注解: 示例: @RequestMapping("/testRequestParam") public String testRequestParam(@R ...

  10. 九度OJ1084

    这道题一旦想开,其实思想十分简单的. 首先考虑n为奇数的情况,不难知f(n)=f(n-1).(只需要把n的所有拆分式-1即可……) 然后考虑n为偶数的情况,将拆分式划分为两种情况:一种是式子中带1的, ...