<!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. springMvc的400问题

    主要是参数类型对不上导致的 本文主要记录一些作者在使用spring mvc过程中遇到的一些以及解决办法,以备日后查询或者供其他网友阅读,每个问题的解决办法肯定不止一种,如果你也遇到过类似问题,并且有独 ...

  2. Ognl对象图导航语言 源码

    // -------------------------------------------------------------------------- // Copyright (c) 1998- ...

  3. 用Vundle管理Vim插件

    作为程序员,一个好用的Vim,是极其重要的,而插件能够使原本功能羸弱的Vim变得像其他功能强大的IDE一样好用.然而下载.配置插件的过程比较繁琐,大家往往需要自己进行下载/配置等操作,如果还涉及到更新 ...

  4. Ansible实战之Nginx高可用代理LNMP-wordpress

    author:JevonWei 版权声明:原创作品 blog:http://119.23.52.191/ --- 实验环境:前端使用Nginx做代理服务器,静态资源经由缓存服务器,连接后端web集群, ...

  5. [TC_SRM_460]TheCitiesAndRoadsDivOne

    [TC_SRM_460]TheCitiesAndRoadsDivOne 试题描述 John and Brus have become very famous people all over the w ...

  6. 【Begin】

    迫于无奈,我想提高写博速度.我要尽量压缩每道题的题解思路.最终我选择背叛大米兔,但是我支持它.因为它的每一篇博客耗时巨大,精贵的竞赛集训时间经不起它花:可同时精致的博客会带给来浏览的Oier们更多东西 ...

  7. shell特殊符号用法大全

      # 注释符号(Hashmark[Comments]) 1.在shell文件的行首,作为shebang标记,#!/bin/bash; 2. 其他地方作为注释使用,在一行中,#后面的内容并不会被执行, ...

  8. arduino ide的串口权限解决

    刚刚到手一个Arduino uno R3的板子,windows下arduino IDE的串口正常使用,linux下却出现权限问题,解决方案如下:(以下操作使用超级用户) 1.查看设备所在的组ls -l ...

  9. Django笔记：常见故障排除

    Django框架下MySQLdb模块在python3中无法使用的问题的解决方案 由于python3环境下目前还没有官方的mysqldb模块,Django框架中又强制要求使用mysqldb,为了解决这个 ...

  10. H5页面唤起手机号

    做手机H5页面的时候经常会碰到在某一个页面会显示一个手机号,坑爹的产品会说你点击一下能不能让手机弹出号码,然后拨打出去,我试了试各种百度来的方法都是失败的,比如下面的这个: <a href=&q ...