zoukankan      html  css  js  c++  java
  • JQuery进度条

    需要实现效果如下图。

    页面代码
    <div class='progress_bar' data-color='#f66' data-per='"+list[i].percent+"' data-width='180'><span></span></div><label class='progress_bar_label'>100%</label>

    第一次进入页面调用。或每次赋值或更改值时调用方法

    function updataProgressBar(){ //更新进度条信息

      //进度条设置
      var $color=$('.progress_bar').attr('data-color');  //data-color 为进度条颜色 例#ff6600
      $('.progress_bar').each(function () {
      var per=$(this).attr('data-per');             //data-per 为进度条 进度值 1-100
      var barWidth=$(this).attr('data-width');         //data-width 为进度条宽度 值自定义 单位自动填充px
      $(this)
      .find('span').css({'background' : $color , 'width' : per + '%'})
      .parent().css({'width' : barWidth})
      .next().text(per+'%');
      })
    }

     
  • 相关阅读:
    获取当前时区时间
    python lambda表达式详解
    Odoo 12开发之开发环境准备
    初步了解odoo12
    web前端面试题
    实现一个优先级队列
    面试题
    python读取和生成excel文件
    Django基础
    virtualenv
  • 原文地址:https://www.cnblogs.com/zhan1995/p/8708404.html
Copyright © 2011-2022 走看看