实际项目中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. SQL Server DDL触发器运用

    一.本文所涉及的内容(Contents) 本文所涉及的内容(Contents) 背景(Contexts) 基础知识(Rudimentary Knowledge) DDL运用场景(DDL Scene) ...

  2. SQL Server 复制：事务发布

    一.背景 在复制的运用场景中,事务发布是使用最为广泛的,我遇到这样一个场景:在Task数据库中有Basic与Group两个表,需要提供这两个表的部分字段给其它程序读取放入缓存,程序需要比较及时的获取到 ...

  3. lua中的string类型

    在lua中用union TString来表示字符串类型 lobject.h: 其中结构体tsv中 reserved字段表示字符串是不是保留关键字,hash是其哈希值,len是其长度.我们在TStrin ...

  4. js实现多张图片每隔一秒换一张图片

    aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAlkAAAHWCAIAAADLlAuAAAAgAElEQVR4nOzd5XNc157w+/l7bt2n6t

  5. MVC4做网站六后台管理:6.1.4管理员列表、添加及删除

    一.管理员列表 1.首先[AdministratorController]中添加返回分部视图的public PartialViewResult Index() /// <summary> ...

  6. Why Namespace? - 每天5分钟玩转 OpenStack（102）

    上一节我们讨论了 Neutron 将虚拟 router 放置到 namespace 中实现了不同 subnet 之间的路由.今天探讨为什么要用 namespace 封装 router? 回顾一下前面的 ...

  7. geotrellis使用（十八）导入多波段Tiff、读取多波段Tile

    Geotrellis系列文章链接地址http://www.cnblogs.com/shoufengwei/p/5619419.html 目录 前言 多波段数据导入 读取多波段瓦片 提取单波段 总结 一 ...

  8. 使用openfiler设置SMB/CIFS共享总是不通过的一例与解决办法

    最近使用openfiler进行空闲存储的集中化管理与多主机节点共享,等设置到了SMB/CIFS的时候总是通过不了,前提需要开启的LDAP内建在openfiler也都开启并设置好了,但就是无法通过&qu ...

  9. 1Z0-053 争议题目解析694

    1Z0-053 争议题目解析694 考试科目:1Z0-053 题库版本:V13.02 题库中原题为: 694.As part of archiving the historical data, you ...

  10. iis7.0上发布mvc4.0网站

    步骤如下: 1.右击需要发布的项目,在弹出的菜单中选择“发布...”选项 2.在“发布web”对话框中进行设置,配置文件名称默认为“配置文件1”可以修改为需要的名字,以便识别,也可以不改.发布方法选择 ...