<!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. JAVA作业一

    public class java1 { /** * @param args */ public static void main(String[] args) { // TODO Auto-gene ...

  2. 来自知乎的pthread_cond_wait为什么总是带着mutex

       来自https://www.zhihu.com/question/24116967?q=linux%20%E5%A4%9A%E7%BA%BF%E7%A8%8B%20%E8%99%9A%E5%81 ...

  3. table中填写数据并批量增加

    <table class = "table jtable table-bordered table-striped hide" id = "table_1" ...

  4. css选择器位置和数量技巧

    1. 除去首个元素 li:not(:first-child) li + li li:first-child ~ li 2. 第1-3个元素 li:nth-child(-n+3) 3. 除去第1-3个元 ...

  5. python 读取文件夹下的图片进行处理

    python的os模块中有一个listdir函数可以遍历读取文件夹下的文件. import os for filename in os.listdir(r"./file"): #l ...

  6. 转：java native

    今日在hibernate源代码中遇到了native关键词,甚是陌生,就查了点资料,对native是什么东西有了那么一点了解,并做一小记. native关键字说明其修饰的方法是一个原生态方法,方法对应的 ...

  7. 免费tk域名+freewebhostingarea空间

    1.申请免费域名 进入http://www.dot.tk(推荐注册tk域名),申请一个新的域名,每次申请12个月以下是免费的,到期前14天可以免费续期 在此页面执行下一步之前,需要进行设置DNS服务器 ...

  8. wsl折腾记

    参考1 wsl在哪 C:\Users\用户名\AppData\Local\Packages\CanonicalGroupLimited.Ubuntu18.04onWindows_79rhkp1fndg ...

  9. hdu 1158 dp

    /* 题目大意:给n个月工作需要的人数,雇佣一个需要花hire 每个月的薪水是salary,解雇一个需要fire 求完成所有工作的最小费用 dp(i,j)表示第i个月雇佣j员工的最小费用 */ #in ...

  10. URAL1960 Palindromes and Super Abilities

    After solving seven problems on Timus Online Judge with a word “palindrome” in the problem name, Mis ...