实际项目中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. Index的填充属性：FillFactor 和 PAD_INDEX

    在Create Index时,必须考虑属性FillFactor 和 PAD_INDEX的设置,这两个属性只在create index 或 rebuild index时起作用,表示Index page( ...

  2. win8下IE10的鼠标mouse事件响应错误BUG

    具体症状就是有时候鼠标左键响应,有时候右键才能响应 问题的原因就是事件对象的detail没有复位 https://github.com/clientside/amplesdk/issues/187

  3. Windows phone 全景视图

    Windows phone 全景视图下为了实现可以上下滑动需要使用listbox. 需要的布局什么的,在listbox中填写 <ListBox Name="ListBox_new&qu ...

  4. Android NDK开发初识

    神秘的Android NDK开发往往众多程序员感到兴奋,但又不知它为何物,由于近期开发应用时,为了是开发的.apk文件不被他人解读(反编译),查阅了很多资料,其中有提到使用NDK开发,怀着好奇的心理, ...

  5. iOS开发之SQLite--C语言接口规范(三)——Binding Values To Prepared Statements

    在前面的博客中已经介绍了如何连接SQLite数据库,并且简单的查询和遍历结果集.在前面用到了sqlite3_stmt *stmt,也就是预编译后的SQL语句.在本篇博客中会了解一下sqlite3_st ...

  6. CDH安装失败了，如何重新安装

    1> 删除Agent节点的UUID # rm -rf /opt/cm-5.4.7/lib/cloudera-scm-agent/* 2>  清空主节点CM数据库 进入主节点的Mysql数据 ...

  7. .NET随记【你懂的】

    .NET随记.txt放在桌面好久了,编程过程中记录些杂七杂八的东西,分享给大家希望有所帮助. goto 常用于 switch语句中 字符串相加用 StringBuilder的Append()方法性能好 ...

  8. geotrellis使用（二）geotrellis-chatta-demo以及geotrellis框架数据读取方式初探

    在上篇博客(geotrellis使用初探)中简单介绍了geotrellis-chatta-demo的大致工作流程,但是有一个重要的问题就是此demo如何调取数据进行瓦片切割分析处理等并未说明,经过几天 ...

  9. publishing failed with multiple errors resource is out of sync with the file system--转

    原文地址:http://blog.csdn.net/feng1603/article/details/7398266 今天用eclipse部署项目遇到"publishing failed w ...

  10. OO中，先有对象还是先有类？

    就是问,在面向对象思想里,先有对象还是先有类,乍一看和先有鸡蛋还是先有鸡是一类问题,其实不然!这个问题,在lz考研复试的时候被面试官问过,一模一样,如今又在一个笔试题里看到了类似的题目,眨一下,有人会 ...