Javascript:模仿淘宝的信用评价

老板昨天开会说:要给公司的购物平台增加信用评价功能,用户体验参考淘宝。

于是今天研究了一下,用jQuery模似一个类似的效果: 

代码如下:

<!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>模仿淘宝的信用评价--菩提树下的杨过(yjmyzz.cnbogs.com)</title>
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript">
        var rateMessage = {
            'rate-1': {
                'rate-1': '差得太离谱,与卖家描述的严重不符,非常不满',
                'rate-2': '部分有破损,与卖家描述的不符,不满意',
                'rate-3': '质量一般,没有卖家描述的那么好',
                'rate-4': '质量不错,与卖家描述的基本一致,还是挺满意的',
                'rate-5': '质量非常好,与卖家描述的完全一致,非常满意'
            },

            'rate-2': {
                'rate-1': '卖家态度很差,还骂人、说脏话,简直不把顾客当回事',
                'rate-2': '卖家有点不耐烦,承诺的服务也兑现不了',
                'rate-3': '卖家回复问题很慢,态度一般,谈不上沟通顺畅',
                'rate-4': '卖家服务挺好的,沟通挺顺畅的,总体满意',
                'rate-5': '卖家的服务太棒了,考虑非常周到,完全超出期望值'
            },

            'rate-3': {
                'rate-1': '再三提醒下,卖家才发货,耽误我的时间,包装也很马虎',
                'rate-2': '卖家发货有点慢的,催了几次终于发货了',
                'rate-3': '卖家发货速度一般,提醒后才发货的',
                'rate-4': '卖家发货挺及时的,运费收取很合理',
                'rate-5': '卖家发货速度非常快,包装非常仔细、严实'
            },

            'rate-4': {
                'rate-1': '物流公司态度非常差,送货慢,外包装有破损',
                'rate-2': '物流公司服务态度挺差,运送速度太慢',
                'rate-3': '物流公司服务态度一般,运送速度一般',
                'rate-4': '物流公司态度还好吧,送货速度挺快的',
                'rate-5': '物流公司服务态度很好,运送速度很快'
            }
        };



        $().ready(function () {

            var starInit = $("#starInit");
            var ulStars = $("#ulStars");
            var txtStar = $("#txtStar");
            var tip = $("#tip");
            var rate_1_result = $("#rate_1_result");
            var star_wrap = $("#star_wrap");

            starInit.hover(function () {
                starInit.hide();
                star_wrap.show();
            })

            var oLis = $("#ulStars li");
            oLis.each(function (i) {
                $(this).click(function () {
                    var iStar = parseInt($(this).attr("star"), 10);
                    txtStar.val(iStar);
                    rate_1_result.html("<span style='color:red'>" + iStar + " 分</span> - " + rateMessage["rate-1"]["rate-" + iStar]);
                }).hover(function () {
                    var iStar = parseInt($(this).attr("star"), 10);
                    for (var i = 0; i < oLis.length; i++) {
                        var _temp = oLis[i];
                        if (_temp.attributes["star"].value <= iStar) {
                            if (iStar >= 3) {
                                _temp.className = "good";
                            }
                            else {
                                _temp.className = "bad";
                            }
                        }
                        else {
                            _temp.className = "";
                        }
                    }
                }, function () {
                    if (txtStar.val() != "") {
                        var iSelectedStar = parseInt(txtStar.val(), 10);
                        for (var i = 0; i < oLis.length; i++) {
                            var _temp = oLis[i];
                            if (_temp.attributes["star"].value > iSelectedStar) {
                                _temp.className = "";
                            }
                            else {
                                var iSelfStar = parseInt(_temp.attributes["star"].value, 10);
                                if (iSelfStar >= 3) {
                                    _temp.className = "good";
                                }
                                else {
                                    if (iSelectedStar >= 3) {
                                        _temp.className = "good";
                                    }
                                    else {
                                        _temp.className = "bad";
                                    }
                                }
                            }
                        }
                    }
                }).mousemove(function (e) {
                    var intX = 0, intY = 0;
                    if (e == null) {
                        e = window.event;
                    }
                    if (e.pageX || e.pageY) {
                        intX = e.pageX; intY = e.pageY;
                    }
                    else if (e.clientX || e.clientY) {
                        if (document.documentElement.scrollTop) {
                            intX = e.clientX + document.documentElement.scrollLeft;
                            intY = e.clientY + document.documentElement.scrollTop;
                        }
                        else {
                            intX = e.clientX + document.body.scrollLeft;
                            intY = e.clientY + document.body.scrollTop;
                        }
                    }
                    var tipbar = tip.get(0);
                    tipbar.style.top = (intY + 20) + "px";
                    tipbar.style.left = (intX - 95) + "px";
                    tipbar.style.display = "";

                    var iStar = parseInt($(this).attr("star"), 10);
                    tip.html("<span style='color:red'>" + iStar + " 分</span> - " + rateMessage["rate-1"]["rate-" + iStar]);

                }).mouseout(function () {
                    tip.hide();
                })
            })

            star_wrap.hover(function () { }, function () {
                setTimeout(initStar, 50);
            })

            ulStars.hover(function () { }, function () { setTimeout(initStar, 50); });

            var initStar = function () {
                if (txtStar.val() == "") {
                    star_wrap.hide();
                    starInit.show();
                    for (var i = 0; i < oLis.length; i++) {
                        var _temp = oLis[i];
                        _temp.className = "";
                    }
                }
            }
        })  
        
             
	
    </script>
    <style type="text/css">
        * { padding: 0; margin: 0; list-style: none; font-size: 12px; }
        #starBox { margin: 100px; }
        #starInit { width: 120px; height: 36px; overflow: hidden; float: left; }
        #star_wrap, #ulStars { width: 120px; height: 18px; overflow: hidden; float: left; }
        #ulStars li { width: 19px; height: 18px; background: url(bg.gif) no-repeat -278px -96px; float: left; margin-right: 5px; cursor: pointer; }
        #ulStars li.good { background: url(bg.gif) no-repeat -278px -52px; }
        #ulStars li.bad { background: url(bg.gif) no-repeat -278px -73px; }
        #tip { width: 171px; height: 67px; background: url(bg.gif) no-repeat -40px -167px; padding: 15px 3px 0 5px; line-height: 18px; }
        #txtStar { position: absolute; left: 0; top: -30px; }
        #rate_1_result { float: left; line-height: 25px; text-indent: 15px; color: Red; }
    </style>
</head>
<body>
    <div id="starBox">
        <div id="starInit">
            <img src="star_init.gif" alt="点击星星即可评分" />
        </div>
        <div id="star_wrap" style="display: none">
            <ul id="ulStars">
                <li star="1"></li>
                <li star="2"></li>
                <li star="3"></li>
                <li star="4"></li>
                <li star="5"></li>
            </ul>
        </div>
        <div id="rate_1_result">←点击星星就能评价了</div>
        <input type="text" id="txtStar" style="width: 30px" value="" />
        <div id="tip" style="position: absolute; display: none"></div>
    </div>
</body>
</html>

源代码下载 转载请注明来自"菩提树下的杨过"

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏新智元

2016年 CES 大展 VR/AR 论坛前瞻

国外 VR 媒体uploadvr最近收集整理了即将举行的 16年CES 大展上,VR/AR 部分的论坛安排。我们一起来看看。本文分两部分,按日期,上部分是 1月...

3658
来自专栏杨熹的专栏

写作需要学习

上周写了三篇,这是本周第二篇,这几篇都只是在用自己的老底,而没有去学习如何写作。如果一直都是在记流水账,那即使坚持100天也未必能达到想要的效果。 今日思考:如...

3188
来自专栏龙行天下CSIEM

科学瞎想系列之十七 能源危机是个神马鬼

能源危机是困扰当今世界可持续发展的难题之一,其实从严格意义上来讲,"能源危机"是一个伪命题,根据能量守恒定律,宇宙中的能量即不会无中生有也不会无故泯灭。...

3376
来自专栏益联益家

益联益家公益行走进桂林敬老院,山水甲,人更美

 2018年8月9日,益联益家总部代表及会员代表前往桂林灵川县大圩镇敬老院开展“益联益家公益行·走进桂林”暖心活动,为当地老人送去善款和物资,传递温暖,弘扬美德...

963
来自专栏黑白安全

白帽子到底是黑还是白?

自从“黑客”一词被妖魔化后,贵圈人士一时间找不到合适的词来标榜自己,突然间有一天顿悟,发现“白帽子”这词不错,完全从“黑”变“白”。于是,这个词开始在贵圈流行,...

832
来自专栏量子位

Python的“仁慈独裁者”累觉不爱,宣布退位

1314
来自专栏挖数

小鲜肉崩盘!吴亦凡、鹿晗人气下滑超50%

这个时间点,跟EXO四子归国日期不谋而合,因此大致可以把EXO四子称为第一届小鲜肉。

7813
来自专栏挖数

杨幂的 “生命周期”

最近上映的电影《宝贝儿》票房扑街,上线一周票房仅2000万出头,一贯打高分的猫眼电影评分只有5.4分,而豆瓣的5.6分更让该片落在剧情片排行榜尾部5%的位置。

782
来自专栏smy

JSON 数据使用方法

当同一个模板需要替换不同的数据显示的时候,如果数据量大点,用json很方便。 json对象: var JSONObject= { "name":"Bill Ga...

2867
来自专栏PPV课数据科学社区

程序员的笑话/漫画集锦-爆笑星期天

  (这是根据真实事情改编的哦。)   1. 发帖   一个女程序员 twitter 上发了一条 tweet:   昨晚梦见男朋友和别的女人在逛街,梦里我的第一...

3366

扫码关注云+社区

领取腾讯云代金券