<style type="text/css">
.Bar { position: relative; width: 200px; /* 宽度 */ border: 1px solid #B1D632; padding: 1px; }
.Bar div { display: block; position: relative; background:#00F;/* 进度条背景颜色 */ color: #333333;
      height: 20px; /* 高度 */ line-height: 20px; /* 必须和高度一致,文本才能垂直居中 */ }
.Bar div span{ position: absolute; width: 200px; /* 宽度 */ text-align: center; font-weight: bold; }
</style>
<div class="Bar">
<div style="width: 50%;">
<span>50%</span>
</div>
</div>
  //此方法用于计算百分比
  public String getPercent(int x,int total){
if(x==0&&total!=0){
return "0";
}else if(x==0&&total==0){
return "100%";
}
String result="";//接受百分比的值
double x_double=x*1.0;
double tempresult=x_double/total;
//保留到小数点后几位
DecimalFormat df = new DecimalFormat("0.00%"); //##.00% 百分比格式,后面不足2位的用0补齐
result= df.format(tempresult);
//注释掉的也是一种方法
//NumberFormat nf = NumberFormat.getPercentInstance();
//nf.setMinimumFractionDigits( 2 );
//result=nf.format(tempresult);
     return result;
}

CSS+DIV进度条的更多相关文章

  1. CSS实现进度条和订单进度条

    最近半个月为了期末考试,可要了学渣我半瓶血啊!今天本该好好复习的,可是状态不好,就随便找点乐子玩一玩,于是乎就想起之前面试时面试官给的一道题(见标题),那就弄点简单的小玩意给自己洗洗脑咯. 简单地效果 ...

  2. 每日CSS_纯CSS制作进度条

    每日CSS_纯CSS制作进度条 2020_12_26 源码 1. 代码解析 1.1 html 代码解析 设置整个容器 <div class="container"> . ...

  3. css 实现进度条

    <select id="progress" onchange="changeProgress(this)"> <option value=&q ...

  4. Css静态进度条

    图片预览: Css代码: <style> .statusList{width:240px; float:left; line-height:68px;margin:0 2px; text- ...

  5. CSS 静态进度条效果

    今天学习到了实现一个静态进度条的方法,固写一篇笔记稳固一下自己的知识. 最终的效果如下,进度条放在一个框里,水平宽自适应. 现在就开始,首先写一个进度条先. .progress-bar{ /* 进度条 ...

  6. 纯CSS打造进度条

    进度条效果如下: CSS部分 body { background-color: white; } .progress-bar { display: flex; flex-direction: row; ...

  7. css绘制进度条,持续转动的进度条

    //只有 progress pregress-par bar,进度条不会转, //增加 active 这个类,进度条会转, //html结构 <div class='progress activ ...

  8. CSS实现进度条

    进度条经常运用于网页,即使我们意识到不是所有的东西都将瞬间被加载完成,这些进度条用于提醒使用者关于网页上具体的任务进程,譬如上传,下载,加载应用程序等. 以前如果想要创建一个进度条的动画效果,没有使用 ...

  9. 不可思议的纯 CSS 滚动进度条效果

    结论先行,如何使用 CSS 实现下述滚动条效果? 就是顶部黄色的滚动进度条,随着页面的滚动进度而变化长短. 在继续阅读下文之前,你可以先缓一缓.尝试思考一下上面的效果或者动手尝试一下,不借助 JS , ...

随机推荐

  1. python爬取淘宝排名

    import timeimport jsonimport requestsimport xlrdimport randomimport os from xlutils.copy import copy ...

  2. 配置Java web的一次经历

    最近在完成数据库作业,重新拾起了以前学过的Java,讲下自己的 Java web 配置过程. 1.安装 Tomcat 在官网下载 Tomcat7.0版本:https://tomcat.apache.o ...

  3. Could not get lock /var/lib/apt/lists/lock

    执行: apt-get update 出现 Could not get lock /var/lib/apt/lists/lock 解决办法: 查询与apt相关的进程 ps -e | grep apt ...

  4. JS 方法注入 attachEvent

    写法1: <html> <head> <title></title> <script language="javascript" ...

  5. 斐讯 N1 刷 Armbian 5.64

    前言 N1 天天链是斐讯出的一款挖矿产品,虽然已经翻车,但是本身硬件配置还是很不错的,晶晨 S905D 主控,蓝牙 4.1,双频 WiFi,2G + 8G,USB2.0,HDMI.而一个只要不到 80 ...

  6. C# 函数参数object sender, EventArgs e

    object sender:表示触发事件的控件对象EventArgs e:表示事件数据的类的基类 Windows程序有一个事件机制.用于处理用户事件. 在WinForm中我们经常需要给控件添加事件.例 ...

  7. 多气体组分DEM流动的DMP并行内存错误

    今天踩到一个坑.调DEM反应的时候,气体需要设置为多组分,这时就不能用 DES_INTERP_ON = .T. DES_INTERP_SCHEME = 'GARG_2012' 这个差值格式了,否则DM ...

  8. PHP7 关于变量的基本判断

    刚学 PHP ,一些基础还不太牢固,边实践边记录. about NULL $class_name = null; 语句结束后,$class_name 是空,没有,什么都没有的“空”.用 is_null ...

  9. bzoj3261: 最大异或和 (可持久化trie树)

    题目链接 题解 看到异或和最大就应该想到01 trie树 我们记\(S_i\)为前i项的异或和 那么我们的目的是最大化\(S_n\)^\(x\)^\(S_{j-1}\) \((l <= j &l ...

  10. 误删除google浏览器用户,如何恢复之前收藏的标签,亲测有效

    第一种方案: 看 路径 C:\Users\admin\AppData\Local\Google\Chrome\User Data\Default  下或者 C:\Users\admin\AppData ...