jquery 制作评分控件

原创 2016年08月30日 14:12:38
<!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></title>
    <script src="jQuery/scritps/jquery-1.8.3.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            //为每个td注册一个mouseover事件
            $('#t1 td').mouseover(function () {
                $(this).text('★').prevAll().text('★').end().nextAll().text('☆');
            }).mouseout(function () {
                //当鼠标移开的时候把所有的Td都变成☆,把所有isclicked属性的Td以及之前的td变成★
                $('#t1 td').text('☆');
                $('#t1 td[isclicked=isclicked]').text('★').prevAll().text('★');
            }).click(function () {
                $(this).attr('isclicked', 'isclicked').siblings().removeAttr
                ('isclicked'); //等价于setAtttribute()
                //点击某个td的时候显示分数
                $('#pscore').text($(this).attr('score'));
            }).attr('score', function (index) {
                return (index + 1) * 20;
            });
        })
    </script>
    <style type="text/css">
        td
        {font-size:50px;
         color:Yellow;
         cursor:pointer;
            }
    </style>
</head>
<body>
    <p id="pscore">
    </p>
    <table id="t1" border="0" cellpadding="0" cellspacing="0">
        <tr>
            <td>☆
            </td>
            <td>☆
            </td>
            <td>☆
            </td>
            <td>☆
            </td>
            <td>☆
            </td>
        </tr>
    </table>
版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

Android评分控件

  • 2016年07月07日 13:30
  • 1.42MB
  • 下载

android自定义星星评分控件

  • 2017年06月28日 15:52
  • 21.27MB
  • 下载

progressBar和Handler实现进度条的加载 和RatingBar评分控件

progressBar和Handler          一、说明   在某些操作的进度中的可视指示器,为用户呈现操作的进度,还它有一个次要的进度条,用来显示中间进度,如在流媒体播放的缓冲...

左右滑动评分控件

  • 2015年01月28日 18:31
  • 3.37MB
  • 下载

自定义星星评分控件

  • 2017年06月19日 15:53
  • 35B
  • 下载

自定义LinearLayout实现RatingBar效果,打造一个评分控件

项目中一直用到RatingBar这个评分控件但奈何系统的太难用了,使用他要满足我们的需求需要弄一堆样式、设置这些或者那些东西。但这都不是重点最要命的是设置我们自己的图片他竟然对图片大小还有要求,若不合...
  • a_zhon
  • a_zhon
  • 2017年04月17日 20:20
  • 785

JavaScript(DOM)鼠标移动评分控件

  • 2013年01月09日 10:18
  • 2KB
  • 下载

安卓RatingBar的使用(评分控件)

  • 2016年08月21日 10:25
  • 1001KB
  • 下载

Android 控件之RatingBar评分条(五星)自定义样式

RatingBar的自定义效果 有时候android系统提供给我们的ratingbar效果并不达到我们的要求,这个时候就可以自定义自己喜欢的ratingbar。 从上面的效果可以看出,自定义这样的组件...

星星评分控件

  • 2013年05月28日 09:13
  • 4KB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:jquery 制作评分控件
举报原因:
原因补充:

(最多只允许输入30个字)