实际项目中li和里边的数值是动态生成的，需要控制它的宽度和颜色，效果如图：

如果能实现颜色按数值规律变化就好了，目前颜色是固定到数组中的。

实例代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style media="screen">
    li{
        padding-left: 20px;
        list-style: none;
    }
    li>div{
        height: 20px;
        background-color: #038faa;
        border-top-right-radius: 10px;
        border-bottom-right-radius: 10px;
        display: inline-block;
        position: relative;
    }
    li>div>span{
        display: inline-block;
        position: absolute;
        right: -22px;
    }
    </style>
</head>
<body>
    <ul>
        <li>
            <div><span>56</span></div>
        </li>
        <li>
            <div><span>18</span></div>
        </li>
        <li>
            <div><span>16</span></div>
        </li>
        <li>
            <div><span>13</span></div>
        </li>
        <li>
            <div><span>11</span></div>
        </li>
        <li>
            <div><span>9</span></div>
        </li>
        <li>
            <div><span>9</span></div>
        </li>
        <li>
            <div><span>8</span></div>
        </li>
        <li>
            <div><span>7</span></div>
        </li>
        <li>
            <div><span>7</span></div>
        </li>
    </ul>

<script src="http://libs.baidu.com/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript">   
        $(function(){
            var hotMaxNum = $("div:first").find("span").html();
            $("div").each(function(){
                var hotNum = $(this).find("span").html();
                $(this).width(hotNum/hotMaxNum*350);
            });
        });
        $(function(){
            var colorValue = new Array("#ffbbff", "#ffd39b", "#c6e2ff", "#9f79ee", "#9bcd9b","#ff8c00","#87ceff","#3addfc","#cd69c9","#00eeee");
            var tempValue = $("span").eq(0).html();
            var y = 0;
            $("span").each(function(){
                var hotNumMax = $(this).html();
                if(hotNumMax*1<tempValue){
                    tempValue = hotNumMax*1;
                    y++;
                }
                $(this).parent().css( {"background-color":colorValue[y],"color":colorValue[y]} );
            });            
        });
    </script>
</body>
</html>

li进度条宽度和颜色按顺序显示的效果。的更多相关文章

  1. 【转】用emWin进度条控件做个表盘控件,效果不错

    @2018-08-09 用emWin进度条控件做个表盘控件,效果不错

  2. 【消灭代办】第5周 - null拷贝,input自适应,进度条加载,颜色随机值

    2018.12.10 代办一:javascript中js怎么拷贝null的值 null属于简单类型的数值,直接进行拷贝即可: 2018.12.11 代办二:怎么让input自适应宽度? 这样是写下代办 ...

  3. 从进度条和alert的出现顺序来了解浏览器 UI 渲染 & JS进程

    项目里有一个需求是在上传文件的时候需要显示进度条,那么理所当然的在上传完成后就需要提示用户上传完毕并且更新进度条. 之前的预期表现是,上传完毕后,先更新进度条到100%,再alert出提示,所以代码如 ...

  4. Jquery.Uploadify实现批量上传显示进度条 取消 上传后缩略图显示 可删除

    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="UpLoad.aspx.cs&q ...

  5. 自绘CProgressCtrl进度条控件，支持自定义显示文本和进程百分比信息

    // CXProgressCtrl 头文件 #pragma once // CXProgressCtrl class CXProgressCtrl : public CProgressCtrl { D ...

  6. vue-music 关于Player （播放器组件）--播放和进度条

    迷你播放器 1.播放器组件会在各个页面的情况下会打开. 首先在vuex state.js 中定义全局的播放器状态 import {playMode} from 'common/js/config.js ...

  7. 学习 | css3实现进度条加载

    进度条加载是页面加载时的一种交互效果,这样做的目的是提高用户体验. 进度条的的实现分为3大部分:1.页面布局,2.进度条动效,3.何时进度条增加. 文件目录 加载文件顺序 <link rel=& ...

  8. N 种仅仅使用 HTML/CSS 实现各类进度条的方式

    本文将介绍如何使用 HTML/CSS 创建各种基础进度条及花式进度条及其动画的方式,通过本文,你可能可以学会: 通过 HTML 标签 <meter> 创建进度条 通过 HTML 标签 &l ...

  9. iOS学习-圆形进度条

    效果: #import <UIKit/UIKit.h> @interface HsProfitRatePieWidgets : UIView { UILabel *_textLabel; ...

随机推荐

  1. DAC Usage3：Monitor Data-tier Applications

    If you deploy a DAC to a managed instance of the Database Engine, information about the deployed DAC ...

  2. CSS系列：CSS中盒子模型

    盒子模型是CSS控制页面时一个很重要的概念.所有页面中的元素都可以看成是一个盒子,占据着一定的页面空间.可以通过调整盒子的边框和距离等参数,来调节盒子的位置和大小. 1. 盒子的内部结构 在CSS中, ...

  3. 【原创】开源Math.NET基础数学类库使用(01)综合介绍

                   本博客所有文章分类的总目录:[总目录]本博客博文总目录-实时更新  开源Math.NET基础数学类库使用总目录:[目录]开源Math.NET基础数学类库使用总目录 前言 ...

  4. 创建 floating IP - 每天5分钟玩转 OpenStack（106）

    先复习一下前面我们讨论的知识. 当租户网络连接到 Neutron router,通常将 router 作为默认网关.当 router 接收到 instance 的数据包,并将其转发到外网时: 1. r ...

  5. 坑爹的Maven

    之前没用过Maven,最近在研究Curator的时候,导入别人的工程,但是没有相应的包,需使用Maven解决依赖.于是各种折腾,最后虽然解决了,但中间的坑还不少.尽管网上也有相应的安装教程,但很多都是 ...

  6. EntityFramework DbContext 线程安全

    先看这一段异常信息: A second operation started on this context before a previous asynchronous operation compl ...

  7. Sublime Text3下的markdown插件的安装及配置

    Sublime Text3下的markdown插件的安装及配置 安装准备--安装Package Control 安装MarkdownEditing 安装Markdown Preview或OmniMar ...

  8. Project Server 2010 配置详解

    应公司要求,需要加强对项目的管理.安排我学习一下微软的Project是如何进行项目管理的,并且在公司服务器上搭建出这样的一个项目管理工具.可以通过浏览器就可以访问.我因为用的单机是Project Pr ...

  9. springMVC学习笔记(二)-----注解和非注解入门小程序

    最近一直在做一个电商的项目,周末加班,忙的都没有时间更新博客了.终于在上周五上线了,可以轻松几天了.闲话不扯淡了,继续谈谈springMvc的学习. 现在,用到SpringMvc的大部分使用全注解配置 ...

  10. jQuery-1.9.1源码分析系列（十） 事件系统——事件绑定

    事件绑定的方式有很多种.使用了jQuery那么原来那种绑定方式(elem.click = function(){...})就不推荐了,原因? 最主要的一个原因是elem.click = fn这种方式只 ...