实际项目中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. 单页面实现之hash

    至学了angularJs后,发现这个单页面应用不知道在没有angularJs的情况下怎么实现. 所以就此对这个思考与资料并行,终于知道这个的实现基本原理. 首先angularJs的实现是hash值的变 ...

  2. MongoDB 安装和可视化工具

    MongoDB 是一款非常热门的NoSQL,面向文档的数据库管理系统,官方下载地址是:MongoDB,博主选择的是 Enterprise Server (MongoDB 3.2.9)版本,安装在Win ...

  3. 前端MVC框架Backbone 1.1.0源码分析系列

    Backbone.js 是一个在JavaScript环境下的 模型-视图-控制器 (MVC) 框架.任何接触较大规模项目的开发人员一定会苦恼于各种琐碎的事件回调逻辑.以及金字塔般的代码.而且,在传统的 ...

  4. Android动画学习(二)——Tween Animation

    前两天写过一篇Android动画学习的概述,大致的划分了下Android Animation的主要分类,没有看过的同学请移步:Android动画学习(一)——Android动画系统框架简介.今天接着来 ...

  5. Android随笔之——模拟按键操作的几种方式

    前几天转过一篇Android上模拟按键操作.触屏事件的博客,昨天又去找了百度.谷歌了一下,写了一点简单的测试代码,留待不时之需.有需要看之前转载的那篇博客的请看这里→_→转:Android随笔之——使 ...

  6. 安装ClouderaManager以及使用ClouderaManager安装分布式集群的若干细节

    目录 前言 整体介绍 分步安装介绍 总结 一.前言        周末干了近四十个小时中间只休息了五个小时终于成功安装了ClouderaManager以及分布式集群,其中各种辛酸无以言表,唯有泪两行. ...

  7. HTML5 音频 <audio>

    HTML5 提供了播放音频的标准. 一.Web 上的音频 直到现在,仍然不存在一项旨在网页上播放音频的标准. 今天,大多数音频是通过插件(比如 Flash)来播放的.然而,并非所有浏览器都拥有同样的插 ...

  8. ASP.NET实现微信功能（2）（服务号高级群发）

    前面写了一篇文章,关于微信的:http://www.cnblogs.com/kmsfan/p/4047097.html 今天打算来写本系列的第二批文章,服务号后台群发. 在写本篇文章之前,我们先来看看 ...

  9. 3.Java网络编程之IP

    前面两篇博文我们已经简单了解了IP.端口.协议以及两种参考模型,我们现在重新从程序角度来看下这个参考模型. 如果我们从事的是Web网站开发,那么我们应该知道HTML是一种超文本标记语言 (Hyper ...

  10. js正则表达式语法

    1. 正则表达式规则 1.1 普通字符 字母.数字.汉字.下划线.以及后边章节中没有特殊定义的标点符号,都是"普通字符".表达式中的普通字符,在匹配一个字符串的时候,匹配与之相同的 ...