<!DOCTYPE HTML>

<html>

    <head>

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

        <title>无标题文档</title>

        <script>

            window.onload = function (){

                var oUl = document.getElementById("list");

                var aLi = oUl.getElementsByTagName("li");

                var half = 2;

                var off = 1;

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

                {

                    aLi[i].index = i;

                    aLi[i].onmouseover = function (){

                        if(off)

                        {

                            fillstar(this.index,half);

                        }

                    }

                    aLi[i].onmouseout = function (){

                        if(off)

                        {

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

                            {

                            aLi[i].style.background = "url(http://img.alicdn.com/tps/i1/T1r.UsXf4dXXcC1lsa-204-400.png) no-repeat";

                            }

                        }

                    }

                    aLi[i].onclick = function (){

                        if(off)

                        {

                            fillstar(this.index,half);

                            off = !off;

                        }

                    }

                    function fillstar(num,half){

                        if( num < half )

                        {

                            for(var i = 0; i <= num; i++)

                            {

                                aLi[i].style.background = "url(http://img.alicdn.com/tps/i1/T1r.UsXf4dXXcC1lsa-204-400.png) no-repeat 0px -116px";

                            }

                        }else if ( num >= half && num < aLi.length - 1 ){

                            for(var i = 0; i <= num; i++)

                            {

                                aLi[i].style.background = "url(http://img.alicdn.com/tps/i1/T1r.UsXf4dXXcC1lsa-204-400.png) no-repeat 0px -57px";

                            }

                        }else {

                            for(var i = 0; i <= num; i++)

                            {

                                aLi[i].style.background = "url(http://img.alicdn.com/tps/i1/T1r.UsXf4dXXcC1lsa-204-400.png) no-repeat 0px -87px";

                            }

                        }

                    }

                }

            }

        </script>

        <style>

            #list{list-style: none;}

            #list li{

                height: 23px;

                width: 24px;

                background: url(http://img.alicdn.com/tps/i1/T1r.UsXf4dXXcC1lsa-204-400.png) no-repeat;

                display: block;

                float: left;

                cursor: pointer;

            }

        </style>

    </head>

    <body>

        <ul id = "list">

            <li></li>

            <li></li>

            <li></li>

            <li></li>

            <li></li>

        </ul>

    </body>

</head>

js 淘宝评分的更多相关文章

  1. Auto.js淘宝领喵币

    最近,淘宝的新玩法,一直在充斥我的眼球,尤其是喵币的,盖楼... .... 于是就进去看了看,发现逛逛店铺,给好多喵币,但是要进20个,每个要15秒,好麻烦,于是就上网搜了一下,有没有脚本 因为之前搞 ...

  2. JS淘宝小广告

    <!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8 ...

  3. JS淘宝浏览商品

    <!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8 ...

  4. 淘宝首页源码藏美女彩蛋(下)（UED新作2013egg）

    我们已经知道,执行美女会得到"彩蛋",而正是彩蛋做到了taobaoUED展现给大家的神奇的前端魅力.今天我们来看看FP.egg&&FP.egg("%cjo ...

  5. JS五星级评分效果(类似与淘宝打分效果)

    今天晚上研究下 五星级评分效果,类似于淘宝后台评分效果,如下图所示: 思路: 当鼠标移到一颗星的时候 判断当前的索引 当前及当前的索引前面的星星亮起来 每当移到任何一颗星星时候 下面跟随提示 mous ...

  6. 仿淘宝分页按钮效果简单美观易使用的JS分页控件

    分页按钮思想:  1.少于9页,全部显示  2.大于9页,1.2页显示,中间页码当前页为中心,前后各留两个页码  附件中有完整例子的压缩包下载.已更新到最新版本  先看效果图:  01输入框焦点效果  ...

  7. 摘自淘宝的js地区组件

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

  8. 手把手教你写电商爬虫-第四课 淘宝网商品爬虫自动JS渲染

    版权声明:本文为博主原创文章,未经博主允许不得转载. 系列教程: 手把手教你写电商爬虫-第一课 找个软柿子捏捏 手把手教你写电商爬虫-第二课 实战尚妆网分页商品采集爬虫 手把手教你写电商爬虫-第三课 ...

  9. JS仿淘宝详情页菜单条智能定位效果

    类似于淘宝详情页菜单条智能定位 对于每个人来说并不陌生!如下截图所示:红色框的那部分! 基本原理: 是用JS侦听滚动事件,当页面的滚动距离(页面滚动的高度)大于或者等于 "对象"( ...

随机推荐

  1. TOJ5272: 逆矩阵

    5272: 逆矩阵  Time Limit(Common/Java):1000MS/3000MS     Memory Limit:65536KByteTotal Submit: 11         ...

  2. java流(二)

    目录 1 ObjectOutputStream/ObjectInputStream的使用 2 序列化 3 具体序列化的过程 4 Externalizable的简易介绍 实现序列化的Person类 /* ...

  3. log4j配置信息

    #INFO的日志信息输出到stdout和R这两个目的地,stdout和R的定义在下面的代码,可以任意起名.等级可分为OFF.FATAL.ERROR.WARN.INFO.DEBUG.ALLlog4j.r ...

  4. cf 843 A Sorting by Subsequences [建图]

    题面: 传送门 思路: 这道题乍一看有点难 但是实际上研究一番以后会发现,对于每一个位置只会有一个数要去那里,还有一个数要离开 那么只要把每个数和他将要去的那个位置连起来,构成了一个每个点只有一个入边 ...

  5. BZOJ4516 [Sdoi2016]生成魔咒 【后缀自动机】

    题目 魔咒串由许多魔咒字符组成,魔咒字符可以用数字表示.例如可以将魔咒字符 1.2 拼凑起来形成一个魔咒串 [1,2]. 一个魔咒串 S 的非空字串被称为魔咒串 S 的生成魔咒. 例如 S=[1,2, ...

  6. 弱题（bzoj 2510）

    Description 有M个球,一开始每个球均有一个初始标号,标号范围为1-N且为整数,标号为i的球有ai个,并保证Σai = M. 每次操作等概率取出一个球(即取出每个球的概率均为1/M),若这个 ...

  7. jdk、maven、tomcat环境变量配置

    1.jdk 新建环境变量: JAVA_HOME:C:\Program Files\Java\jdk1.8.0_91 CLASSPATH:.;%JAVA_HOME%\lib;%JAVA_HOME%\li ...

  8. Lotus Notes Error: your mail file cannot be located. use file location manage location to ensure that your mail file is specified correctly

    在notes客户端中,当我们切换到另一个ID的时候,通过程序发送邮件,会报错:

  9. Codeforces Gym100971 G.Repair-思维题(切矩形板子) (IX Samara Regional Intercollegiate Programming Contest Russia, Samara, March 13)

    这个题就是一块大板子,问你能不能切成两块要求的长宽的两块板子,一开始是按切板子想的,感觉有点麻烦. 直接反过来想,把两块要求的板子拼起来,填成一个大板子,看填出来的这个板子和题目给的板子比较,小于等于 ...

  10. HDU5877Weak Pair

    Weak Pair                                 Time Limit: 4000/2000 MS (Java/Others)    Memory Limit: 26 ...