<!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. IIS是怎么处理同时到来的多个请求的？

        假设有一台服务器,它的IIS上部署有一个Web应用程序-S,可以通过浏览器或其他方式进行访问.     假设有A.B.C三台电脑同时访问网站S,IIS接收到3个HTTP请求,然后分别为三个请求 ...

  2. 简单Dp----最长公共子序列，DAG最长路，简单区间DP等

    /* uva 111 * 题意: * 顺序有变化的最长公共子序列: * 模板: */ #include<iostream> #include<cstdio> #include& ...

  3. chrome浏览器无法安装非应用商店插件的解决办法

    不久前,安装了一个非chrome应用商店的第三方应用,今天突然发现无法使用,打开chrome的扩展程序后,发现该插件以及被禁用,在网上查找了解决方法,设置“开发者模式”,修改了chrome的参数,仍然 ...

  4. POJ1848 Tree 【树形dp】

    题目链接 POJ1848 题解 由题,一个环至少由三个点组成,一个点作为根时,可以单独成链,可以与其一个儿子成链,或者与其两个儿子成环,与其一个剩余链长度大于等于2的儿子成环. 那么我们设最小代价 \ ...

  5. BZOJ5302 [HAOI2018]奇怪的背包 【数论 + dp】

    题目 小 CC 非常擅长背包问题,他有一个奇怪的背包,这个背包有一个参数 PP ,当他 向这个背包内放入若干个物品后,背包的重量是物品总体积对 PP 取模后的结果． 现在小 CC 有 nn 种体积不同 ...

  6. 无序字母对 character

    无序字母对 character 题目描述 给定n个各不相同的无序字母对(区分大小写,无序即字母对中的两个字母可以位置颠倒).请构造一个有n+1个字母的字符串使得每个字母对都在这个字符串中出现. 输入 ...

  7. PowerDesigner反向生成数据库模型（MySql篇）

    目录: 数据库的反向生成模型 模型的Cooment注释显示 步骤一:下载odbc驱动并进行安装: (1)下载 mysql-connector-odbc-5.3.4-win32 注意:不管电脑是32位, ...

  8. BZOJ 1497: [NOI2006]最大获利

    1497: [NOI2006]最大获利 Time Limit: 5 Sec  Memory Limit: 64 MBSubmit: 4572  Solved: 2239[Submit][Status] ...

  9. Python 函数的一般形式及参数

    #!/usr/bin/env python # -*- coding:utf-8 -*- # @Time : 2017/11/01 21:46 # @Author : lijunjiang # @Fi ...

  10. 【转载】Word2010编号列表&多级列表

    1.引用场景         对于一份标准.漂亮的word文档,编号列表和多级列表的设置时必不可少的,正因为有它们,文档看起来才更专业,使用起来才更加的方便.如下面截图一般,这是十分常见的多级列表设置 ...