实际项目中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. 解密jQuery内核 样式操作

    基础回顾 jQuery里节点样式读取以及设置都是通过.css()这个方法来实现的,本章通一下分解探究下jquery里这部分代码的实现 那么jQuery要处理样式的哪些问题? 先简单回顾下样式操作会遇到 ...

  2. sizzle分析记录：分解流程

    <form> <label>Name:</label> <input name="name" /> <fieldset> ...

  3. ASP.NET MVC5 网站开发实践(二) Member区域 - 用户部分（3）修改资料、修改密码

    在上一篇博客中实现了用户的注销和登录,其实代码里落了点东西,就是用户登录要更新最后一次登录时间和登录IP,这次补上.今天做修改资料和修改密码,TryUpdateModel是新用到的东西. 目录: AS ...

  4. 深入理解定时器系列第二篇——被誉为神器的requestAnimationFrame

    × 目录 [1]引入 [2]特点 [3]使用[4]兼容[5]应用 前面的话 与setTimeout和setInterval不同,requestAnimationFrame不需要设置时间间隔.这有什么好 ...

  5. 操作系统页面置换算法(opt,lru,fifo,clock)实现

    选择调出页面的算法就称为页面置换算法.好的页面置换算法应有较低的页面更换频率,也就是说,应将以后不会再访问或者以后较长时间内不会再访问的页面先调出. 常见的置换算法有以下四种(以下来自操作系统课本). ...

  6. 【记录】从客户端()中检测到有潜在危险的 Request.Path 值。

    从客户端()中检测到有潜在危险的 Request.Path 值. 错误信息: Application_Error Url: www.cnblogs.com/%E5%BA%.... UserAgent: ...

  7. Java内存模型深度解析：顺序一致性--转

    原文地址:http://www.codeceo.com/article/java-memory-3.html 数据竞争与顺序一致性保证 当程序未正确同步时,就会存在数据竞争.java内存模型规范对数据 ...

  8. 为SharePoint 站点添加通知

    作为思想.内容的共享型产品,SharePoint 不出意外的成为其中最好用的产品之一,想想平时在公司中接到通知并了解通知内容是件很平常的事情,那让这种平常的事情进入到SharePoint中可以通过如下 ...

  9. iOS_UIImage的方向(imageOrientation)

    Demo下载地址 一.重现问题: 拍照获得的图片,由于尺寸不对,需要拆切.但是有的图片拆切出来,方向就乱了.查找了一些质量才知道.图片还有个方向属性! imageOrientation. 二.一个图片 ...

  10. 一言不合就动手系列篇一-仿电商平台前端搜索插件(filterMore)

    话说某年某月某日,后台系统需要重构,当时公司还没有专业前端,由我负责前台页面框架搭建,做过后台系统的都知道,传统的管理系统大部分都是列表界面和编辑界面.列表界面又由表格和搜索框组成, 对于全部都是输入 ...